Vue的计算属性和监听属性

最新推荐文章于 2024-11-07 14:21:21 发布

原创最新推荐文章于 2024-11-07 14:21:21 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文详细介绍了Vue.js中计算属性与监听属性的区别和应用场景。计算属性用于简化模板表达式，具备缓存特性，仅在依赖变化时更新。而监听属性则用于观察特定值的变化，常用于执行异步操作，不具备缓存性。示例代码展示了如何在组件中使用这两个特性来处理firstName和secondName的组合名称fullName。

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>