Vue的响应式原理和双向绑定原理

Vue的响应式原理

我们先创建一个vue实例，data会被传入到一个observer对象里面，这个观察者的核心就是做了一个object.defineProperty，将我们data中的所有数据都用object.defineProperty 做一个监听，监听他的set ，get。比如在data中传入两个数据,一个name:‘why’,一个age:18，那么他在Observer这个对象里面就要对这两个属性进行劫持，这时所做的事情就是一个属性创建一个Dep对象；在Observe中主要做的就是给我们每个属性创建了Dep对象。
分析解析这一部分，我们从vue实例中将el模板传入到Compile中，解析el模板中的指令,他就根据我们类似于mustache语法,比如说我们用了{{name}},{{name}},{{age}},{{age}}，那这样的话，他在解析el的时候，使用了一个{{name}}就创建一个Watcher，创建完Watcher之后，这个Watcher又被加入到name->Dep->subs->[watcher]中去；那么你不觉得它在解析的时候就将我们对应的属性，创建出来对应的Watcher并且添加到对应的Dep的subs中。
Compile除了创建出来对应的Watcher还给它初始化我们的一个View,即界面让其现显示的东西，这是界面上就显示的是why why 18 18 ；
现在我们将实例中的name：‘why’ 改成 name：‘kobe’，此时在Observer对data中的数据进行了一个监听，那就意味着它立马就能监听到name属性发生了变化，就调用一个Dep中的叫做notify函数，遍历我们subs里面的所有属性，对我们的所有的watcher进行一个遍历，调用watcher中的updata方法，而update中的方法就是将我们的界面上的View中之前的 why why 18 18 变成 kobe kobe 18 18

主要解决两个问题

• app.message修改数据，Vue内部是如何监听message数据的改变的；
  ——Object.defineProperty ->监听对象属性的改变
• 当数据发送改变，Vue是如何知道要通知哪些人，界面发生刷新
  ——发布订阅者模式

Vue的双向绑定原理

双向数据绑定通常是指我们使用的v-model指令的实现，是Vue的一个特性，也可以说是一个input事件和value的语法糖。 Vue通过v-model指令为组件添加上input事件处理和value属性的赋值。

<template>
   <input v-model='localValue'/>
</template>

上面的组件就相当于下面的代码

<template>
   <!-- 这里添加了input时间的监听和value的属性绑定 -->
   <input @input='onInput' :value='localValue' />
   <span>{{localValue}}</span>
</template>
<script>
  export default{
    data(){
      return {
        localValue:'',
      }
    },
    methods:{
      onInput(v){
         //在input事件的处理函数中更新value的绑定值
         this.localValue=v.target.value;
         console.log(this.localValue)
      }
    }
  }
</script>

因此当我们修改input输入框中的值时，我们通过v-model绑定的值也会同步修改，基于上述原理，我们可以很容易的实现一个数据双向绑定的组件。

区分响应式和双向绑定

• 响应式一般指：数据改变驱动视图改变，是单向的
• 双向绑定：是双向的，视图反过来也可以改变数据。也就是说响应式是双向绑定的一环