methods一般用在事件绑定的方法中,每次函数调用,函数都要被重新运行一遍。
computed计算属性是基于依赖缓存的,计算属性只有当所依赖的条件发生改变时才会执行。
computed:
<body>
<div id = "app">
{{msg}}
<br>
{{msg}}
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data:{
num:1
},
computed:{
msg:function(){
alert("hello"); // 两次函数调用,弹出框只会弹出一次返回的数据也是完全相同的
return this.num+Math.random();
}
}
});
</script>
methods:
<body>
<div id = "app">
{{msg}}
<br>
{{msg}}
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data:{
num:1
},
methods:{
msg:function(){
alert("hello"); //弹出框弹出两次,返回的两个内容结果完全不同
return this.num+Math.random();
}
}
});
</script>
$watch监听属性值的变化
window.οnlοad=function(){
var vm=new Vue({
el:'#box',
data:{
a:{name:'strive',age:16},
b:2
}
});
vm.$watch('a',function(){
alert('a发生变化了');
vm.b=this.a.name;
}
,{deep:true});
//要对json数据类型的数据进行监听,要添加,{deep:true},对于数组不用添加
document.οnclick=function(){
vm.a.name='aaa'; //文档加载后点击任意一处,修改a的值。a的值改变后vm.$watch函数被触发。
};
};