VUE3学习【多方搬运/学习】(一)

• vue2 和 vue3 的区别

  vue2 数据定义在 data,方法定义在 methods，操作一个数据往往会影响到 data, methods, computed, watch由此带来了大量的逻辑耦合，因此 vue2 给出了解决方案那就是 Mixin，但是 Mixin 经常导致命名冲突等各种问题，所以 Vue3 推出了 Composition API 用以解决以上痛点。

• setup

  vue3新增了一个属性选项 -> setup，该选项是 Composition API 在组件内的入口，在组件创建的时候会先于 beforeCreate 执行，接收两个参数 setup(props, context)。

  • props
    props 是响应式的，也正因为是响应式的，因此不能使用结构的方式去获取其中的数据，否则响应式会失效，错误示范如下：

    export default defineComponent({
      setup(props, contxt){
        let { name } = props
        console.log(name)  //此时获取到的name值已经无法响应组件中的 name 值的变化了 
      }
    })

  • context
    在 setup 中我们是访问不到 vue2 里那种能拿到组件数据的 this 对象的，因此 context 提供了 this 对象最常用的三个属性 attr, slot, emit 分别对应 vue2 中的 $attr(属性), $slot(插槽), $emit(发射事件)，这几个属性都是自动同步最新的值，因此我们拿到的数据也是最新的。

• 关于reactive、ref 和 toRefs

  在 vue2 中我们定义数据是在组件的 data 中，在 vue3 中我们可以使用 reactive, ref 来定义数据使用。

---

指路大佬文章