vue知识-优快云博客

vue组件间传值的方式

常见使用场景可以分为三类：
1、父子通信：父向子传递数据是通过 props，子向父是通过 events（ $emit）；通过父链 / 子链也可以通信（$parent / $children）；ref 也可以访问组件实例；provide / inject； $attrs / $listeners。
2、兄弟通信： Bus；Vuex。
3、跨级通信： Bus；Vuex；provide / inject；$attrs / $listeners。

vue2与vue3的区别

响应式方案不同

vue2 的双向数据绑定是利⽤ES5 的⼀个 API ，Object.defineProperty()对数据进⾏劫持。
vue3 中使⽤了 ES6 的 ProxyAPI 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从而实现对数据的监控。

获取prop的方式不同

vue2在script代码块可以直接获取props，vue3通过setup指令传递。

vue2：console.log(‘props’,this.xxx)
vue3：setup(props,context){
   
    console.log(‘props’,props) }

数据和方法的定义不同

Vue2使⽤的是选项类型API（Options API），Vue3使⽤的是合成型API（Composition API）。
vue2:

data() {
   
    return {
   
   }; }