【Vue原理】Watch - 白话版 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


【Vue原理】Watch - 白话版

2019-7-10 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

【Vue原理】Watch - 白话版
简述 响应式
监听的数据改变的时,watch 如何工作
设置 immediate 时,watch 如何工作
设置了 deep 时, watch 如何工作
举栗子
结论
没有设置 deep
设置了 deep
实际证明
专注 Vue 源码分享,为了方便大家理解,分为了白话版和 源码版,白话版可以轻松理解工作原理和设计思想,源码版可以更清楚内部操作和 Vue的美,喜欢我就关注我的公众号,公众号的文章,排版更好看

如果你觉得排版难看,请点击下面公众号链接

【Vue原理】Watch - 白话版


今天我们用白话文解读 watch 的工作原理,轻松快速理解 watch 内部工作原理。你说,你只懂怎么用的,却不懂他内部是怎么工作的,这样能有什么用?

近期有篇 《停止学习框架》很火,其实本意不是让我们不要学框架,而是让我们不要只停留在框架表面,我们要学会深入,以一敌十,让我们也要学会框架的抽象能力

watch 想必大家用得应该也挺多的,用得也很顺,如果你顺便花一点点时间了解一下内部的工作原理,相信肯定会对你的工作有事半功倍的效果

watch 的工作原理其实挺简单的,如果你有看过我之前讲解其他选项的文章,你可以一下子就明白 watch 是如何工作的,所以这边文章我也✍得很快

根据 watch 的 api,我们需要了解三个地方

1、监听的数据改变的时,watch 如何工作

2、设置 immediate 时,watch 如何工作

3、设置了 deep 时,watch 如何工作



简述 响应式
Vue 会把数据设置响应式,既是设置他的 get 和 set

当 数据被读取,get 被触发,然后收集到读取他的东西,保存到依赖收集器

当 数据被改变,set 被触发,然后通知曾经读取他的东西进行更新

如果你不了解,可以查看下 以前的文章

【Vue原理】响应式原理 - 白话版



监听的数据改变的时,watch 如何工作
watch 在一开始初始化的时候,会 读取 一遍 监听的数据的值,于是,此时 那个数据就收集到 watch 的 watcher 了

然后 你给 watch 设置的 handler ,watch 会放入 watcher 的更新函数中

当 数据改变时,通知 watch 的 watcher 进行更新,于是 你设置的 handler 就被调用了



设置 immediate 时,watch 如何工作
当你设置了 immediate 时,就不需要在 数据改变的时候 才会触发。

而是在 初始化 watch 时,在读取了 监听的数据的值 之后,便立即调用一遍你设置的监听回调,然后传入刚读取的值



设置了 deep 时, watch 如何工作
我们都知道 watch 有一个 deep 选项,是用来深度监听的。什么是深度监听呢?就是当你监听的属性的值是一个对象的时候,如果你没有设置深度监听,当对象内部变化时,你监听的回调是不会被触发的

在说明这个之前,请大家先了解一下

当你使用 Object.defineProperty 给 【值是对象的属性】 设置 set 和 get 的时候

1如果你直接改变或读取这个属性 ( 直接赋值 ),可以触发这个属性的设置的 set 和 get

2但是你改变或读取它内部的属性,get 和 set 不会被触发的

举栗子
var inner = { first:1111 }
var test={    name:inner  }

Object.defineProperty(test,"name",{
    get(){         
        console.log("name get被触发")         
        return inner
    },
    set(){        
        console.log("name set被触发")
    }
})

// 访问 test.name 第一次,触发 name 的 get
Object.defineProperty(test.name,"first",{
    get(){        
        return console.log("first get被触发")
    },
    set(){        
        console.log("first set被触发")
    }
})

// 访问 test.name 第二次,触发 name 的 get
var a = test.name
// 独立访问 first 第一次
var b= a.first 
// 独立访问 first 第二次
b= a.first
// 独立改变 first
a.first = 5


能看到除了有两次需要访问到 name,必不可少会触发到 name 的 get

之后,当我们独立访问 name 内部的 first 的时,只会触发 first 的 get 函数,而 name 设置的 get 并不会被触发

结论
看上面的例子后,所以当你的 data 属性值是对象,比如下面的 info

data(){    

    return {        

        info:{ name:1 }

    }

}


此时,Vue在设置响应式数据的时候, 遇到值是对象的,会递归遍历,把对象内所有的属性都设置为响应式,就是每个属性都设置 get 和 set,于是每个属性都有自己的一个依赖收集器

首先,再次说明,watch初始化的时候,会先读取一遍监听数据的值

没有设置 deep
1、因为读取了监听的 data 的属性,watch 的 watcher 被收集在 这个属性的 收集器中

设置了 deep
1、因为读取了监听的data 的属性,watch 的 watcher 被收集在 这个属性的 收集器中

2、在读取 data 属性的时候,发现设置了 deep 而且值是一个对象,会递归遍历这个值,把内部所有属性逐个读取一遍,于是 属性和 它的对象值内每一个属性 都会收集到 watch 的 watcher

于是,无论对象嵌套多深的属性,只要改变了,会通知 相应的 watch 的 watcher 去更新,于是 你设置的 watch 回调就被触发了

实际证明
证明 watch 的 watcher 深度监听时是否被内部每个属性都收集

我在 Vue 内部给 watch 的 watcher 加了一个 属性,标识他是 watch 的 watcher,并且去掉了多余的属性,为了截图短一点
蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

标签: 【Vue原理】Watch - 白话版 « vue 移动端弹出键盘导致页面fixed布局错乱 | FY品牌官网/移动端视觉设计»


蓝蓝 http://www.bjhbys.com

  1. 2019年9月(22)
  2. 2019年8月(63)
  3. 帝皇彩票官网2019年7月(61)
  4. 2019年6月(59)
  5. 2019年5月(32)
  6. 2019年4月(37)
  7. 2019年3月(43)
  8. 2019年2月(26)
  9. 2019年1月(45)
  10. 2018年12月(41)
  11. 2018年11月(40)
  12. 帝皇彩票官网2018年10月(29)
  13. 2018年9月(40)
  14. 2018年8月(87)
  15. 2018年7月(107)
  16. 2018年6月(86)
  17. 帝皇彩票官网2018年5月(110)
  18. 2018年4月(40)
  19. 2018年3月(35)
  20. 2017年8月(35)
  21. 2017年7月(45)
  22. 2017年6月(7)
  23. 2017年5月(27)
  24. 帝皇彩票官网2017年4月(51)
  25. 2017年3月(70)
  26. 2017年2月(65)
  27. 2017年1月(69)
  28. 2016年12月(55)
  29. 2016年11月(111)
  30. 2016年10月(92)
  31. 2016年9月(53)
  32. 2016年8月(9)
  33. 2016年7月(4)
  34. 2016年6月(9)
  35. 帝皇彩票官网2016年3月(19)
  36. 2016年2月(26)
  37. 2016年1月(30)
  38. 2015年12月(33)
  39. 2015年11月(35)
  40. 2015年10月(46)
  41. 2015年9月(43)
  42. 2015年8月(40)
  43. 2015年7月(33)
  44. 2015年6月(46)
  45. 2015年5月(58)
  46. 2015年4月(70)
  47. 2015年3月(55)
  48. 帝皇彩票官网2015年2月(17)
  49. 2015年1月(33)
  50. 2014年12月(21)
  51. 2014年11月(84)
  52. 2014年10月(94)
  53. 2014年9月(6)
  54. 2014年8月(1)
  55. 2014年7月(13)
  56. 2014年6月(66)
  57. 2014年5月(99)
  58. 2014年4月(88)
  59. 2014年3月(102)
  60. 2014年2月(68)
  61. 2014年1月(83)
  62. 帝皇彩票官网2013年12月(106)
  63. 2013年11月(112)
  64. 2013年10月(61)
  65. 2013年9月(20)
  66. 2013年7月(13)
  67. 2013年6月(27)
  68. 2013年5月(48)
  69. 2013年4月(39)
  70. 2013年3月(8)
  71. 2013年2月(20)
  72. 2013年1月(31)
  73. 2012年12月(33)
  74. 2012年11月(31)
  75. 2012年10月(23)
  76. 2012年9月(8)
  77. 2012年7月(14)
  78. 2012年6月(15)
  79. 2012年5月(31)
  80. 2012年4月(24)
  81. 2012年2月(4)
  82. 2012年1月(8)
  83. 2011年12月(35)
  84. 2011年11月(32)
  85. 2011年10月(13)
  86. 2011年8月(1)
  87. 2011年6月(1)
订阅Rss
迪士尼彩乐园 桔子彩票网址 大象彩票登入 北京赛车pk10赔率最高的平台 博发彩票APP下载 帝皇彩票开奖 状元彩票计划 状元彩票计划 吉利彩票开奖 秒速快3