一、什么是响应式呢?
如果一个物体能够对外界的刺激做出反应,那它就是响应式的。
二、什么是数据响应式呢?
就是当数据发生改变时,UI页面会做出响应。比如Vue中的data被改变时,页面中的就会做出响应。
const vm = new Vue({data:{n:0}})
我如果修改vm.n,那么UI中的n就会响应我。
三、Vue中如何实现数据响应式
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data
选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
3.1 get和set分别是什么呢?
get:是一个不加括号的函数(用的时候不加括号),用于获取一个值
set:通过计算属性可以设置其他的原始属性
当姓名等于新值的时候,相当于触发了set函数
我们可以通过get和set来修改对象属性从而实现数据响应。
四、Object.defineProperty是什么呢?
在你定义完对象之后,再想加一个getter和setter,那么就需要Object.defineProperty
。
除以上功能,Object.defineProperty
还有其他的功能...
4.1 代理
举例:租房的中介,他来代理房东跟我们交涉租房的事情,我们跟中介说的话,中介都会如实的告诉房东,中介就是房东的代理。
let data3 = proxy({data:{n:0}})
function proxy({data}
const {data} = option;
const obj = {}
Object.defineProperty(obj,'n',{
get(){
return data.n
},
set(value){
if(value<0)return
data.n = value
}
})
return obj //obj就是代理
}
4.2 监听
这段代码其实就是vm=new Vue({data:{myData}})
的原理。 vm就是myData的代理,对myData的所有属性进行监听,来确保vm不会漏掉页面中的数据改变。所以Vue
所做的操作就是,当我监听到你的数据改变时,那我给你一个回应=>去完成页面的渲染。
这种有来有回的响应操作,即数据响应式。
4.3 给数组添加元素
可以用set
来新增key
,更新UI,在Vue里面,可以通过篡改7个api来方便对数组进行增删,这7个api会 自动处理监听和代理
,并更新UI.
这7个api分别是:
push(),pop(),shift(),unshift(),splice(),sort(),reverse()
结论:数组新增key最好通过这7个api。