Vue数据响应式

getter和setter


getter 示例代码

```let obj1 = {  //以前写js函数调用

    姓:卢,

    名:亲情,

    姓名(){
        trturn this.姓+this.名
    },

    age:18

}

console.log('需求1:'+obj1.姓名()) //必须加括号调用 ```

```let obj2 ={
    姓:'卢',

    名:'小姐'

    get  姓名(){
           return  this.姓+this.名
    }
}

console.log('需求二'+obj2.姓名) //不加括号也能调用  只要函数明前加上括号  不要问为什么 getter就是这样用的```


图解

setter  获取内容  示例代码

let obj3 ={
    姓:"卢",

    名:"小妹",

    get 姓名(){
        reutrn this.姓+this.明
    },

    set 姓名(xx){
        this.姓 = xx.[0],

        this.名 = xx.slice(1) //或者this.名 == xx.substring(1) //只要能得到第一个数字以外的数就行
    },

    age:18
}

obj3.姓名 = '李小强'

console.log(`需求3:姓${obj3.姓},名 ${obj3.名}`)


Object.defineProperty

可以给对象添加属性value

给对象添加getter/setter

getter/setter用于对属性的读写进行监控

啥是代理(设计模式)

    对myData对象的属性读写,全权由另一个对象的vm负责

    那么vm就是myData的代理(类似房东租房)

    比如myData.n不用,偏要用vm.n来操作myData.n

vm=new Vue({data:myData})

    会让vm成为myData的代理(proxy)

    会对myData的所有属性进行监控

    为什么要监控,为了防止myData的属性变了,vm不知道

    vm知道了又如何?知道属性变了就可以调用render(data)呀

    UI = render(data)

代码链接附



你可能感兴趣的:(Vue数据响应式)