vue修改计算属性的值_Vue语法高级之计算属性和侦听器

计算属性和侦听器都可以监听到data区数据的变化，当数据变化时可以触发方法的调用，从而在方法内部可以进行相应的逻辑处理。

计算属性的语法格式是：computed: {}

侦听器的语法格式是：watch: {}

一、计算属性

计算属性一般是为了简化模板中的内容，让模板中内容尽可能简洁。如果我们将太多的逻辑写在模板中，模板将会变得难以维护。

下面举一反例，我们将字符串逆序的逻辑写在模板中。

<div id="app">  <div id="example">    {{ message.split('').reverse().join('') }}  div>div><script>  let vm = new Vue({    el: '#app',    data: {      message: 'Hello World'    }  })script>

如果我们将字符串逆序的逻辑抽取到计算属性中，模板会更清晰，改造如下：

<div id="app">  <div id="example">    {{ resMsg }}  div>div><script>  let vm = new Vue({    el: '#app',    data: {      message: 'Hello World'    },    computed: {      resMsg() {        return this.message.split('').reverse().join('')      }    }  })script>

我们在computed中声明了一个计算属性resMsg，通过这个属性来接收变量message逆序之后的值。

火眼金睛的你应该发现了resMsg更像一个方法，而不像一个属性。这是因为计算属性的简写方式导致，不是它的原始样子，原始样子如下：

computed: {  resMsg: {    get() {      return this.message.split('').reverse().join('')    }  } }

计算属性默认只有get方法，当只有get方法时，就可以进行简写。

当然，如果有需要，我们可以为计算属性提供它的set方法，set方法在计算属性的值被修改时自动调用。这个特性一般在前后端交互时，数据格式不一致时会用到。比如时间、金钱等等在前后端的格式就通常不一样。

我们以钱为例来说明一下set方法的应用场景。

通常情况下，后端为了避开浮点数存储不精确的问题，会以分为单位进行整数存储。然而，前端在展示的时候，通常是以元为单位，这时两个单位就不一致，它们相差100倍。

现在前端通过接口调用，拿到的钱是100分，赋值给cents变量，该值要转化成元在页面上展示，我们就可以声明一个yuan的计算属性去实现。当计算属性yuan被修改时，对应的分又要赋值到cents变量上，这时候set方法就派上用场了，代码如下

<div id="app">  分：{{cents}}  <hr>  元：{{yuan}}  <hr>  改变元：<input type="text" v-model="yuan">div><script>  let vm = new Vue({    el: '#app',    data: {      cents: 100    },    computed: {      yuan: {        get: function () {          return this.cents / 100;        },        set: function (newVal) {          this.cents = newVal * 100        }      }    }  })script>

我们就通过set方法自动被调用的特性，在方法内部，将元转变成分，并赋值给cents变量。

通常情况下，我们只会用到get方法，所以简写形式居多，但不要把它当做方法。它跟方法是不一样的，方法的每次调用，方法内部逻辑都会执行一遍。计算属性却不会，它具备基于依赖的缓存能力。下面例子来证实这个现象。

<div id="app">  <div>{{reverseMsg}}div>  <div>{{reverseMsg}}div>  <hr>  <div>{{reverseStr(msg)}}div>  <div>{{reverseStr(msg)}}div>div><script>  let vm = new Vue({    el: '#app',    data: {      msg: 'Hello'    },    computed: {      reverseMsg() {        console.log('computed')        return this.msg.split('').reverse().join('')      }    },    methods: {      reverseStr() {        console.log('method')        return this.msg.split('').reverse().join('')      }    }  })script>

上面代码中，计算属性在模板中使用了两次，方法调用也使用了两次，我们查看打印发现

方法中的打印语句执行了两次，而计算属性中的打印语句却只执行了一次。这就验证了，计算属性的简写形式虽然长得跟方法一模一样，但它确实不是方法。

二、侦听器

侦听器也可以监听到data中的数据变化，当data中某个变量的数据发生变化时，对应的侦听器方法就会被执行，侦听器的方法名必须跟被侦听的变量名一样。

<div id="app">  <label> 名：    <input type="text" v-model="firstName">  label>  <br>  <label> 姓：    <input type="text" v-model="lastName">  label>  <br>  {{fullName}}div><script>  let vm = new Vue({    el: '#app',    data: {      firstName: 'Jim',      lastName: 'Green',      fullName: 'Jim Green'    },    watch: {      firstName(val) {        console.log('firstName has changed')        this.fullName = val + ' ' + this.lastName      },      lastName(val) {        console.log('lastName has changed')        this.fullName = this.firstName + ' ' + val      }    }  })script>

firstName(val)就是监听firstName变化时被调用的函数，lastName(val)就是监听lastName变化时被调用的函数。运行页面如下：