computed 实例
<script src="./js/vue.js"></script>
<body>
<div id="app">
<!-- 将计算属性渲染到视图层 -->
{{follName}}
</div>
<script>
//通过data数据的改变,改变结果
new Vue({
el:'#app',
data:{
familyname:'谢',
ming:'怜'
},
//计算属性写到computed里面,存在一种缓存机制
computed:{
//生成一个新的属性
follName:function(){//为什么不叫方法,还叫属性
//必须使用function关键字来操作,但是不是属性
return this.familyname+this.ming//必须有返回值,让属性接收
}
}
})
</script>
</body>
watch 实例
<script src="./js/vue.js"></script>
<body>
<div id="app">
<!-- 将计算属性渲染到视图层 -->
<input type="text" v-model='familyname'><br />
<input type="text" v-model='ming'><br />
{{follName}}<br />
</div>
<script>
//通过data数据的改变,改变结果
new Vue({
el:'#app',
data:{
familyname:'谢',
ming:'怜',
follName:'谢怜'
},
//watch:监听data数据属性,改变结果
watch:{
familyname:function(val){
//监听姓氏来改变结果
this.follName = val+this.ming;
},
ming:function(val){
//监听名字来改变结果
this.follName = this.familyname+val;
}
}
})
</script>
</body>
computed与watch的差异
1)computed 是计算一个新的属性,并将该属性挂载到 Vue 实例上,而 watch 是监听已经 存在且已挂载到 Vue 实例上的数据,所以用 watch 同样可以监听 computed 计算属性的变化。
(2)computed 本质是一个惰性求值的观察者,具有缓存性,只有当依赖变化后,第一次访问 computed 属性,才会计算新的值。而 watch 则是当数据发生变化便会调用执行函数。
(3)从使用场景上说,computed 适用一个数据被多个数据影响,而 watch 适用一个数据影 响多个数据。
computed与watch的区别
computed 是计算属性,依赖其他属性计算值,并且 computed 的值有缓存,只有当计算值变 化才会返回内容。 watch 监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。