您的位置：首页 > Web前端 > Vue.js

vue.js中响应式原理和双向数据绑定原理

2019-04-22 19:20 591 查看

4000

vue.js中响应式原理和双向数据绑定原理

1.首先，我们来了解一下什么叫状态管理？

什么叫做状态？什么叫做状态管理？
我们使用一个数据去管理视图中的一个部分，那么这条数据就叫做状态，这种管理模式就叫做状态管理

2.然后我们再了解一下什么叫Object.defiendProperty。

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

prop
要定义或修改的属性的名称。对象中的属性

descriptor
将被定义或修改的属性描述符。它是一个对象， 这个对象有哪些构成？

configurable： 决定了对象的key是否可删除
enumerable： 决定了对象是否可遍历（枚举）
writeable: 决定了对象的key的value是否可修改

存储器：//主要内容
get函数 ----起了个名字getter 设置当前对象的key的初始值
set函数 ----起了个名字setter 修改当前对象的key的值

Object.defineProperty(obj,'name',{
//存储器
//get函数，getter
get(){
//要求必须有返回值
return '骏哥'
},
//set函数，setter
set(value){ //value就是修改后的对象的key的value
console.log('set')
console.log(value);
document.querySelector('#app').innerHTML = value
}

watcher监听

想要了解响应式原理那肯定避不开wather监听函数，因为vue的底层就是靠这个函数去监听然后实现数据驱动视图的

watch

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

. key的value值是一个函数 //一般用法

new Vue({
watch: {
key(value,oldvalue){}//可以传入参数，一个是新的值，一个是旧的值
}
})

. key的value值是一个对象 //比较深入的用法，深入监听表示会监听对象里每一个属性的变化

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

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

3.深入响应式原理：

当视图模型（VM）中的数据模型（M）发生改变时，视图（V）就会进行更新
Vue通过watcher将data中的属性全部使用Object.definePropery中的getter和setter,当属性值发生
改变的时候，就会触发，然后wather就会触发，告诉视图（V）进行重新渲染
数据必须放在data选项中才能进行深入响应式
底层原理：
核心使用的是es5的 Object.assign 方法,这个方法不支持ie8以及以下*

4.非响应式想变成响应式数据

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

解决非响应式想要变成响应式的数据
Vue.set(vm.someObj,prop,value)
//someObject就是data中的key；prop是这个key代表的对象里的的某个属性，value是属性值

this.$set(vm.someObj,prop,value)
//同上

总结

什么是深入响应式原理？
深入响应式原理是利用了数据劫持和订阅发布的模式, 当数据模型发生改变的时候，视图就会响应的进行更新，那么深入响应式原理是利用es5的Object.defineProperty中个getter/setter来进行数据的劫持的

什么叫数据劫持？
数据劫持： Object.defineProperty中的getter/setter ，数据改变就执行watcher

订阅发布：事件（自定义事件）
订阅：事件的声明 vm.on发布：事件的触发vm.on 发布：事件的触发 vm.on发布：事件的触发vm.emit

非响应式情况
在vm模型的data外定义的属性，就是非响应式属性，非响应式属性，属性值更新，视图不会更新
非响应式属性如何变成响应式属性
思维：将非响应式属性合并到响应式属性身上
解决：利用了Vue提供的 Vue.set/this.$set(vm.dataattr,prop,value)
Vue.set底层原生是什么？//合并对象。jquery中的$.extend也可以合并对象
Object.assign(目标对象，对象1，对象2，对象3)

vue双向数据绑定原理

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

watcher，computed和methods的区别

1.methods: 一般用于实际事件

2.computed:

有逻辑 2. 要像变量一样使用，这个时候选computed

3.watch:

有异步操作 2. 开销较大

:key

vue.js中的v-for是惰性的，如果不给他加上唯一属性key的话，下一个与他类似的标签会继承上一个的属性，导致不必要的麻烦;
下面是一个案例，先把：key="item.id"注释掉，如果删除上一个li，下一个li会继承上一个的属性

<body>
<div id="app">
<ul>
<li v-for = " (item,index) in list " :key = "item.id">
<p> {{item.name}} </p>
<button @click = "remove(index)"> 删除                            </button>
<button @click = "changeStyle"> 修改样式                        </button>
</li>
</ul>
</div>
</body>

new Vue({
el: '#app',
data: {
list: [
{
id: 1,
name: 'zhangjun'
},
{
id: 2,
name: 'yanyabing'
}
]
},
methods: {
remove(index){
this.list.splice(index,1)
},
changeStyle(e){
e.target.parentNode.style.background = 'red' //我是为了给你举例， 这种写法以后不要出现
}
}
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航