//html
/*
<div id="app"><div>
*/
//js
var vm=new Vue();
setTimeout(function(){
vm.$data.a=12345;
},2000)
function vue(){
//初始化
this.$data={a:1};
this.el=document.getElementById('app');
this.virtualdom=""; //语法树
this.observe(this.$data)
this.render();
}
//数据监听
vue.prototype.observe=function(obj){
var self=this;
var value;
for(var key in obj){
value=obg[key];
if(typeof value==='object'){
//如果是对象,继续调用自身,对里面的对象进行数据劫持
this.observe(value)
}else{
//数据劫持
Object.defineProperty(this.$data,key,{
get:function(){
//Vue里面在get方法里进行依赖收集,收集对应的变量,在哪些地方用到了,此处省略
return value;
} ,
set:function(newValue){
使用 Object.defineProperty (vue2)和 Proxy(vue3)实现Vue双向数据绑定
最新推荐文章于 2022-10-24 15:23:06 发布