Vue中computed(计算属性)和watch(监听属性)的用法及区别说明

 更新时间:2022年07月21日 11:03:26   作者:°PJ想做前端攻城狮  
这篇文章主要介绍了Vue中computed(计算属性)和watch(监听属性)的用法及区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

计算属性computed

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

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

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

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

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

侦听属性watch

不支持缓存,数据变,直接会触发相应的操作;

watch支持异步;

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

当一个属性发生变化时,需要执行对应的操作;一对多;

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

  • immediate:组件加载立即触发回调函数执行
  • deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。

监听的对象也可以写成字符串的形式

当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。这是和computed最大的区别。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue如何解决axios请求前端跨域问题

    vue如何解决axios请求前端跨域问题

    vue项目中,前端使用axios与后台进行数据请求或者提交的时候,如果后台没有设置跨域,浏览器做数据请求的时候就会报错,这篇文章主要给大家介绍了关于vue如何解决axios请求前端跨域问题的相关资料,需要的朋友可以参考下
    2021-10-10
  • 利用Vue3指令实现水印背景详解

    利用Vue3指令实现水印背景详解

    这篇文章主要为大家介绍了利用Vue3指令实现水印背景详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Vue动态加载ECharts图表数据的方式

    Vue动态加载ECharts图表数据的方式

    这篇文章主要介绍了Vue动态加载ECharts图表数据的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue使用neovis操作neo4j图形数据库及优缺点

    vue使用neovis操作neo4j图形数据库及优缺点

    这篇文章主要介绍了vue使用neovis操作neo4j图形数据库,本文给大家介绍了与常规做法的优缺点对比及使用技巧,对vue neo4j图形数据库相关知识感兴趣的朋友一起看看吧
    2022-02-02
  • Vue开发工具之vuejs-devtools安装教程及常见问题解决(最详细)

    Vue开发工具之vuejs-devtools安装教程及常见问题解决(最详细)

    这篇文章主要介绍了Vue开发工具vuejs-devtools超级详细安装教程以及常见问题解决本篇文章是最详细的vue开发工具vuejs-devtools安装教程,需要的朋友可以参考下
    2022-11-11
  • 详解vue 中使用 AJAX获取数据的方法

    详解vue 中使用 AJAX获取数据的方法

    本篇文章主要介绍了详解vue 中使用 AJAX获取数据的方法,在VUE开发时,数据可以使用jquery和vue-resource来获取数据,有兴趣的可以了解一下。
    2017-01-01
  • 分分钟玩转Vue.js组件

    分分钟玩转Vue.js组件

    这篇文章教大家如何分分钟玩转Vue.js组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Vue中this.$nextTick()的具体使用

    Vue中this.$nextTick()的具体使用

    本文主要介绍了Vue中this.$nextTick()的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • vue3下watch的使用方法示例

    vue3下watch的使用方法示例

    vue3中的watch是一个组合式的API使用时需要引入,下面这篇文章主要给大家介绍了关于vue3下watch使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • 详解vue项目首页加载速度优化

    详解vue项目首页加载速度优化

    这篇文章主要介绍了详解vue项目首页加载速度优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论