计算属性 computed

简单模板的表达式无法完成的业务可以通过计算属性来完成，任何复杂逻辑，都应当使用计算属性。

HTML部分：

<div id="app">
   {{msg.toUpperCase().split('').reverse().join('')}}
</div>

JS部分

new Vue({
  el:"#app",
  data:{
    msg:"hello vue"
  }
})

显示效果

EUV OLLEH

在模板中放入太多的逻辑会让模板过重且难以维护
所以在这个地方 应当使用计算属性

如下
HTML部分：

<div id="app">
    {{reversed}}//调用
</div>

JS部分

new Vue({
  el:"#app",
  data:{
    msg:"hello vue"
  },
  computed: {
    reversed(){
      return this.msg.toUpperCase().split('').reverse().join('')
    }
  }
})

显示效果

EUV OLLEH

计算属性具有依赖性，所依赖的属性发生改变时，计算属性就会发生改变，所依赖的属性没改变时，计算属性不会发生改变。首次运行时会也发生改变。

侦听器 watch

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。相比计算属性需要多添加一个初始变量。
HTML部分：

  <div id="app">
   <input type="text" v-model='pwd' placeholder="请输入密码">
   {{tip}}//调用
  </div>

JS部分

new Vue({
  el:"#app",
  data:{
    pwd:"",
    tip:""
  },
  watch: {
    pwd(newVal,oldVal){
        if(newVal===""){
          this.tip="密码不能为空"
        }else if(newVal.length<6||newVal.length>16){
          this.tip="密码应该6-16位"
        }else{
          this.tip="密码可用"
        }
      } 
  }
})

在首次打开时，watch不会被运行，所以不会显示密码不能为空的提示语。在表单内输入数据后才会运行watch并更改元数据。

计算属性与侦听器的区别

计算属性 在页面初次渲染时直接运行 调用时直接在模板中渲染 对数据有依赖性
侦听属性 在页面初次渲染时不运行 在修改数据后才执行 调用的时候需要更改元数据