深入浅析Vue中的 computed 和 watch

computed

计算属性：通过属性计算得来的属性

    计算属性,是在相关联的属性发生变化才计算，计算过一次，如果相关属性没有变化，下一次就不需要计算了，直接去缓存的值

a:<input type="number" v-model.number="a" />
b:<input type="number" v-model.number="b" />
<!--c:<input type="number" v-model.number="c" />-->
总和：{{sum()}}
总和：{{count}}
平均值：{{avg}}
<p v-once>单价：{{price}}</p>
<p>数量：<input type="number" v-model.number="count"/></p>
<p>总价：{{sum}}</p>
<p>运费：{{free}}</p>
<p>应付：{{pay}}</p>
data: {
a: '',
b:'',
c:'',
price: 28.8,
count: '',
free: 10
},
computed: {
count(){
console.log('计算属性触发了');
return this.a+this.b;
},
avg(){
return this.count/2;
},
sum(){
return this.price * this.count;
},
pay(){
if(this.count>0){
if(this.sum>=299){
return this.sum;
}else{
return this.sum + this.free;
}
}else{
return 0;
}
}
}

watch

属性变化，就会触发监听的函数。

监听属性变化，一般是用于跟数据无关的业务逻辑操作。

计算属性，适用于属性发生变化后，需要计算得到新的数据。        

<div id="app">
a: <input type="number" v-model.number="a" /><br />
b: <input type="number" v-model.number="b" /><br />
总和：{{count}}
<br /><br /><br />
name: <input type="text" v-model="obj.name" /><br />
age: <input type="text" v-model.number="obj.age" /><br />
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
count: '',
obj: {
name: '',
age: ''
}
},
watch: {
a(newVal, oldVal){
console.log('触发了a-watch');
this.count = this.a + this.b;
},
b(newVal){
console.log('触发了b-watch');
this.count = this.a + this.b;
},
//          obj(newVal, oldVal){
//            console.log('触发了obj的监听');
//          }
//
obj: {
//监听对象中的每一个值
handler(newVal, oldVal){
console.log('触发了obj的监听');
},
deep: true//深度监听
},
//监听对象中的某个属性
'obj.name': function(){
console.log('触发了obj.name的监听');
}
}
})
</script>

watch 也可以在methods里面进行监听配置

<div id="app">
a: <input type="number" v-model.number="a" /><br />
b: <input type="number" v-model.number="b" /><br />
总和：{{count}}
<br /><br /><br />
name: <input type="text" v-model="obj.name" /><br />
age: <input type="text" v-model.number="obj.age" /><br />
<button @click="btnAction()">开始监听</button>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
count: '',
obj: {
name: '',
age: ''
}
},
methods: {
btnAction(){
this.$watch('a', (newVal, oldval)=>{
console.log('监听到了a的变化');
console.log(newVal, oldval);
})
this.$watch('obj.name', (newVal, oldval)=>{
console.log('监听到了obj.name的变化');
console.log(newVal, oldval);
})
this.$watch('obj', (newVal, oldval)=>{
console.log('监听到了obj的变化');
console.log(newVal, oldval);
}, {
deep: true
})
}
}
})
//      vm.$watch('a', (newVal, oldval)=>{
//        console.log('监听到了a的变化');
//        console.log(newVal, oldval);
//      })
//
//      vm.$watch('obj.name', (newVal, oldval)=>{
//        console.log('监听到了obj.name的变化');
//        console.log(newVal, oldval);
//      })
//
//      vm.$watch('obj', (newVal, oldval)=>{
//        console.log('监听到了obj的变化');
//        console.log(newVal, oldval);
//      }, {
//        deep: true
//      })
</script>

下面在看下computed 和 watch

  都可以观察页面的数据变化。当处理页面的数据变化时，我们有时候很容易滥用watch。 而通常更好的办法是使用computed属性，而不是命令是的watch回调。

/*html:
我们要实现 第三个表单的值 是第一个和第二个的拼接，并且在前俩表单数值变化时，第三个表单数值也在变化
*/
<div id="myDiv">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<input type="text" v-model="fullName">
</div>
<!--js: 用watch方法来实现-->
//将需要watch的属性定义在watch中，当属性变化氏就会动态的执行watch中的操作，并动态的可以更新到dom中
new Vue({
el: '#myDiv',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
<!--js: 利用computed 来写-->
//计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
//这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
new Vue({
el:"#myDiv",
data:{
firstName:"Den",
lastName:"wang",
},
computed:{
fullName:function(){
return this.firstName + " " +this.lastName;
}
}
})

  很容易看出 computed 在实现上边的效果时，是更简单的。

总结

以上所述是小编给大家介绍的Vue中的 computed 和 watch，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

• vue中计算属性（computed）、methods和watched之间的区别
• 详解vue中computed 和 watch的异同
• Vue.js计算属性computed与watch（5）
• Vue.js每天必学之计算属性computed与$watch
• Vue的watch和computed方法的使用及区别介绍