乐趣区

关于vue.js: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 来定义数据应用。


指路大佬文章

退出移动版