Vue的计算属性和监听属性

 

 

1. 计算属性computed在使用时，一定要注意，函数里面的变量都会被监听，只要里面的某一个值变动，便会将整个函数执行一遍。 而 watch 只是监听某一个值，若是监听的值里面也有很多变量，也会全部监听
  2. 计算后的属性可不在 data 中定义，如果定义会报错，因为对应的computed作为计算属性定义并返回对应的结果给这个变量,变量不可被重复定义和赋值。 而 watch 监听 data 中定义的变量变化

computed特性
1.是计算值，
2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值
3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数

watch特性
1.是观察的动作，
2.应用：监听props，$emit或本组件的值执行异步操作
3.无缓存性，页面重新渲染时值不变化也会执行

计算属性：

<template>
  <div>
    <div>
      firstName:
      <input type="text" v-model="firstName">

    </div>

    <div>
      secondName:
      <input type="text" v-model="secondName">
    </div>

    <div>
      fullName:{{fullName}}
    </div>
  </div>
</template>

<script>
export default {
  name: "计算属性",
  data(){
    return{
      firstName:'',
      secondName:'',
    }

  },

  /*计算属性根据他依赖的值，来计算自己的结果，如果依赖的值没有改变；那么在重新渲染页面时，不会重新调用函数，结果从缓存中取*/
  computed:{
    fullName:function (){
      return this.firstName+" "+this.secondName;
    }
  }
}
</script>

<style scoped>

</style>

监听属性：

<template>
  <div>
    <div>
      firstName:
      <input type="text" v-model="firstName">

    </div>

    <div>
      secondName:
      <input type="text" v-model="secondName">
    </div>

    <div>
      fullName:{{fullName}}
    </div>
  </div>
</template>

<script>

export default {
  name: "监听属性",
  data(){
    return{
      firstName:'',
      secondName:'',
      fullName:''
    }

  },

  /*监听属性是依靠监听一个值的变化，执行响应的函数，并且他没有缓存*/
  watch:{
    firstName:function (val){
      clearTimeout(this.firstNameTimeout);
      this.firstNameTimeout =setTimeout(()=>{
        this.fullName =val +" "+this.secondName;
      },1000)

    },
    secondName:function (val){
      clearTimeout(this.secondNameTimeout);
      this.secondNameTimeout =setTimeout(()=>{
        this.fullName =this.firstName +" "+val;
      },1000)

    },
  }

}
</script>

<style scoped>

</style>