底层的原理是实用数据代理，利用js的defineProperty函数，测试DEMO为了理解用，仅支持了一级对象。控制台重写调试：data.name='xxxx',不可以直接重新赋值整个对象，比如data={name:'xxx',age:'xxx'}
实现思路：
1、先创建一个原始对象data;
2、创建一个监听对象Observer,监听data属性变化;
3、通过Object.keys把data里的所有元素,生成为数组;
4、遍历数组,生成数据代理obs,obs=data数据同步;
5、创建实例对象vm,vm._data = data =obs;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.js底层数据代理实现原理代码</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script> -->
</head>
<body>
<div id="demo">
</div>
<script>
// Vue.config.productionTip=false;
let data = {
name:'任慈',
age:3,
}
function Observer(obj){
//汇总对象中所有的属性形成一个数组
const keys = Object.keys(obj);
//箭头函数中的this，代表的上级，如果用普通函数，在循环体外上方定义一个that = this即可
keys.forEach((k)=>{
Object.defineProperty(this,k,{
get(){
return obj[k];
},
set(value){
console.log(k+'被修改了，这里执行去修改模版的代码,生成虚拟DOM...');
obj[k] = value;
}
})
})
}
//创建一个监听对象监听data属性变化
const obs = new Observer(data);
console.log(obs);
//创建一个vm实例对象
let vm = {}
vm._data = data = obs;
</script>
</body>
</html>
发表评论 取消回复