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 来定义数据使用。


指路大佬文章

你可能感兴趣的:(vue.jsvue3)