浅谈 vue 中的 watcher


Posted in Javascript onDecember 04, 2017

观察 Watchers

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过watch 选项,来响应数据的变化。当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。

大家对于 watch 应该不陌生,项目中都用过下面这种写法:

watch: {
 someProp () {
  // do something
 }
}
// 或者
watch: {
 someProp: {
  deep: true,
  handler () {
   // do something
  }
 }
}

上面的写法告诉 vue,我需要监听 someProp 属性的变化,于是 vue 在内部就会为我们创建一个 watcher 对象。(限于篇幅,我们不聊 watcher 的具体实现,感兴趣的可以直接看源码 watcher)

然而在 vue 中,watcher 的功能并没有这么单一,先上段代码:

<template>
 <div>
  <p>a: {{ a }}</p>
  <p>b: {{ b }}</p>
  <button @click="increment">+</button>
 </div>
</template>
<script>
export default {
 data () {
  return {
   a: 1
  }
 },
 computed: {
  b () {
   return this.a * 2
  }
 },
 watch: {
  a () {
    console.log('a is changed')
  }
 },
 methods: {
  increment () {
   this.a += 1
  }
 },
 created () {
  console.log(this._watchers)
 }
}
</script>

在线demo

上面代码非常简单,我们现在主要关注 created 钩子中打印的 this._watchers,如下:

分别展开三个 watcher,观察每一个 expression,从上到下分别为:

b() {   return this.a * 2;↵  }
"a"
function () {   vm._update(vm._render(), hydrating);↵  }

上面三个 watcher 代表了三种不同功能的 watcher,我们将其按功能分为三类:

  • 在 watch 中定义的,用于监听属性变化的 watcher (第二个)
  • 用于 computed 属性的 watcher (第一个)
  • 用于页面更新的 watcher (第三个)

normal-watcher

我们在 watch 中定义的,都属于这种类型,即只要监听的属性改变了,都会触发定义好的回调函数

computed-watcher

每一个 computed 属性,最后都会生成一个对应的 watcher 对象,但是这类 watcher 有个特点,我们拿上面的 b 举例:

属性 b 依赖 a,当 a 改变的时候,b 并不会立即重新计算,只有之后其他地方需要读取 b 的时候,它才会真正计算,即具备 lazy(懒计算)特性

render-watcher

每一个组件都会有一个 render-watcher, function () {↵ vm._update(vm._render(), hydrating);↵ }, 当 data/computed

中的属性改变的时候,会调用该 render-watcher 来更新组件的视图

三种 watcher 的执行顺序

除了功能上的区别,这三种 watcher 也有固定的执行顺序,分别是:

computed-render -> normal-watcher -> render-watcher

这样安排是有原因的,这样就能尽可能的保证,在更新组件视图的时候,computed 属性已经是最新值了,如果 render-watcher 排在 computed-render 前面,就会导致页面更新的时候 computed 值为旧数据。

下面从一段实例代码中看下vue中的watcher

在这个示例中,使用 watch 选项允许我们执行异步操作(访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这是计算属性无法做到的。

<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<!-- Since there is already a rich ecosystem of ajax libraries -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also -->
<!-- gives you the freedom to just use what you're familiar with. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
 // 如果 question 发生改变,这个函数就会运行
question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
 // _.debounce 是一个通过 lodash 限制操作频率的函数。
 // 在这个例子中,我们希望限制访问yesno.wtf/api的频率
 // ajax请求直到用户输入完毕才会发出
 // 学习更多关于 _.debounce function (and its cousin
// _.throttle), 参考: https://lodash.com/docs#debounce
getAnswer: _.debounce(
function () {
var vm = this
if (this.question.indexOf('?') === -1) {
vm.answer = 'Questions usually contain a question mark. ;-)'
return
}
vm.answer = 'Thinking...'
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
},
// 这是我们为用户停止输入等待的毫秒数
500
)
}
})
</script>

小结

本文并不是源码解析类文章,只是从一个角度来聊聊,那些看似不相关的东西(computed/watch/页面更新),内部却有着紧密的联系,希望能抛砖引玉,让大家更深入的去探索 vue

Javascript 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 #Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 #Javascript
微信小程序tabBar用法实例详解
Dec 04 #Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 #Javascript
浅谈React和Redux的连接react-redux
Dec 04 #Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 #Javascript
深入浅出webpack之externals的使用
Dec 04 #Javascript
You might like
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
js 页面输出值
2008/11/30 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
python中列表和元组的区别
2017/12/18 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python3.x实现发送邮件功能
2018/05/22 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Python中base64与xml取值结合问题
2019/12/22 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
Python如何实现单例模式
2016/06/03 面试题
Java程序员常见面试题
2015/07/16 面试题
旷课检讨书1000字
2014/02/14 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
合作协议书模板
2014/10/10 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
通知的写法
2015/04/23 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
Python MNIST手写体识别详解与试练
2021/11/07 Python
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
nginx配置之并发频次限制
2022/04/18 Servers