关于vue.js:VUE3学习多方搬运学习一

6次阅读

共计 691 个字符，预计需要花费 2 分钟才能阅读完成。

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