vue深入响应式原理及双向绑定原理

1. vue深入响应式原理

深入响应式原理：

1. 当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新
2. Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生
   改变的时候， 就会触发， 然后wather就会触发， 告诉视图（V）进行重新渲染

3. 数据必须放在data选项中才能进行响应式

4.数据模型–》 vm中 的data选项
状态管理
什么叫做状态？什么叫做状态管理？
我们使用一个数据去管理视图中的一个部分， 那么这条数据就叫做状态， 这种管理模式就叫做状态管理

底层原理：

核心使用的是es5的一个方法,这个方法不支持ie8以及以下

Object.defineProperty(obj,obj.attr,descriptor)

参数：

1.obj
要在其上定义属性的对象。
2.prop
要定义或修改的属性的名称。
3.descriptor
将被定义或修改的属性描述符。它是一个对象， 这个对象有哪些构成？

1. configurable： 决定了对象的key是否可删除
   

2.   enumerable： 决定了对象是否可遍历（枚举）
   

3. writeable: 决定了对象的key的value是否可修改
   

4. 存储器：
   

get函数 ----起了个名字getter 设置当前对象的key的初始值
set函数 ----起了个名字setter 修改当前对象的key的值

思考：

如果数据没有放在data中该怎么使它成为响应式
例：

vm.num = 1000 //非响应式的

解决：

将非响应式属性合并到响应式属性身上
例

Vue.set(vm.list,'num',1000)//使用set方法

Vue.set(vm.someObj,prop,value)
this.$set(vm.someObj,prop,value)

思考

将一个对象（key , value）合并另一个对象身上

解决

对象的合并： Object.assign(目标对象， 当前对象)

总结以上：

1. 什么是深入响应式原理？

深入响应式原理是利用了数据劫持和订阅发布的模式, 当数据模型发生改变的时候， 视图就会响应的进行更新， 那么深入响应式原理是利用es5的Object.defineProperty中个getter/setter来进行数据的劫持的
名称解释：
数据劫持： Object.defineProperty中的getter/setter ， 然后在执行watcher
订阅发布：事件（自定义事件）
订阅： 事件的声明 vm.$on发布：事件的触发vm.$emit

2. 非响应式情况

在vm模型的data外定义的属性， 就是非响应式属性， 非响应式属性， 属性值更新， 视图不会更新

3. 非响应式属性如何变成响应式属性

思维： 将非响应式属性合并到响应式属性身上
解决： 利用了Vue提供的 Vue.set/this.$set(vm.dataattr,prop,value)

4. Vue.set底层原生是什么？

Object.assign(目标对象，对象1， 对象2，对象3)

2. vue双向数据绑定原理

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

5.watch

1. 作用：
   用来监听数据的变换， 当数据模型 （data选项 M）发生改变时， watch就会触发
2. 使用
   两种用法：
   1. key的value值是一个函数 普通监听

new Vue({
     
watch: {
     
key(value,oldvalue){
     }
}
})

2. key的value值是一个对象  深入监听

new Vue({
     
watch: {
     
key： {
     
deep: true/false 深入监听,
handler(value,oldvalue){
     } // 监听的处理函数
}
}
})

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

例题：写好姓和名，全称自动显示

第一种方式，使用的watch监听

  <div id="app">
    <div>
      姓： <input type="text" v-model = "firstName">
    </div>
    <div>
      名： <input type="text" v-model = "lastName">
    </div>
    <div>
      全称; <input type="text" v-model = "fullName">
    </div>
  </div>
</body>
<script>
  new Vue({
     
    el: '#app',
    data: {
     
      firstName: '',
      lastName: '',
      fullName: ''
    },
    watch: {
     
      firstName(val){
     
        this.fullName = val + this.lastName
      },
      lastName(val){
     
        this.fullName = this.firstName + val
      },
      fullName(val){
     
        console.log( val )
        this.firstName = val.slice(0,1)
        this.lastName = val.slice(1)
      }
    }
  })

第二种方式，使用计算属性computed

  <div id="app">
      <div>
          姓： <input type="text" v-model = "firstName">
        </div>
        <div>
          名： <input type="text" v-model = "lastName">
        </div>
        <div>
          全称 <input type="text" v-model = "fullName">
        </div>
  </div>
</body>
<script>
  new Vue({
     
    el: '#app',
    data: {
     
      firstName: '',
      lastName: '',
    },
    computed: {
     
      fullName(){
     
        return this.firstName + this.lastName
      }
    }
  })
</script>