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 相关文章推荐
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
js实现进度条的方法
Feb 13 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
Vue实现双向数据绑定
May 03 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
vue+element实现表单校验功能
May 20 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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
关于js和php对url编码的处理方法
2014/03/04 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
python实现汉诺塔方法汇总
2016/07/25 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
Python装饰器简单用法实例小结
2018/12/03 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python hough变换检测直线的实现方法
2019/07/12 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Python新手如何理解循环加载模块
2020/05/29 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
大学自主招生自荐信
2013/12/16 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
三方股份合作协议书
2014/10/13 职场文书
党员评议自我评价
2015/03/03 职场文书