Vue2.0实现原理

Vue2.0实现MVVM(双向数据绑定)的原理是通过Object.defineProperty来劫持各个属性的setter、getter属性,在数据变动时发布消息给订阅者,触发相应的监听。

Vue3.0实现原理

Vue3.0是基于Proxy和Reflect来做数据大劫持代理,可以原生支持到数组的响应式,不需要重写数组的原型,还可以直接支持新增和删除属性,比Vue2.0的Object.defineProperty更加的清晰明了。

Vue2.0和Vue3.0的差异

1. Object.defineProperty不具备监听数组和无法检测到对象属性的添加和删除,需要重新定义数组的原型来达到响应式,而Proxy和Reflect可以原生监听数组,并监听对象属性的添加和删除。
2. Vue2.0会在初始化实例时对属性执行getter/setter转化,所有属性必须在data对象上存在才能让Vue将它转换为响应式,并且深度监听需要一次性递归，对性能影响较大。而Vue3.0不需要一次性遍历data的属性,可以显著提高性能。
3. 由于Proxy是ES6新增的属性,有些浏览器不支持,只能兼容到IE11。

Vue组件通信

父子组件间的通信($emit,props)

子组件使用$emit绑定事件的方法传递值,在父组件中注册相应的事件获取传递的值.
父组件使用v-bind(:)绑定要传递的值,在子组件中的props属性中声明接受属性的类型和默认值

非父子组件间的通信(通过Bus集中式的事件中间件)

let bus = new Vue()
bus.$emit('pass',123) //触发组件A中的事件
bus.$on('pass',function(value){})  //在组件B创建的钩子中监听事件
bus.$off('pass')  //组件销毁前最好清楚事件监听

Vuex状态管理器,数据存储仓库

通过this.$store.state获取state里的数据
通过this.$store.commit('methodName'),并在mutations定义相应methodName的方法从而修改数据

三层嵌套组件传值( $attrs,$ listeners)

$attrs:中间层组件通过v-bind="$attrs"方式将他的父组件传到他的子组件props接收
$listeners:中间层组件v-on="$listeners"方式将子组件$emit绑定事件的方法传到父组件v-on接收

父子组件通信(ref, $parent,$ children)

子组件标签上设置属性ref,然后通过this.$refs获取到子组件对象,以此获取子组件的变量和调用方法。
$parent,$children不需要在标签上设置直接this.children获取到子组件对象,以此获取子组件的变量和调用方法,this.$parent获取到父组件对象,以此获取子组件的变量和调用方法。

多层嵌套组件传值(provide,inject)

以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

Vue