Object.defineProperty,这个和wpf框架中的属性极其相似,我们可以在model中将变量注册为属性,并且添加command与数据绑定,如果属性的值变化,则会触发相关事件的执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.min.js"></script>
<script>
function update(){
alert(obj.name);
console.log("更新");
}
var obj = {name:"york1"};
var i = 1;
function observer(obj){
if (typeof obj !=='object'){return obj;}
for (var key in obj) {
defineReactive(obj,key,obj[key]);
}
}
function defineReactive(obj,key,value){
Object.defineProperty(obj,key,{
get:function(){ return value;},
set:function(val){ if (val !=value) {update();}value = val;}
}
);
}
observer(obj);
obj.name = "york2";
</script>
</head>
<body>
<div id="demo">
<h4>{{msg}}</h4>
<button @click="change()"></button>
</div>
<script>
var vm = new Vue({
el: "#demo",
data:{
msg:'中国'
},
methods:{
change(){
i=i+1;
obj.name="改变了"+i;
}
}
}
)
</script>
</body>
</html>