Vue中computed和watch的区别小结

 更新时间:2022年12月10日 11:13:01   作者:梦之归途  
watch和computed都是以Vue的依赖追踪机制为基础的,当某一个依赖型数据发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,即自动调用相关的函数,来实现数据的变动,这篇文章简单介绍下Vue中computed和watch的区别异同,感兴趣的朋友一起看看吧

区别:计算属性computed支持缓存,只有依赖数据发生改变,才会重新进行计算;不支持异步,当computed内有异步操作时无效,无法监听数据的变化。而监听属性watch不支持缓存,数据变,直接会触发相应的操作;支持异步。

一、Vue中computed和watch的区别

watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个或多个数据(称它们为依赖数据)发生变化的时候,所有依赖这些数据的 “相关” 数据 “自动” 发生变化,也就是自动调用相关的函数去实现数据的变动。

二、computed计算属性

支持缓存,只有依赖数据发生改变,才会重新进行计算;如果函数所依赖的属性没有发生变化,从缓存中读取
必须有return返回
使用方法和data中的数据一样,但是类似一个执行方法
不支持异步,当computed内有异步操作时无效,无法监听数据的变化;

computed是计算属性,也就是依赖某个值或者props通过计算得来的数据

computed的值是在getter执行之后进行缓存的,只有在它依赖的数据发生变化(依赖的数据可以是单个,也可以是多个)时,会重新调用getter来计算;

注意:就算data中没有直接声明要计算的变量,也可以直接在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>

计算属性默认只有getter,可以在需要的时候自己设定setter(所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例):

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也会改变。

(2)watch
1、不支持缓存,数据变,直接会触发相应的操作;

2、支持异步操作;

3、watch是监听器,可以监听某一个数据,然后执行相应的操作;

4、监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;

5、watch的函数名必须和data中的数据名一致

6、watch中的函数有俩个参数,新旧

7、watch中的函数是不需要调用的

8、只会监听数据的值是否发生改变,而不会去监听数据的地址是否发生改变,要深度监听需要配合deep:true属性使用

9、immediate:true 页面首次加载的时候做一次监听

var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (newVal,oldVal) {
                this.fullName = newVal + ' ' + this.lastName
                console.log(newVal+'========='+oldVal)//Fooaaaa=========Foo
            },
            lastName: function (newVal,oldVal) {
                this.fullName = this.firstName + ' ' + newVal
                console.log(newVal+'========='+oldVal)//Baraaaa=========Bar
            }
        }
    })

注意:如果data中没有相应的属性的话,是不能watch的,这点和computed不一样。

三、区别

1、功能:computed是计算属性,watch是监听一个值的变化而执行对应的回调

2、是否调用缓存:computed函数所依赖的属性不变的时候会调用缓存;watch每次监听的值发生变化时候都会调用回调

3、是否调用return:computed必须有;watch可以没有

4、使用场景:computed当一个属性受多个属性影响的时候;例如购物车商品结算;watch当一条数据影响多条数据的时候,例如搜索框

5、是否支持异步:computed函数不能有异步;watch可以

总结

  • 当多个属性影响一个属性的时候,建议用computed
  • 当一个值发生变化之后,会引起一系列的操作(改变其他属性值),这种情况就适合用watch

到此这篇关于Vue中computed和watch的区别小结的文章就介绍到这了,更多相关Vue中computed和watch的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue el-table实现自定义表头

    vue el-table实现自定义表头

    这篇文章主要为大家详细介绍了vue el-table实现自定义表头,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • Vuex之理解Store的用法

    Vuex之理解Store的用法

    本篇文章主要介绍了Vuex之理解Store的用法,Store类就是存储数据和管理数据方法的仓库,实现方式是将数据和方法已对象形式传入其实例中
    2017-04-04
  • vue中render函数和h函数以及jsx的使用方式

    vue中render函数和h函数以及jsx的使用方式

    这篇文章主要介绍了vue中render函数和h函数以及jsx的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 样式穿透vue中的scoped详谈

    样式穿透vue中的scoped详谈

    这篇文章主要为大家介绍了样式穿透vue中的scoped示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vant picker+popup 自定义三级联动案例

    vant picker+popup 自定义三级联动案例

    这篇文章主要介绍了vant picker+popup 自定义三级联动案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • VUE跨域问题Access to XMLHttpRequest at

    VUE跨域问题Access to XMLHttpRequest at

    今天发现一个错误,VUE发送请求的时候不能请求到正确数据,VUE跨域问题Access to XMLHttpRequest at,本文就详细的来介绍一下解决方法,感兴趣的可以了解一下
    2022-05-05
  • antdv的table因数据量过大导致的卡顿问题及解决

    antdv的table因数据量过大导致的卡顿问题及解决

    这篇文章主要介绍了antdv的table因数据量过大导致的卡顿问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Vue3 函数式弹窗的实例小结

    Vue3 函数式弹窗的实例小结

    这篇文章主要介绍了Vue3 函数式弹窗的实例小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11
  • vue3封装el-pagination分页组件的完整代码

    vue3封装el-pagination分页组件的完整代码

    这篇文章主要介绍了vue3封装el-pagination分页组件的完整代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • 详解如何解决Vue和vue-template-compiler版本之间的问题

    详解如何解决Vue和vue-template-compiler版本之间的问题

    这篇文章主要介绍了详解如何解决Vue和vue-template-compiler版本之间的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论