浅析Vue的数据响应式

如何理解响应式

当一个物体对外界的改变做出相应的反应，就可以理解为响应式，如响应式网页，当你改变窗口大小，页面也随之变化。

Vue的数据响应式

在Vue项目中，当你对数据做出更新时，视图也会做出相应的改变。

例如：

const vm =new Vue({
    el:'#App',
    data:{
        name:'lucy'
    }
})

如果执行vm.name='pake',页面对应的显示就会由lucy，变为pake

还有一种特殊情况，当data对象{优先使用函数}为空时，Vue会提示警告

new Vue({
    el:'#App',
    data:{},
    template:`<div>{{n}}</div>`
})

Vue中的grtter&setter

let obj_p={
    姓：'张',
    名:'天爱'，
    get 姓名(){
        return `我的名字是${this.姓}${this.名}`
    },
    set 姓名(arr){
        this.姓=arr[0]
        this.名=arrslice(1)
    }
}

obj_p.姓名 //'张天爱'

obj_p.姓名='刘诗诗'
obj_p.姓名 //'刘诗诗'

在上述代码示例中，'姓名'属性实际是不存在的（可以将它看作虚拟对象），是计算出来的属性

obj_p.姓名 -->获取get 姓名方法的返回值

obj_p.姓名='xxx'调用obj_p.set姓名('xxx')

Object.defineProperty

let obj = {}
Object.defineProperty(obj,'n',{value:1})//添加属性n
Obiect.defineProperty(obj,'m',{
    get(){...},
    set(value){...}
})