Vue 理解之白话 getter/setter详解


Posted in Javascript onApril 16, 2019

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器

 以上摘自 深入响应式原理

那么,把这些属性全部转为 getter/setter 具体是怎样一个过程呢?本文不深入具体,简单大致了解其过程,旨在整体把握,理解其主要思路

假设代码如下:

const vm = new Vue({
 el: '#app',
 data: {
 msg: 'hello world'
 }
})

data 选项可以接收一个对象或者方法,这里以对象为例(其实最后都会转为对象)

首先,这个对象的所有键值对都会被挂载在 vm._data 上(此外 vm._data 对象上还有个 __ob__ key,暂时可以忽视),这样我们便能用 vm._data.msg 访问到数据

但是通常我们是用 vm.msg 这样访问数据,如何做到的呢?其实就是做了个代理,将 data 键值对中的 vm[key] 的访问都代理到 vm._data[key] 上

proxy(vm, `_data`, key)

export function proxy (target: Object, sourceKey: string, key: string) {
 sharedPropertyDefinition.get = function proxyGetter () {
 return this[sourceKey][key]
 }
 sharedPropertyDefinition.set = function proxySetter (val) {
 this[sourceKey][key] = val
 }
 Object.defineProperty(target, key, sharedPropertyDefinition)
}

通常 vm._data (下划线变量)用作内部程序,对外暴露的 API 是 vm.$data,其实这两者也是一个东西,也是做了个代理,代码大概这样:

const dataDef = {}
dataDef.get = function () { return this._data }

Object.defineProperty(Vue.prototype, '$data', dataDef)

if (process.env.NODE_ENV !== 'production') {
 dataDef.set = function () {
 warn(
  'Avoid replacing instance root $data. ' +
  'Use nested data properties instead.',
  this
 )
 }
}

简单理解就是访问 vm.data.msg 其实就是访问 vm._data.msg。如果直接在开发环境对 vm.data = xxx这样的赋值,而不是vm.$data.msg = xxx` 这样的赋值,后者是没问题的)

至此,我们理解了为什么能用 vm.msg、vm._data.msg 以及 vm.$data.msg 三种方式获取/改变数据,最原始的数据是 vm._data.msg,而另外两者即代理了 _data 的数据,vm.$data.msg 即为 Vue 向外提供的 API,一般情况下开发我们直接用 vm.msg 这样比较多,也方便,如果要获取整个 data,程序中需要用 this.$data,而不是 this.data

接下来说 getter/setter

将 demo 稍微添点东西:

const vm = new Vue({
 el: '#app',
 data: {
 msg: 'hello world'
 },
 computed: {
 msg2() {
  return this.msg + '123'
 }
 }
})

msg2 是依赖于 msg 的,当 msg 改变的时候,msg2 的值需要自动更新,msg 的改变可以在 vm._data.msg 的 setter 中监听到,但是怎么知道 msg2 是依赖于 msg 的呢?

直观地我们可以想到,遍历所有 computed 对象的键值对,然后进行分析,理论上似乎可行,但是我寻思着这可能需要解析 AST 啊,或者正则去匹配,看看是否用到了 this.msg,也可能是 this.$data.msg 啊,还可能是 this._data.msg,而且还要遍历 data 中的所有 key,这看起来也太麻烦了吧,而且,如果程序中没有用到 msg2,那不是多此一举了?

事实上,Vue 初始化的时候会对 vm._data 的每个键值对设置 getter/setter,大概代码如下:

// obj 即为 vm._data
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
 defineReactive(obj, keys[i])
}

Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: function reactiveGetter () {
 const value = getter ? getter.call(obj) : val
 if (Dep.target) {
  dep.depend()
  if (childOb) {
  childOb.dep.depend()
  if (Array.isArray(value)) {
   dependArray(value)
  }
  }
 }
 return value
 },
 set: function reactiveSetter (newVal) {
 const value = getter ? getter.call(obj) : val
 /* eslint-disable no-self-compare */
 if (newVal === value || (newVal !== newVal && value !== value)) {
  return
 }
 /* eslint-enable no-self-compare */
 if (process.env.NODE_ENV !== 'production' && customSetter) {
  customSetter()
 }
 // #7981: for accessor properties without setter
 if (getter && !setter) return
 if (setter) {
  setter.call(obj, newVal)
 } else {
  val = newVal
 }
 childOb = !shallow && observe(newVal)
 dep.notify()
 }
})

Vue 响应式核心就是,setter 的时候会收集依赖,getter 的时候会触发依赖更新

我们还是以上面的 computed msg2 为例,当我们第一次去取值 msg2 时(注意,必须是取值行为,可以是在 template,也可以是程序中),势必需要去取值 this.msg,这就会触发 msg 的 getter,此时我们就可以确定 msg2 依赖于 msg

msg 可以被哪些东西依赖呢?目前看来有三

  1. template 模版中
  2. computed
  3. watch

我们可以打印 vm._watchers 查看,是一个 Watcher 实例数组,直接看实例的 expression 值,其实就是触发这个表达式的时候,会触发 msg 的 getter

而这个表达式就对应上述的三种情况,因为 msg 改变的时候,这些表达式需要重新求值,所以这些依赖项都要保存起来,所以源码中定于了这个 Watcher 类

A watcher parses an expression, collects dependencies, and fires callback when the expression value changes. This is used for both the $watch() api and directives.

 watcher.deps 数组表示该 watcher 的依赖项,值为 Dep 实例,可以理解成和 Watcher 实例的表达式有关的 data 数据。注意,deps 数组可能是空,对于 template 而言,可以是 template 中不依赖于 data,对于 computed 而言,可以是这个 computed 数据还没被获取(比如我定义了 msg2,但是程序中没有用,这时 deps 为空,这表明我如果改变了 msg,但是不需要通知到 msg2,因为 msg2 根本没用到嘛,但是我在控制台输入 vm.msg2,从而触发了 msg 的 getter,继而进行了依赖收集,这时 deps 就不为空了,这表明我已经使用了 msg2,下次 msg 更新时需要通知到 msg2 进行改变)

而对于 watch 而言,我试了下任何情况下 deps 都不为空,这需要进一步查看源码确认

deps 数组元素是 Dep 实例,该实例有个 subs 属性,是 Watcher 实例数组,表示依赖于这个 Dep 的项目

Watcher 和 Dep 比较难理解,可以暂时这样理解,Dep 和 data 挂钩,每一个 Dep 实例就对应 data 的一个键值对,Watcher 实例则依赖于 Dep,那么有三个情况会依赖,也就是以上三种(想想是不是这样,当数据更新的时候,是不是只有这三处需要同时更新,或者同时响应)

总结下:我们会对 data 中所有键值对设置 getter/setter,getter 的时候我们会收集依赖(依赖项为上面三项,并不是任何情况下都会收集依赖,比如在钩子中打印 msg,这时候就没依赖,所以源码中这里还有复杂判断),setter 的时候我们会将收集的依赖项触发,从而更新数据,理解了这些,就能初步理解 Vue 的响应式原理

以上所述是小编给大家介绍的Vue getter setter详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
在vue中使用setInterval的方法示例
Apr 16 #Javascript
vue实现局部刷新的实现示例
Apr 16 #Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 #Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 #Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 #Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 #Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 #Javascript
You might like
十天学会php之第六天
2006/10/09 PHP
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
JavaScript使用cookie
2007/02/02 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
Python反射和内置方法重写操作详解
2018/08/27 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
python selenium循环登陆网站的实现
2019/11/04 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
销售副总经理岗位职责
2013/12/11 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
售房协议书
2014/08/19 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android