一、前言

模板内的表达式常用于简单的运算，当其过长或者逻辑过于复杂时会难以维护。本文的计算属性就用于解决该问题。

二、计算属性

首先通过一个例子来了解什么事计算属性，示例如下，
不适用计算属性

<template>
  <div class="hello" >
    <h1>{{msg}}转为{{msg+''+'World'}}</h1> 

  </div>
</template>

<script>

export default {
  data(){

    return {
      msg : 'Hello'
    }
  }


}
</script>

运行结果，

image.png

使用计算属性，

<template>
  <div class="hello" >
    <h1>{{newMsg}}</h1> 

  </div>
</template>

<script>

export default {
  data(){

    return {
      msg : 'Hello'
    }
  },
  computed:{
    newMsg (){
     return  this.msg+'转为'+this.msg+''+'World1';

    }

  }


}
</script>

运行结果

image.png

可以看到上面的运行结果是一样的，但是使用计算属性之后就可以分离逻辑代码,是代码的维护性更强。

1.计算属性和函数

上述例子中，可以看到计算函数其实是一个函数，如果我们放在methods中，那么

<template>
  <div class="hello" >
    <h1>{{newMsg()}}</h1> 

  </div>
</template>

<script>

export default {
  data(){

    return {
      msg : 'Hello'
    }
  },
  methods:{
      newMsg (){
     return  this.msg+'转为'+this.msg+''+'World';

    } 

  }


}
</script>

运行结果如下，

image.png

2.计算属性和缓存

计算属性是基于它的依赖缓存的，一个计算属性所依赖的数据发生变化，它才会重新取值，所以msg只要不改变，计算属性就不会更新。但是methods不同，只要重新渲染，它就会被调用，函数就会被执行。究竟是使用就算属性还是methods取决于是否需要缓存，当遍历大数组和计算量很大时，应当使用计算属性，除非不希望得到缓存。

三、侦听器

Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动，称为监听器。当一些数据需要随着其他数据变动而变动时，可能会很容易滥用watch。下面通过代码来了解侦听器的使用。

<template>
  <div class="hello" >
     <input type="text" v-model="firstName">
     <input type="text" v-model="lastName">
     <h1>{{fullName}}</h1>
   
  </div>
</template>

<script>

export default {
  data(){

    return {
    firstName : 'jack',
    lastName  : 'chen',
    fullName  :  'jack chen'

    }
  },
  watch :{
      firstName(val){
      this.fullName = val+ this.lastName;

      },
      lastName(val){
        this.fullName = this.firstName+val;
      }


  }


}
</script>

运行结果，

image.png

image.png