使用原生js来实现深入响应式原理

• html代码

<button> 点击 </button>
<div class="box">

• js代码

var data = {
    name: ''
}

var box = document.querySelector('.box')
var btn = document.querySelector('button')

btn.onclick = function () {
    data.name = "zhangsan"
}

// Object.defineProperty(obj,对象的某一个属性)
// Object.defineProperty( data, 'name',options)
Object.defineProperty( data, 'name',{
    get () { //给对象提供 getter
        return 'lisi' //给对象赋初始值   赋值一次
    },
    set ( val ) { // 给对象提供  setter
        // val 
        console.log('val', val )
        box.innerHTML = val
    }
})

box.innerHTML = data.name