Object.defineProperty 有 get 和 set 方法
set 方法允许在对象外直接添加一个属性而不需要到本体对象里添加
而且可以在 set 方法里添加条件判断和自定义事件
使用vue的数据响应式时，vue会使用set方法在外部添加数据，数据添加完成后，通知页面渲染此数据，就完成了数据的响应
const div = document.querySelector('.test')
function p1(x){// p1 其实只执行了一次，下面这行打印也只执行一次
console.log(x) // {n:200}
let value = x.n //记录原始的值为value，这一行纯属为了在初始化后，在未set值的时候，能直接使用x.n的值
Object.defineProperty(x,'n',{ //
get(){
return value
},
set(newVal){
if(newVal<0){
value = newVal
div.innerHTML = data5.n // 数据更新后通知视图更新新数据，实现数据响应
}else(console.log('赋值不能小于0'))
},
})
return x
}
let data5 = {n:200}
let data = p1(data5)
data.n = -122 //成功
data.n = 1 //'赋值不能小于0'
data5.n = 1000 //篡改失败，无论是修改data.n还data5.n 都要通过set 的条件判断，不能绕过 set 的判断篡改数据
setInterval(() => {
data.n = -Math.floor(Math.random()*(1000-50))-50
console.log( data.n )
}, 550);