vue进阶响应式

vue响应式

组件data数据一旦变化，立即触发视图更新

实现的第一步数据驱动视图

核心API Object.defineProperty(vue 3.0 用proxy，因为defineProperty有缺陷)

Object.defineProrerty基本用法

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div>location</div>

var log = console.log.bind(console)

var data = {}

var name = 'yixiangqingyuan'

var a = '123'

Object.defineProperty(data, 'name', {

get: function () {

log('get')

return name

set: function (newVal) {

log('set', newVal, name)

name = newVal

}

})

log(data.name)

data.name = 'list'

log(data.name)

</script>

</body>

</html>

然后列 get 和set 里面 this对象指向

var obj = {__book:'三国演义'}

Object.defineProperty(obj,'book',{
    get: function(){
　　　　　　
        return '<<'+this.__book+'>>'
    },
    set: function(val){
　　　　　//this指向原对象，定义一个属性用来接收赋值
        this.__book = val
   }    
})

console.log(obj.book) ==> "<<三国演义>>"

obj.book = '水浒传'

console.log(obj.book) ==> "<<水浒传>>"

vue进阶响应式

Object.defineProrerty基本用法

然后列 get 和set 里面 this对象指向

推荐阅读