Vue计算属性和监听器

  • Vue计算属性和监听器已关闭评论
  • 38 次浏览
  • A+
所属分类:Web前端
摘要

date属性和computed属性定义的值都可以直接绑定在表达式中,如果某些值需要通过计算才能得到,那使用计算属性就再合适不过了


计算属性(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> 

最后都能实现如下效果:
Vue计算属性和监听器

以上示例都还不是太清楚,我们再举一个例子

购物清单
总价=单价 * 数量 * 打折
计算属性会将所给值的变化,自动地给出计算结果

<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>  

Vue计算属性和监听器

侦听器(监听一个属性的变化)

格式:
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解决。