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

最新推荐文章于 2024-07-28 20:26:55 发布

qq_39142654

最新推荐文章于 2024-07-28 20:26:55 发布

阅读量1.1k

点赞数 4

本文链接：https://blog.csdn.net/qq_39142654/article/details/89407955

版权

1. vue深入响应式原理

深入响应式原理：

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

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

底层原理：

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

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

参数：

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

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

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

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

```
存储器：
```

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. $o n 发布：事件的触发 v m .$ emit

2. 非响应式情况

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

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

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

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

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

2. vue双向数据绑定原理

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

5.watch

作用：
用来监听数据的变换，当数据模型（data选项 M）发生改变时， watch就会触发
使用
两种用法：
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>