vue监听对象包含多个属性是否有变化（Vue计算属性和监听器）

计算属性（computed）

date属性和computed属性定义的值都可以直接绑定在表达式中    
    
    
，如果某些值需要通过计算才能得到  


     


     


     ，那使用计算属性就再合适不过了

如果页面中需要显示的值是两个表达式计算才能得到


 




 




 



，并且还有一些比较复杂的逻辑关系   

   

   

，我们写在页面上就不太合适了

如果我们直接在页面上是这样的： <template> <div id="app"> <p>{{ firstName + lastName }}</p> </div> </template> <script> export default { data() { return{ firstName:"小", lastName:"曹" } } } </script> <style> </style>

如果使用计算属性来实现的话

直接在computed中写函数即可   

     

     

    ，然后在表达式中写computed中定义的函数名即可

<template> <div id="app"> <p>{{ name }}</p> </div> </template> <script> export default { data() { return{ firstName:"小", lastName:"曹" } }, computed: { name() { return this.firstName+this.lastName } } } </script> <style> </style>

最后都能实现如下效果：

以上示例都还不是太清楚



  




  




  


，我们再举一个例子

购物清单

总价=单价 * 数量 * 打折

计算属性会将所给值的变化  


  


  


，自动地给出计算结果 <template> <div id="app"> <h1>计算属性和监听器</h1> <p>单价：{{price}}</p> <p>折扣：{{discount}}</p> <p>数量： <button @click="sub">-</button> {{quantity}} <button @click="add">+</button> </p> <p>总价：{{totalPrice}}</p> </div> </template> <script> export default { data() { return{ price:20, quantity:0, discount:0.5 } }, computed: { totalPrice() { return this.price * this.quantity * this.discount } }, methods: { add() { this.quantity++ }, sub() { if(this.quantity>0) this.quantity-- } } } </script> <style> </style> 侦听器（监听一个属性的变化）

格式：

quntity(val)就等于监听的quntity这个变量    
     
     
   ，val是监听到的变化后的值 watch: { quantity(val) { this.totalPrice = this.price * val * this.discount } },

我们把刚才的计数器改成使用侦听器来实现

<template> <div id="app"> <h1>计算属性和监听器</h1> <p>单价：{{price}}</p> <p>折扣：{{discount}}</p> <p>数量： <button @click="sub">-</button> {{quantity}} <button @click="add">+</button> </p> <p>总价：{{totalPrice}}</p> </div> </template> <script> export default { data() { return{ price:20, quantity:0, discount:0.5, totalPrice:0 } }, watch: { quantity(val) { this.totalPrice = this.price * val * this.discount } }, methods: { add() { this.quantity++ }, sub() { if(this.quantity>0) this.quantity-- } } } </script> <style> </style>

以上的例子




   




   




   

，侦听器也能做 



 



 



，计算属性也能做                 ，那我们什么时候应该用哪个？

计算属性与侦听器的对比

一个值的改变




    




    




    
，会影响多个值（或处理多件事）















，使用侦听器（性能消耗更高） 
    
    
    
。

监测路由的时候只能使用监听器来实现

(为了观察一个值)多个值的改变                ，为了得到一个结果 



     



     



     ，使用计算属性
     


     


     


。(为了得到一个值)

实际开发中
















，大部分问题都可以用computed解决 




 




 




 。