位置: 编程技术 - 正文

浅谈 vue 中的 watcher

编辑:rootadmin

推荐整理分享浅谈 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 中定义的,都属于这种类型,即只要监听的属性改变了,都会触发定义好的回调函数

浅谈 vue 中的 watcher

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请求),在事件循环滞后,会在页面记录加载的状态以及进度情况。

网页从弹窗页面单选框传值至父页面代码分享 在项目中,需要完成这样一个功能:在加入新机构的时候,需要选择它的上级机构,实现方式为点击查找填入按钮,弹出弹窗页面,用户点击所需的行

标签: 浅谈 vue 中的 watcher

本文链接地址:https://www.jiuchutong.com/biancheng/380267.html 转载请保留说明!

上一篇:vue中的计算属性的使用和vue实例的方法示例(vue中的计算属性forEach函数的使用)

下一篇:js强制把网址设为默认首页(js强制把网址设为密码)

  • 三证合一后纳税人识别号和信用代码一样吗
  • 税金及附加如何记账
  • 房地产企业拆迁补偿费契税12366
  • 单位买了一批空调怎么办
  • 资本成本与财务风险的区别
  • 开业税务登记的基本流程
  • 计入无形资产
  • 房地产公司预收账款明细科目
  • 进项税过期不抵扣怎么写会计分录?
  • 三证合一后新办企业多久去税务登记
  • 单位公积金可以拖欠多长时间缴
  • 保安服务费差额征税如何计算税额
  • 存货暂估入账的分录
  • 应收账款确认无法收回
  • 汇率的标价
  • 公司账上的资金与注册资金不一致可以吗?
  • 红字冲回怎么做账
  • 生产车间广告牌设计图片
  • 合伙企业营业执照多少钱
  • 事业单位年末预算会计货币资金在贷方有余额对吗
  • 应用程序无法正常启动(0xc0000142)
  • 融资租赁固定资产会计处理
  • 怎么检查电脑硬件是否正常
  • php获取图片
  • php正则表达式实例
  • Win10无法访问局域网计算机
  • yolov5模型训练
  • 低值易耗品费用账务处理
  • 运输取得的收入
  • PHP:imagegrabwindow()的用法_GD库图像处理函数
  • 业务实际发生没得取得发票怎么做账
  • 阿伦河在哪
  • 安斯海滩上的角眼沙蟹,塞舌尔普拉兰岛 (© Ingo Schulz/Offset by Shutterstock)
  • yolov3训练自己的数据超详细
  • 商业一般纳税人增值税税负率最低多少
  • 贷款的银行卡叫什么
  • php数据的提交与采集实验报告
  • js加密解密源代码
  • ts类型声明 要为某个文件里的变量声明吗
  • php二分查找算法两种方法
  • 劳务费如何支付
  • 给股东分配股利
  • sql server递归查询
  • 什么是电子承诺
  • 小规模纳税人所得税怎么计算
  • 工会经费计入什么项目流量表
  • 银行承兑汇票是什么意思
  • 固定资产以前年度多计提怎么办
  • 交房租会计分录怎么写好
  • 增值税发票内容填写不全应如何进行处理?
  • 工会会员缴纳的医疗互助金列工会什么科目
  • 发票开具与小票的关系是怎样的?
  • 现金流量表是年度报表
  • 分配股利有几种形式
  • 债权投资的交易费用计入成本还是利息调整
  • 当月工资总额如何计算
  • 如果是车间不生气怎么办
  • 企业支付宝要交税吗?
  • 小规模企业所得税优惠政策最新2023
  • MySql insert插入操作的3个小技巧分享
  • win2003和2003r2
  • ubuntu 16.04.6安装教程
  • macbookpro蓝牙找不到
  • centos怎么样
  • win8系统教程
  • centos怎么配置dns
  • console打开
  • win7磁盘c满了怎么办却又分不清哪些是该删除
  • win7服务在哪里打开
  • win7菜单栏是什么
  • windows10 rs4
  • cocos安装
  • bootstrap treeview 扩展addNode方法动态添加子节点的方法
  • jquery地址
  • jquery选择器的基本语法
  • js辅助器下载
  • android studio 无法解析 aar
  • 棚改房办房产证用不用交费
  • 航天金税软件怎么下载
  • 个人所得税怎么退税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设