目录
1.html中引入我们自己写的myvue2.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的data属性值操作</title>
<script src="myvue2.js"></script>
</head>
<body>
<div id="app">
{
{message}}
</div>
<script>
const app=new MyVue({
el:'#app',
data:{
message:'hello'
}
})
</script>
</body>
</html>2.写自己的myvue2.js
class MyVue{
constructor(options){
var vm=this;
vm.$options=options||{};
vm.$data=vm.$options.data||{};
//对数据进行初始化，实现obsrv功能，给data做响应使处理及代理
this.initState(vm);
}
initState(vm){
//容错处理
var data=vm.$data;//data数据
if (!data||typeof data!=="object"){
//如果data为空或不是一个对象，就不初始化
} else{
this.initData(data);//初始化
}
}
initData(data){
//初始化,这里是递归
//终止条件
if (!data||typeof data!=="object"){
//如果data为空或不是一个对象，就不递归
//即只要是一个对象型的，就要递归
return;
}
let keys=Object.keys(data);//取出这个对象的键
keys.forEach((key)=>{
//加入get set方法
this.defineReactive(data,key,data[key]);
//加入代理属性
this.proxyData(key);
})
}
// data messgae 'hello'
defineReactive(data,key,val){
//val可能是一个对象
this.initData(val);
//加入get set方法
Object.defineProperty(data,key,{
configurable:true,//表示可删除
//writable:true 表示可以写入值
enumerable:true,//表示可以枚举 如for in
get(){
console.log("调用了get方法")
return val;
},
set(newval){
console.log("调用了set方法")
if (newval===val)
return;
val=newval;
}
})
}
proxyData(key){
Object.defineProperty(this,key,{
get(){
return this.$data[key];
},
set(newval){
this.$data[key]=newval;
}
})
}
}3.运行
