双向绑定的原理？数据劫持？
mvvm双向绑定，采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
几个要点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者
具体步骤：
- 需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化 - compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
- Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
- 在自身实例化时往属性订阅器(dep)里面添加自己
- 自身必须有一个update()方法
- 待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
- 作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化->视图更新；视图交互变化(input) ->数据model变更的双向绑定效果。
虚拟DOM原理
虚拟DOM，其实就是用对象的方式取代真实的DOM操作，把真实的DOM操作放在内存当中，在内存中的对象里做模拟操作。当页面打开时浏览器会解析HTML元素，构建一颗DOM树，将状态全部保存起来，在内存当中模拟我们真实的DOM操作，操作完后又会生成一颗dom树，两颗DOM树进行比较，根据diff算法比较两颗DOM树不同的地方，只渲染一次不同的地方。
diff算法
diff算法，可以帮助我们在页面蔌渲染的时候，计算出Virtual DOM真正变化的部分，并只针对该部分进行的原生DOM操作，而不是渲染整个页面，从而保证了每次操作后，页面的高效渲染。
Diff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。
Diff算法有三大策略：
- Tree Diff
- Component Diff
- Element Diff
三种策略的执行顺序也是顺序依次执行。
Tree Diff 是对树每一层进行遍历，找出不同
Component Diff 是数据层面的差异比较
Element Diff真实DOM渲染，结构差异的比较
vue组建通信
牢记vue是单向数据流
组件通信：
①props / $emit
父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。
②$children / $parent
this.$children[0].msg = "hello world" //父组件修改子组件data中的数据
this.$parent.mag //子组件拿到父组件data中的数据
$children的值是数组，$parent的值是个对象
注意：$parent，$children它们的目的是作为访问数组的应急方法，更推荐用props和events实现父子组件通信。
③provide / inject
这是vue2.2.0新增的api，简单来说就是父组件中通过provide来提供变量，然后再子组件中通过inject来注入变量。
//父组件
export default{
name:"A",
provide:{
for:"demo"
},
components:{
comB
}
}
//子组件
export default{
name:"B",
inject:["for"],
data(){
demo:this.for
}
}复制代码
④ref / refs
ref：如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例，可通过实例直接调用组件的方法或访问数据。
//父组件
<template>
<component-a ref="comA"></component-a>
</template>
<script>
export default{
mounted(){
const comA = this.$refs.comA;
console.log(comA.name)//Vue.js
comA.sayHello() //hello
}
}
</script>
//子组件
export default{
data(){
return {
name:"Vue.js"
}
},
methods:{
sayHello(){
console.log("hello")
}
}
}
⑤eventBus(Bus总线)：
//首先在src中创建一个Bus文件夹 => index.js
import Vue from "vue";
export default new Vue({
})
//子组件1(发送数据的组件)
<button @click="add()">点击</button>
import Bus from "@/Bus"
add(){
Bus.$emit("add",this.content);
}
//子组件2(接受数据的组件)
<p>{{tit}}</p>
import Bus from "@/Bus";
created(){
Bus.$on("add",(data) => {
this.tit = data;
})
}
⑥Vuex；
⑦LocalStorage；
⑧$attrs / $listeners
将数据挂在到子组件的标签上去后，在子组件中使用this.$attrs直接获取到所有挂载的数据，返回的是一个对象。