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


Posted in Javascript onAugust 23, 2020

computed 计算属性说明:

computed 是基于响应性依赖来进行缓存的。只有依赖数据发生改变,才会重新进行计算(当触发重新渲染,若依赖数据没有改变,则 computed 不会重新计算)。若没改变,计算属性会立即返回之前缓存的计算结果。

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

computed 中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set 变成可读写属性

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

下面的计算属性将不再更新,因为 Date.now() 不是响应式依赖:

computed: {
 now: function () {
 return Date.now()
 }
}

相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

watch 监听属性说明:

不支持缓存,数据变或者触发重新渲染时,直接会触发相应的操作。

watch 支持异步

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

监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据,当数据变化时,触发其他操作,函数有两个参数,immediate:组件加载立即触发回调函数执行,deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep 无法监听到数组的变动和对象的新增,参考 vue 数组变异,只有以响应式的方式触发才会被监听到。

watch 和 computed 的区别是:

相同点:

两者都是观察页面数据变化的。

不同点:

  • computed 只有当依赖的数据变化时才会计算, 会缓存数据。
  • watch 每次都需要执行函数。watch 更适用于数据变化时的异步操作。

使用 参考官方文档

computed 使用

类型:{ [key: string]: Function | { get: Function, set: Function } }

详细:

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

注意如果你为一个计算属性使用了箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。

computed: {
 aDouble: vm => vm.a * 2
}

计算属性的结果会被缓存,除非依赖的响应式 property 变化才会重新计算。注意,如果某个依赖 (比如非响应式 property) 在该实例范畴之外,则计算属性是不会被更新的。

示例:

var vm = new Vue({
 data: { a: 1 },
 computed: {
  // 仅读取
  aDouble: function () {
   return this.a * 2
  },
  // 读取和设置
  aPlus: {
   get: function () {
    return this.a + 1
   },
   set: function (v) {
    this.a = v - 1
   },
  },
 },
})
vm.aPlus // => 2
vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4

watch 使用 与 解释

类型:{ [key: string]: string | Function | Object | Array }

详细:

一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个 property。

示例:

var vm = new Vue({
 data: {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: {
   f: {
    g: 5,
   },
  },
 },
 watch: {
  a: function (val, oldVal) {
   console.log('new: %s, old: %s', val, oldVal)
  },
  // 方法名
  b: 'someMethod',
  // 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
  c: {
   handler: function (val, oldVal) {
    ;/_ ... _/
   }, // or handler:'方法名'
   deep: true,
  },
  // 该回调将会在侦听开始之后被立即调用
  d: {
   handler: 'someMethod', // or handler: function(val, oldVal){}
   immediate: true,
  },
  // 你可以传入回调数组,它们会被逐一调用
  e: [
   'handle1',
   function handle2(val, oldVal) {
    /* ... */
   },
   {
    handler: function handle3(val, oldVal) {
     /* ... */
    },
    /* ... */
   },
  ],
  // watch vm.e.f's value: {g: 5}
  'e.f': function (val, oldVal) {
   ;/_ ... _/
  },
 },
})
vm.a = 2 // => new: 2, old: 1

说明: 对应上方的 a~e

a: 监听一个属性,需要使用前后变化值时使用

b: 监听一个属性,不会使用到改变前后的值,只为了执行一些方法,可以使用字符串代替 字符串代表方法名

c: 在监听一个对象时,当对象内部的属性被改变时,无法触发 watch,设置 deep 为 true 后,无论嵌套多深,只要属性值被改变都会触发监听。但这种方式开销会较大,监听器会一层一层往下找,为每个属性添加监听器。

如果我们只是监听对象的某个属性改变时,可以这样做:

watch:{
  'user.name':{
   handler: 'method'
  }

 }

d: watch 是在监听属性改变时才会触发,组件创建时可能不会执行,因此我们可以设置 immediate: true,就会让在组件创建后 watch 能够立即执行一次。就不用在 create 的时候去修改属性啦。

handelr: 触发监听执行的方法(需要用到改变前后的值时,可换成函数)

immediate: 监听开始之后被立即调用

e: 监听一个属性,执行多个函数包括回调等

注意,不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。

总结

到此这篇关于vue中watch和computed的区别与使用方法的文章就介绍到这了,更多相关vue watch和computed的区别内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
iframe 异步加载技术及性能分析
Jul 19 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
浅谈javascript中return语句
Jul 15 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
vue动态设置页面title的方法实例
Aug 23 #Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 #Javascript
Vue中keep-alive组件的深入理解
Aug 23 #Javascript
google广告之另类js调用实现代码
Aug 22 #Javascript
JS typeof fn === 'function' && fn()详解
Aug 22 #Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 #Javascript
JavaScript中的函数式编程详解
Aug 22 #Javascript
You might like
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
PHP使用函数用法详解
2018/09/30 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
Python中字典映射类型的学习教程
2015/08/20 Python
python如何重载模块实例解析
2018/01/25 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
优秀大专毕业生求职信
2014/08/04 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
nginx搭建NFS网络文件系统
2022/04/14 Servers
nginx配置之并发频次限制
2022/04/18 Servers
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL