數(shù)據(jù)初始化不同
- vue2: 數(shù)據(jù)一般放在data函數(shù)中
data() {
return {
test: ''
}
}
- vue3: 新增setup函數(shù)，在setup中采用ref、reactive初始化
setup() {
// ref方式聲明
const test = ref(["hh", "dd", "ff"]); // ref聲明數(shù)組
const test1 = ref('') // ref聲明空字符串
test1.value = "lalalalla"
// reactive方式聲明
const data = reactive({
test2: ["hh", "dd", "ff"],
test3: "",
});
data.test3 = data.test2[0];
/**
* toRef: 接收對(duì)象的具體屬性
* toRefs: 接收對(duì)象
*/
注意：
1. ref定義的數(shù)據(jù)，改變值時(shí)需要獲取value，例如上述代碼中修改test1的值：test1.value = "lalalalala"
2. reactive中則不需要通過(guò)value賦值
3: ref和reactive在使用之前都是需要import
4: 在組件中需要被html使用到的數(shù)據(jù)需要returun, 示例中的data如需要暴露出去可以采用 : return {...toRefs(data)} ,注意 toRefs也是需要import
生命周期不同
-
vue2
vue2生命周期.png -
vue3 可以使用vue2的所有生命周期，但推薦使用vue3特有的生命周期 需要注意的是，vue3生命周期都在setup中,周期函數(shù)也需要在import中導(dǎo)入
vue3生命周期與vue2對(duì)比.png
