vue计算属性和监听属性

最新推荐文章于 2025-05-11 01:16:07 发布

原创最新推荐文章于 2025-05-11 01:16:07 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #js

本文详细介绍了Vue中的计算属性（computed）和监听属性（watch）。计算属性会在依赖的data属性变化时自动计算并缓存结果，提高性能。而监听属性则在属性变化时触发回调函数，可用于控制DOM更新或执行复杂逻辑。通过设置deep，可以监听对象属性的深层变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、计算属性（computed）

当依赖的data对象中的属性值发生变化时、会触发计算方法，在data对象中生成新的变量，会将新的变量缓存起来；（只要依赖的data对象属性值不发生改变，将不会触发计算方法；）
可以用计算属性实现的，也可以用方法methods实现，但是methods性能不如computed；methods每次渲染后都会被调用，computed只要响应式依赖(data中的属性)没有发生改变，就不会重新计算，并且计算后会重新被缓存；

监听data中的 first 和 last 计算出 result，在data中不需要定义result

<template>
  <div id="app">
    <div>{{result}}</div>
  </div>
</template>

<script>

export default {
  data(){
    return{ 
      first:10,
      last: 10
    }
  },
  computed:{
    // 监听data中的first和last值的变化, 得到新变量result，result不需要在data中定义
    result () {
      return this.first + this.last;
    }
  }
}
</script>

使用 setter 和 getter 方法

<template>
  <div id="app">
    <div>first: {{first}}</div>
    <div>last: {{last}}</div>
    <div>result: {{result}}</div>
    <button @click="onclick">更改</button>
  </div>
</template>

<script>

export default {
  data(){
    return{ 
      first:10,
      last: 10
    }
  },
  computed: {
    result: { 
      // 监听 data 中的 first 和 last, 得到新变量 result
      // 注意：只有当值改变时才会执行。
      get () {
        return this.first + this.last;
      } ,
      // set方法作用：通过参数修改计算的依赖属性 first 和 last 值
      set (newValue) { 
        this.first = newValue;
        this.last = newValue
      }
    }
  },
  methods:  {
    onclick() {
      // 调用计算属性的 set 方法，修改 first 和 last 的值
      this.result = 15
    }
  }
}
</script>

二、监听属性（watch）

当属性发生改变就会触发watch函数，每个函数都会接受两个值，一个是新值，一个是旧值
可以在watch当中判断来减少虚拟dom的渲染

watch:{
    value(newVal,oldVal){
    if(newVal != oldVal){
        this.sum = newVal;
    }else{
    	window.console.log(newVal,oldVal)
   	}
}

如果我们需要监听data某一个对象所有的值、当有一个值发生改变就能监听到可以设置deep：true；如果需要监听对象中某一个属性可以写为字符串形式：“obj.name”，这种写法可以节省部分性能，也免循环监听对象的属性造成浪费。

对象中有两个参数是必填，一个是handler函数，一个是deep为true，