vue watch和computed的用法和区别

最新推荐文章于 2025-03-12 10:19:34 发布

@码上行动

最新推荐文章于 2025-03-12 10:19:34 发布

阅读量421

点赞数 1

分类专栏： vue 文章标签： vue.js html html5

本文链接：https://blog.youkuaiyun.com/weixin_45935734/article/details/117734304

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细对比了Vue.js框架中Computed属性与Watch属性的功能差异，包括缓存机制、异步支持、监听方式等，并提供了具体的应用场景示例。

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

对比1

<template>
  <div>
    <el-input v-model="demo"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo(val) {
        this.value = val;
      }
    }
  };
</script>

通过watch来直接监测demo，如果demo的值变化，value的值也会跟着一起变化。

<template>
  <div>
    <el-input v-model="demo.name"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: {
          name: ''
        },
        value: ''
      };
    },
    computed: {
      newName() {
        return this.demo.name;
      }
    },
    watch: {
      newName(val) {
        this.value = val;
      }
    }
  };

如果watch监测的是一个对象的话，直接使用watch是不行的，此时我们可以借助于computed计算属性来完成。

<script type="text/javascript">
  var vm = new Vue( {
    el: '#app',
    data: {
      childrens: {
        name: '小强',
        age: 20,
        sex: '男'
      },
      tdArray:["1","2"],
      lastName:"张三"
    },
    watch:{
      childrens:{
        handler:function(val,oldval){
          console.log(val.name)
        },
        deep:true//对象内部的属性监听，也叫深度监听
      },
      'childrens.name':function(val,oldval){
        console.log(val+"aaa")
      },//键路径必须加上引号
      lastName:function(val,oldval){
        console.log(this.lastName)
      }
    },//以V-model绑定数据时使用的数据变化监测
  } );
  vm.$watch("lastName",function(val,oldval){
    console.log(val)
  })//主动调用$watch方法来进行数据监测
</script>
</body>

数组的变化，不需要深度watch。

对比2

计算属性computed :

1、支持缓存，只有依赖数据发生改变，才会重新进行计算

2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化

3、computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

4、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

5、如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

在这里插入图片描述
侦听属性watch：

1、不支持缓存，数据变，直接会触发相应的操作；

2、watch支持异步；

3、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

4、当一个属性发生变化时，需要执行对应的操作；一对多；

5、监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

immediate：组件加载立即触发回调函数执行，

deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。
　
在这里插入图片描述
监听的对象也可以写成字符串的形式

对比3

一、computed

当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。

<p id="app">  {{fullName}}  </p>

<script>
    var vm = new Vue({  
        el: '#app',  
        data: {  
            firstName: 'Foo',  
            lastName: 'Bar',  
        },  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    })
</script>

需要注意的是，就算在data中没有直接声明出要计算的变量，也可以直接在computed中写入。

计算属性默认只有getter，可以在需要的时候自己设定setter：

  computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }

这个时候在控制台直接运行vm.fullName = ‘bibi wang’，相应的firstName和lastName也会改变。

适用场景：
在这里插入图片描述
二、watch

watch和computed很相似，watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。直接引用文档例子

var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })