vue响应式
组件data数据一旦变化，立即触发视图更新
实现的第一步 数据驱动视图
//
核心API Object.defineProperty(vue 3.0 用proxy，因为defineProperty有缺陷)
Object.defineProrerty基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div>location</div>
<button id='btn'></button>
<script>
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>