Vue响应式原理

一、深入响应式原理

1. 当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新。
2. Vue.js 采用数据劫持结合发布者订阅者模式的方式，通过Object.defineProperty()来劫持各个属性中的setter和getter，在数据发生变化的时候发布消息给订阅者，触发相应的监听回调。
3. 数据必须放在data选项中才能进行深入响应式。

核心是收集依赖，然后触发依赖

底层原理：核心使用的是es5的一个方法,这个方法不支持ie8以及以下
代码：

 Object.defineProperty(obj,obj.attr,descriptor)
      参数： 
        obj
          要在其上定义属性的对象。
        prop
          要定义或修改的属性的名称。
    

	descriptor
          将被定义或修改的属性描述符。它是一个对象， 这个对象有哪些构成？
            `configurable`： 决定了对象的key是否可删除
            `enumerable`： 决定了对象是否可遍历（枚举）
            `writeable`: 决定了对象的key的value是否可修改

            存储器： 
              get函数 ----起了个名字getter        设置当前对象的key的初始值
              set函数 ----起了个名字setter        修改当前对象的key的值
              
   代码：
   
   Vue.set(vm.list,'num',1000) 		
          console.log(vm) 
			 var obj = {
			    name:'Eric'
			  }
			  
			  Object.defineProperty(obj,'name',{
			    //存储器
			    get(){
			      //要求必须有返回值
			      return 'yami'
			    },
			    set(value){ //value就是修改后的对象的key的value
			      console.log('set')
				console.log(value);
				document.querySelector('#app').innerHTML = value
			}

二、双向数据绑定

1.效果
数据改 ， 视图更
视图改， 数据更
2. 实现
使用v-model实现
3. 缺点
v-model默认绑定value属性， 所以v-model只能在表单使用
4. 原理

1. 为什么数据能直接在视图显示
   v-model默认绑定了DOM对象的value属性， 当它初次绑定的时候，
   getter,watcher就会触发， watcher会通知Vue生成新的VDOM树，
   再通过render函数进行渲染,生成真实DOM
2. 为什么视图修改数据就会修改
   当视图修改时， 意味着DOM的value属性值发生改变，就会触发setter,watcher监听机制就会执行，watcher通知Vue生成新的VDOM树，再通过render函数进行渲染,生成真实DOM
   代码：

  <div id="app">
     <input type="text" v-model = "msg">
   </div>

 <script>
 	   new Vue({
 	    el: '#app',
 	    data: {
 	      msg: 'hello vue.js'
 	    }
 	  })
 </script>

三、watch

1. 作用：
   用来监听数据的变换， 当数据模型 （data选项 M）发生改变时， watch就会触发
2. 使用

两种用法：

  1. key的value值是一个函数
    new Vue({
      watch: {
        key(value,oldvalue){}          
      }
    })

  2. key的value值是一个对象
    ```javascript
      new Vue({
        watch: {
          key： {
            deep: true/false 深入监听,
            handler(value,oldvalue){}    // 监听的处理函数              
          }       
        }
      })

watch中的key指的就是data选项中key

代码：

<div id="app">
    {{ msg }}
  </div>
  <script>
  	new Vue({
    el: '#app',
    data: {
      msg: 'hello vue.js'
    },
    watch: {
      msg(){
        alert('数据改变了')
      }
    }
  })
  </script>