如何理解Vue中computed和watch的区别

概述

我们在 Vue 项目中多多少少都会有用到 computed 和 watch,这两个看似都能实现对数据的监听,但还是有区别。所以以下通过一个小栗子来理解一下这两者的区别。

computed 计算属性

计算属性基于 data 中声明过或者父组件传递的 props 中的数据通过计算得到的一个新值,这个新值只会根据已知值的变化而变化,简言之:这个属性依赖其他属性,由其他属性计算而来的。

<p>姓名:{{ fullName }}</p>
... ...
data: {
    firstName: 'David',
    lastName: 'Beckham'
},
computed: {
    fullName: function() { //方法的返回值作为属性值
            return this.firstName + ' ' + this.lastName
    }
}

在 computed 属性对象中定义计算属性的方法,和取data对象里的数据属性一样以属性访问的形式调用,即在页面中使用 {{ 方法名 }} 来显示计算的结果。

注:计算属性 fullName 不能在 data 中定义,而计算属性值的相关已知值在data中;

如果 fullName 在 data 中定义了会报错如下图:

因为如果 computed 属性值是一个函数,那么默认会走get方法,必须要有一个返回值,函数的返回值就是属性的属性值。计算属性定义了 fullName 并返回对应的结果给这个变量,变量不可被重复定义和赋值。

在官方文档中,还强调了 computed 一个重要的特点,就是 computed 带有缓存功能。比如我在页面中多次显示 fullName:

<p>姓名:{{ fullName }}</p>
<p>姓名:{{ fullName }}</p>
<p>姓名:{{ fullName }}</p>
<p>姓名:{{ fullName }}</p>
<p>姓名:{{ fullName }}</p>
... ... 

computed: {
    fullName: function () {
         console.log('computed') // 在控制台只打印了一次
         return this.firstName + ' ' + this.lastName
    }
}

我们知道 computed 内定义的 function 只执行一次,仅当初始化显示或者相关的 data、props 等属性数据发生变化的时候调用;

而 computed 属性值默认会缓存计算结果,计算属性是基于它们的响应式依赖进行缓存的;

只有当 computed 属性被使用后,才会执行 computed 的代码,在重复的调用中,只要依赖数据不变,直接取缓存中的计算结果。只有依赖型数据发生改变,computed 才会重新计算。

计算属性的高级:

在computed 中的属性都有一个 get 和一个set方法,当数据变化时,调用 set 方法。下面我们通过计算属性的 getter/setter 方法来实现对属性数据的显示和监视,即双向绑定。

computed: {
    fullName: {
        get() { //读取当前属性值的回调,根据相关的数据计算并返回当前属性的值
            return this.firstName + ' ' + this.lastName
        },
        set(val) { // 当属性值发生改变时回调,更新相关的属性数据,val就是fullName的最新属性值
            const names = val ? val.split(' ') : [];
            this.firstName = names[0]
            this.lastName = names[1]
        }
    }
}

watch 监听属性

通过 vm 对象的 $watch() 或 watch 配置来监听 Vue 实例上的属性变化,或某些特定数据的变化,然后执行某些具体的业务逻辑操作。当属性变化时,回调函数自动调用,在函数内部进行计算。其可以监听的数据来源:data,props,computed 内的数据。

以上示例通过 watch 来实现:

watch: {
    // 监听 data 中的 firstName,如果发生了变化,就把变化的值给 data 中的 fullName, val 就是 firstName 的最新值
    firstName: function(val) {
        this.fullName = val + ' ' + this.lastName
    },
    lastName: function(val) {
        this.fullName = this.firstName + ' ' + val
    }
}
// 由上可以看出 watch 要监听两个数据,而且代码是同类型的重复的,所以相比用 computed 更简洁

注:监听函数有两个参数,第一个参数是最新的值,第二个参数是输入之前的值,顺序一定是新值,旧值,如果只写一个参数,那就是最新属性值。

在使用时选择 watch 还是 computed,还有一个参考点就是官网说的:当需要在数据变化时执行异步或开销较大的操作时,watch方式是最有用的。所以 watch 一定是支持异步的。

上面仅限监听简单数据类型,监听复杂数据类型就需要用到深度监听 deep。

deep:为了发现对象内部值的变化,可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。

data: {
    fullName: {
        firstName: 'David',
        lastName: 'Beckham'
    }
},
watch: {
    fullName: {
        handler(newVal, oldVal) {
            console.log(newVal);
            console.log(oldVal);
        },
        deep: true
    }
}

以上打印结果:

打印出来的 newVal 和 oldVal 值是一样的,所以深度监听虽然可以监听到对象的变化,但是无法监听到对象里面哪个具体属性的变化。这是因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。[ vm.$watch 深度监听 ]

若果要监听对象的单个属性的变化,有两种方法:

1. 直接监听对象的属性

watch:{
    fullName.firstName: function(newVal,oldVal){
        console.log(newVal,oldVal);
    }
}

2. 与 computed 属性配合使用,computed 返回想要监听的属性值,watch 用来监听

computed: {
    firstNameChange() {
    return this.fullName.firstName
    }
},
watch: {
    firstNameChange() {
        console.log(this.fullName)
    }
}

总结

watch和computed都是以Vue的依赖追踪机制为基础的,当某一个依赖型数据(依赖型数据:简单理解即放在 data 等对象下的实例数据)发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,即自动调用相关的函数,来实现数据的变动。

当依赖的值变化时,在watch中,是可以做一些复杂的操作的,而computed中的依赖,仅仅是一个值依赖于另一个值,是值上的依赖。

应用场景:

computed:用于处理复杂的逻辑运算;一个数据受一个或多个数据影响;用来处理watch和methods无法处理的,或处理起来不方便的情况。例如处理模板中的复杂表达式、购物车里面的商品数量和总金额之间的变化关系等。

watch:用来处理当一个属性发生变化时,需要执行某些具体的业务逻辑操作,或要在数据变化时执行异步或开销较大的操作;一个数据改变影响多个数据。例如用来监控路由、inpurt 输入框值的特殊处理等。

区别:  

computed

  • 初始化显示或者相关的 data、props 等属性数据发生变化的时候调用;
  • 计算属性不在 data 中,它是基于data 或 props 中的数据通过计算得到的一个新值,这个新值根据已知值的变化而变化;
  • 在 computed 属性对象中定义计算属性的方法,和取data对象里的数据属性一样,以属性访问的形式调用;
  • 如果 computed 属性值是函数,那么默认会走 get 方法,必须要有一个返回值,函数的返回值就是属性的属性值;
  • computed 属性值默认会缓存计算结果,在重复的调用中,只要依赖数据不变,直接取缓存中的计算结果,只有依赖型数据发生改变,computed 才会重新计算;
  • 在computed中的,属性都有一个 get 和一个 set 方法,当数据变化时,调用 set 方法。

watch

  • 主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以看作是 computed 和 methods 的结合体;
  • 可以监听的数据来源:data,props,computed内的数据;
  • watch支持异步;
  • 不支持缓存,监听的数据改变,直接会触发相应的操作;
  • 监听函数有两个参数,第一个参数是最新的值,第二个参数是输入之前的值,顺序一定是新值,旧值。

以上就是如何理解Vue中computed和watch的区别的详细内容,更多关于Vue的资料请关注我们其它相关文章!

(0)

相关推荐

  • Vue中computed和watch有哪些区别

    计算属性computed: 支持缓存,只有依赖数据发生改变,才会重新进行计算 不支持异步,当computed内有异步操作时无效,无法监听数据的变化 computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed 如果computed属性属性值是函数,那么默认会走get方法:函数的返回值就是属性的属性

  • Vue中computed及watch区别实例解析

    计算属性computed : 1. 支持缓存,只有依赖数据发生改变,才会重新进行计算 2. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化 3.computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 4. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed5.如果computed属性属性值是函数,那么默认会走get方法:

  • Vue.js计算属性computed与watch(5)

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. Vue实例的computed的属性 <div class="test"> <p>原始的信息{{message}}</p> <p>计算后的信息{{ComputedMessage}}</p

  • vue中watch和computed的区别与使用方法

    computed 计算属性说明: computed 是基于响应性依赖来进行缓存的.只有依赖数据发生改变,才会重新进行计算(当触发重新渲染,若依赖数据没有改变,则 computed 不会重新计算).若没改变,计算属性会立即返回之前缓存的计算结果. 不支持异步,当 computed 内有异步操作时无效,无法监听数据的变化的值. computed 中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set 变成可读写属性 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对

  • Vue的watch和computed方法的使用及区别介绍

    Vue的watch属性 Vue的watch属性可以用来监听data属性中数据的变化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="lib/vue.min.js"></script> <script src="lib/vue-router-3

  • 详解Vue中的watch和computed

    前言 对于使用Vue的前端而言,watch.computed和methods三个属性相信是不陌生的,是日常开发中经常使用的属性.但是对于它们的区别及使用场景,又是否清楚,本文我将跟大家一起通过源码来分析这三者的背后实现原理,更进一步地理解它们所代表的含义. 在继续阅读本文之前,希望你已经具备了一定的Vue使用经验,如果想学习Vue相关知识,请移步至官网. Watch 我们先来找到watch的初始化的代码,/src/core/instance/state.js export function in

  • vue中计算属性(computed)、methods和watched之间的区别

    前言 本文主要给大家介绍了关于vue中计算属性(computed).methods和watched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍: 计算属性 和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变. Methods methods是方法,只要调用它,函数就会执行. 相同:两者达到的效果是同样的. 不同:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职.只要相关依赖未改变,只会返回之前的结果,不再执行函

  • 深入浅析Vue中的 computed 和 watch

    computed 计算属性:通过属性计算得来的属性 计算属性,是在相关联的属性发生变化才计算,计算过一次,如果相关属性没有变化,下一次就不需要计算了,直接去缓存的值 a:<input type="number" v-model.number="a" /> b:<input type="number" v-model.number="b" /> <!--c:<input type="

  • Vue中的methods、watch、computed的区别

    看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景,也很难用好它们,希望接下来的介绍为你答疑解惑. computed 我们先来看计算属性:computed,光看名字也知道是用来干什么的,计算属性当然是用来计算的,但是是怎么计算的呢?计算属性有两个显著的特点: 计算属性计算时所依赖的属性一定是响应式依赖,否则计算属性不会执行 计算属性是基于依赖进行缓

  • 详解vue中computed 和 watch的异同

    一.computed 和 watch 都可以观察页面的数据变化.当处理页面的数据变化时,我们有时候很容易滥用watch. 而通常更好的办法是使用computed属性,而不是命令是的watch回调. 这里我直接引用vue官网的例子来说明: html: 我们要实现 第三个表单的值 是第一个和第二个的拼接,并且在前俩表单数值变化时,第三个表单数值也在变化 <div id="myDiv"> <input type="text" v-model="

随机推荐