位置: 编程技术 - 正文
推荐整理分享浅谈 vue 中的 watcher,希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!
观察 Watchers
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过watch 选项,来响应数据的变化。当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。
大家对于 watch 应该不陌生,项目中都用过下面这种写法:
上面的写法告诉 vue,我需要监听 someProp 属性的变化,于是 vue 在内部就会为我们创建一个 watcher 对象。(限于篇幅,我们不聊 watcher 的具体实现,感兴趣的可以直接看源码 watcher)
然而在 vue 中,watcher 的功能并没有这么单一,先上段代码:
在线demo
上面代码非常简单,我们现在主要关注 created 钩子中打印的 this._watchers,如下:
分别展开三个 watcher,观察每一个 expression,从上到下分别为:
上面三个 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-watcher 排在 computed-render 前面,就会导致页面更新的时候 computed 值为旧数据。
下面从一段实例代码中看下vue中的watcher
在这个示例中,使用 watch 选项允许我们执行异步操作(访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这是计算属性无法做到的。
小结
本文并不是源码解析类文章,只是从一个角度来聊聊,那些看似不相关的东西(computed/watch/页面更新),内部却有着紧密的联系,希望能抛砖引玉,让大家更深入的去探索 vue
js强制把网址设为默认首页 小编不建议使用这种功能,毕竟是一种对网页浏览者不友好的行为。好,下面言归正传:htmlxmlns="
pace.js页面加载进度条插件 本文简单介绍插件pace.js.在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况。
网页从弹窗页面单选框传值至父页面代码分享 在项目中,需要完成这样一个功能:在加入新机构的时候,需要选择它的上级机构,实现方式为点击查找填入按钮,弹出弹窗页面,用户点击所需的行
友情链接: 武汉网站建设