OptionsAPI(配置)和CompositionAPI(组合)
配置API
每个功能都拆分。各种功能的数据放在一起。各种功能的方法也放一起。以及监视,计算属性都放一起。
export default{
data(){
return{
user:{ //用户 功能 数据
},
dept:{ //部门 功能 数据
}
}
},
methods:{
getUser(){//用户 功能 方法
},
getDept(){//部门 功能 方法
}
},
computed:{
},
watch:{
}
}
组合API
将功能组合到一起。一个功能里面包含数据、方法、计算属性、监视。通过函数返回。
export default {
name: 'Person',
setup() {
let name = '张三'
let age = 18//此时的name不是响应式
let phone = '12345678901'
let dept = {
id: 1,
name: 'IT部'
}
console.log(this) //setup中this是undefined,Vue3弱化了this
function addAge(){
age++ //修改界面不会变化,但是值会变化
}
function shouTest(){
alert(phone)
console.log(phone)
}
return {name, age, phone, dept,addAge, shouTest}
}
}