vue3学习总结

数据初始化不同

• vue2: 数据一般放在data函数中

data() {
  return {
    test: ''
  }
}

---

• vue3: 新增setup函数，在setup中采用ref、reactive初始化

setup() {
    // ref方式声明
    const test = ref(["hh", "dd", "ff"]); // ref声明数组
    const test1 = ref('') // ref声明空字符串
    test1.value = "lalalalla"
    // reactive方式声明
    const data = reactive({
      test2: ["hh", "dd", "ff"],
      test3: "",
    });
    data.test3 = data.test2[0];
     /**
     * toRef: 接收对象的具体属性
     * toRefs: 接收对象
     */

注意：

1. ref定义的数据，改变值时需要获取value，例如上述代码中修改test1的值：test1.value = "lalalalala"
2. reactive中则不需要通过value赋值
3: ref和reactive在使用之前都是需要import
4: 在组件中需要被html使用到的数据需要returun, 示例中的data如需要暴露出去可以采用 : return {...toRefs(data)} ,注意 toRefs也是需要import

---

生命周期不同

• vue2

  
  
  vue2生命周期.png

• vue3 可以使用vue2的所有生命周期，但推荐使用vue3特有的生命周期 需要注意的是，vue3生命周期都在setup中,周期函数也需要在import中导入

  
  
  vue3生命周期与vue2对比.png