浅谈Vue数据响应

Vue 中可以用 $watch 实例方法观察一个字段,当该字段的值发生变化时,会执行指定的回调函数(即观察者),实际上和 watch 选项作用相同。如下:

vm.$watch('box', () => {
  console.log('box变了')
})
vm.box = 'newValue' // 'box变了'

以上例切入,我想实现一个功能类似的方法 myWatch。

如何知道我观察的属性被修改了?

—— Object.defineProperty 方法

该方法可以为指定对象的指定属性设置 getter-setter 函数对,通过这对 getter-setter 可以捕获到对属性的读取和修改操作。示例如下:

const data = {
 box: 1
}
Object.defineProperty(data, 'box', {
 set () {
  console.log('修改了 box')
 },
 get () {
  console.log('读取了 box')
 }
})

console.log(data.box) // '读取了 box'
           // undefined
data.box = 2  // '修改了 box'
console.log(data.box) // '读取了 box'
           // undefined

如此,便拦截到了对 box 属性的修改和读取操作。

但 res 为 undefined,data.box = 2 的修改操作也无效。

get 与 set 函数功能不健全

故修改如下:

const data = {
 box: 1
}
let value = data.box
Object.defineProperty(data, 'box', {
 set (newVal) {
  if (newVal === value) return
  value = newVal
  console.log('修改了 box')
 },
 get () {
  console.log('读取了 box')
  return value
 }
})

console.log(data.box) // '读取了 box'
           // 1

data.box = 2 // '修改了 box'
console.log(data.box) // '读取了 box'
           // 2

有了这些, myWatch 方法便可实现如下:

const data = {
 box: 1
}
function myWatch(key, fn) {
 let value = data[key]
 Object.defineProperty(data, key, {
  set (newVal) {
   if (newVal === value) return
   value = newVal
   fn()
  },
  get () {
   return value
  }
 })
}
myWatch('box', () => {
  console.log('box变了')
})

data.box = 2 // 'box变了'

但存在一个问题,不能给同一属性添加多个依赖(观察者):

myWatch('box', () => {
 console.log('我是观察者')
})
myWatch('box', () => {
 console.log('我是另一个观察者')
})

data.box = 2 // '我是另一个观察者'

后面的依赖(观察者)会将前者覆盖掉。

如何能够添加多个依赖(观察者)?

—— 定义一个数组,作为依赖收集器:

const data = {
 box: 1
}
const dep = []
function myWatch(key, fn) {
 dep.push(fn)
 let value = data[key]
 Object.defineProperty(data, key, {
  set (newVal) {
   if (newVal === value) return
   value = newVal
   dep.forEach((f) => {
    f()
   })
  },
  get () {
   return value
  }
 })
}

myWatch('box', () => {
 console.log('我是观察者')
})
myWatch('box', () => {
 console.log('我是另一个观察者')
})

data.box = 2 // '我是观察者'
       // '我是另一个观察者'

修改 data.box 后,两个依赖(观察者)都执行了。

若上例 data 对象需新增两个能够响应数据变化的属性 foo bar:

const data = {
 box: 1,
 foo: 1,
 bar: 1
}

只需执行以下代码即可:

myWatch('foo', () => {
 console.log('我是foo的观察者')
})
myWatch('bar', () => {
 console.log('我是bar的观察者')
})

但问题是,不同属性的依赖(观察者)都被收集进了同一个 dep,修改任何一个属性,都会触发所有的依赖(观察者):

data.box = 2 // '我是观察者'
       // '我是另一个观察者'
       // '我是foo的观察者'
       // '我是bar的观察者'

我想可以这样解决:

const data = {
 box: 1,
 foo: 1,
 bar: 1
}
const dep = {}
function myWatch(key, fn) {
 if (!dep[key]) {
  dep[key] = [fn]
 } else {
  dep[key].push(fn)
 }
 let value = data[key]
 Object.defineProperty(data, key, {
  set (newVal) {
   if (newVal === value) return
   value = newVal
   dep[key].forEach((f) => {
    f()
   })
  },
  get () {
   return value
  }
 })
}

myWatch('box', () => {
 console.log('我是box的观察者')
})
myWatch('box', () => {
 console.log('我是box的另一个观察者')
})
myWatch('foo', () => {
 console.log('我是foo的观察者')
})
myWatch('bar', () => {
 console.log('我是bar的观察者')
})

data.box = 2 // '我是box的观察者'
       // '我是box的另一个观察者'
data.foo = 2 // '我是foo的观察者'
data.bar = 2 // '我是bar的观察者'

但实际上这样更好些:

const data = {
 box: 1,
 foo: 1,
 bar: 1
}
let target = null
for (let key in data) {
 const dep = []
 let value = data[key]
 Object.defineProperty(data, key, {
  set (newVal) {
   if (newVal === value) return
   value = newVal
   dep.forEach(f => {
    f()
   })
  },
  get () {
   dep.push(target)
   return value
  }
 })
}
function myWatch(key, fn) {
 target = fn
 data[key]
}
myWatch('box', () => {
 console.log('我是box的观察者')
})
myWatch('box', () => {
 console.log('我是box的另一个观察者')
})
myWatch('foo', () => {
 console.log('我是foo的观察者')
})
myWatch('bar', () => {
 console.log('我是bar的观察者')
})

data.box = 2 // '我是box的观察者'
       // '我是box的另一个观察者'
data.foo = 2 // '我是foo的观察者'
data.bar = 2 // '我是bar的观察者'

声明 target 全局变量作为依赖(观察者)的中转站,myWatch 函数执行时用 target 缓存依赖,然后调用 data[key] 触发对应的 get 函数以收集依赖,set 函数被触发时会将 dep 里的依赖(观察者)都执行一遍。这里的 get set 函数形成闭包引用了上面的 dep 常量,这样一来,data 对象的每个属性都有了对应的依赖收集器。

且这一实现方式不需要通过 myWatch 函数显式地将 data 里的属性一一转为访问器属性。

但运行以下代码,会发现仍有问题:

console.log(data.box)
data.box = 2 // '我是box的观察者'
       // '我是box的另一个观察者'
       // '我是bar的观察者'

四个 myWatch 执行完之后 target 缓存的值变成了最后一个 myWatch 方法调用时所传递的依赖(观察者),故执行 console.log(data.box) 读取 box 属性的值时,会将最后缓存的依赖存入 box 属性所对应的依赖收集器,故而再修改 box 的值时,会打印出 '我是bar的观察者'。

我想可以在每次收集完依赖之后,将全局变量 target 设置为空函数来解决这问题:

const data = {
 box: 1,
 foo: 1,
 bar: 1
}
let target = null
for (let key in data) {
 const dep = []
 let value = data[key]
 Object.defineProperty(data, key, {
  set (newVal) {
   if (newVal === value) return
   value = newVal
   dep.forEach(f => {
    f()
   })
  },
  get () {
   dep.push(target)
   target = () => {}
   return value
  }
 })
}
function myWatch(key, fn) {
 target = fn
 data[key]
}
myWatch('box', () => {
 console.log('我是box的观察者')
})
myWatch('box', () => {
 console.log('我是box的另一个观察者')
})
myWatch('foo', () => {
 console.log('我是foo的观察者')
})
myWatch('bar', () => {
 console.log('我是bar的观察者')
})

经测无误。

但开发过程中,还常碰到需观测嵌套对象的情形:

const data = {
 box: {
  gift: 'book'
 }
}

这时,上述实现未能观测到 gift 的修改,显出不足。

如何进行深度观测?

——递归

通过递归将各级属性均转为响应式属性即可:

const data = {
 box: {
  gift: 'book'
 }
}
let target = null
function walk(data) {
 for (let key in data) {
  const dep = []
  let value = data[key]
  if (Object.prototype.toString.call(value) === '[object Object]') {
   walk(value)
  }
  Object.defineProperty(data, key, {
   set (newVal) {
    if (newVal === value) return
    value = newVal
    dep.forEach(f => {
     f()
    })
   },
   get () {
    dep.push(target)
    target = () => {}
    return value
   }
  })
 }
}
walk(data)
function myWatch(key, fn) {
 target = fn
 data[key]
}

myWatch('box', () => {
 console.log('我是box的观察者')
})
myWatch('box.gift', () => {
 console.log('我是gift的观察者')
})

data.box = {gift: 'basketball'} // '我是box的观察者'
data.box.gift = 'guitar'

这时 gift 虽已是访问器属性,但 myWatch 方法执行时 data[box.gift] 未能触发相应 getter 以收集依赖, data[box.gift] 访问不到 gift 属性,data[box][gift] 才可以,故 myWatch 须改写如下:

function myWatch(exp, fn) {
 target = fn
 let pathArr,
   obj = data
 if (/\./.test(exp)) {
  pathArr = exp.split('.')
  pathArr.forEach(p => {
   obj = obj[p]
  })
  return
 }
 data[exp]
}

如果要读取的字段包括 . ,那么按照 . 将其分为数组,然后使用循环读取嵌套对象的属性值。

这时执行代码后发现,data.box.gift = 'guitar' 还是未能触发相应的依赖,即打印出 '我是gift的观察者' 这句信息。调试之后找到问题:

myWatch('box.gift', () => {
 console.log('我是gift的观察者')
})

执行以上代码时,pathArr 即 ['box', 'gift'],循环内 obj = obj[p] 实际上就是 obj = data[box],读取了一次 box,触发了 box 对应的 getter,收集了依赖:

() => {
 console.log('我是gift的观察者')
}

收集完将全局变量 target 置为空函数,而后,循环继续执行,又读取了 gift 的值,但这时,target 已是空函数,导致属性 gift 对应的 getter 收集了一个“空依赖”,故,data.box.gift = 'guitar' 的操作不能触发期望的依赖。

以上代码有两个问题:

  • 修改 box 会触发“我是gift的观察者”这一依赖
  • 修改 gift 未能触发“我是gift的观察者”的依赖

第一个问题,读取 gift 时,必然经历读取 box 的过程,故触发 box 对应的 getter 无可避免,那么,box 对应 getter 收集 gift 的依赖也就无可避免。但想想也算合理,因为 box 修改时,隶属于 box 的 gift 也算作修改,从这一点看,问题一也不算作问题,划去。

第二个问题,我想可以这样解决:

function myWatch(exp, fn) {
 let pathArr,
   obj = data
 if (/\./.test(exp)) {
  pathArr = exp.split('.')
  pathArr.forEach(p => {
   target = fn
   obj = obj[p]
  })
  return
 }
 target = fn
 data[exp]
}

data.box.gift = 'guitar' // '我是gift的观察者'
data.box = {gift: 'basketball'} // '我是box的观察者'
                // '我是gift的观察者'

保证属性读取时 target = fn 即可。

那么:

const data = {
 box: {
  gift: 'book'
 }
}
let target = null
function walk(data) {
 for (let key in data) {
  const dep = []
  let value = data[key]
  if (Object.prototype.toString.call(value) === '[object Object]') {
   walk(value)
  }
  Object.defineProperty(data, key, {
   set (newVal) {
    if (newVal === value) return
    value = newVal
    dep.forEach(f => {
     f()
    })
   },
   get () {
    dep.push(target)
    target = () => {}
    return value
   }
  })
 }
}
walk(data)
function myWatch(exp, fn) {
 let pathArr,
   obj = data
 if (/\./.test(exp)) {
  pathArr = exp.split('.')
  pathArr.forEach(p => {
   target = fn
   obj = obj[p]
  })
  return
 }
 target = fn
 data[exp]
}

myWatch('box', () => {
 console.log('我是box的观察者')
})
myWatch('box.gift', () => {
 console.log('我是gift的观察者')
})

现在我想,假如我有以下数据:

const data = {
 player: 'James Harden',
 team: 'Houston Rockets'
}

执行以下代码:

function render() {
 document.body.innerText = `The last season's MVP is ${data.player}, he's from ${data.team}`
}
render()
myWatch('player', render)
myWatch('team', render)

data.player = 'Kobe Bryant'
data.team = 'Los Angeles Lakers'

是不是就可以将数据映射到页面,并响应数据的变化?

执行代码发现,data.player = 'Kobe Bryant' 报错,究其原因,render 方法执行时,会去获取 data.player 和 data.team 的值,但此时,target 为 null,那么读取 player 时对应的依赖收集器 dep 便收集了 null,导致 player 的 setter 调用依赖时报错。

那么我想,在 render 执行时便主动去收集依赖,就不会导致 dep 里收集了 null。

细看 myWatch,这方法做的事情其实就是帮助 getter 收集依赖,它的第一个参数就是要访问的属性,要触发谁的 getter,第二个参数是相应要收集的依赖。

这么看来,render 方法既可以帮助 getter 收集依赖(render 执行时会读取 player team),而且它本身就是要收集的依赖。那么,我能不能修改一下 myWatch 的实现,以支持这样的写法:

myWatch(render, render)

第一个参数作为函数执行一下便有了之前第一个参数的作用,第二个参数还是需要被收集的依赖,嗯,想来合理。

那么,myWatch 改写如下:

function myWatch(exp, fn) {
 target = fn
 if (typeof exp === 'function') {
  exp()
  return
 }
 let pathArr,
   obj = data
 if (/\./.test(exp)) {
  pathArr = exp.split('.')
  pathArr.forEach(p => {
   target = fn
   obj = obj[p]
  })
  return
 }
 data[exp]
}

但,对 team 的修改未能触发页面更新,想来因为 render 执行读取 player 收集依赖后 target 变为空函数,导致读取 team 收集依赖时收集到了空函数。这里大家的依赖都是 render,故可将 target = () => {} 这句删去。

myWatch 这样实现还有个好处,假如 data 中有许多属性都需要通过 render 渲染至页面,一句 myWatch(render, render) 便可,无须如此这般繁复:

myWatch('player', render)
myWatch('team', render)
myWatch('number', render)
myWatch('height', render)
...

那么最终:

const data = {
 player: 'James Harden',
 team: 'Houston Rockets'
}
let target = null
function walk(data) {
 for (let key in data) {
  const dep = []
  let value = data[key]
  if (Object.prototype.toString.call(value) === '[object Object]') {
   walk(value)
  }
  Object.defineProperty(data, key, {
   set (newVal) {
    if (newVal === value) return
    value = newVal
    dep.forEach(f => {
     f()
    })
   },
   get () {
    dep.push(target)
    return value
   }
  })
 }
}
walk(data)
function myWatch(exp, fn) {
 target = fn
 if (typeof exp === 'function') {
  exp()
  return
 }
 let pathArr,
   obj = data
 if (/\./.test(exp)) {
  pathArr = exp.split('.')
  pathArr.forEach(p => {
   target = fn
   obj = obj[p]
  })
  return
 }
 data[exp]
}
function render() {
 document.body.innerText = `The last season's MVP is ${data.player}, he's from ${data.team}`
}

myWatch(render, render)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 谈谈对vue响应式数据更新的误解

    对于刚接触vue的同学会经常遇到数据更新了但是模板没有更新的问题,下面将结合vue的响应式特性以及异步更新机制分析常见的错误: 异步更新带来的数据响应式误解 异步数据的处理基本是一定会遇到的,处理不好就会遇到数据不更新的问题,但有一种情况是在未正确处理的情况下也能正常更新,这就会造成一种误解,详情如下所示: 模板 <div id="app"> <h2>{{dataObj.text}}</h2> </div> js new Vue({ el

  • Vue实现动态响应数据变化

    Vue是MVVM模式,即Model-View-ViewModel,通过绑定数据即可以实时改变视图显示. 比如:使用v-blink动态绑定属性 <div v-blink:class="property"></div> 使用v-html来绑定带有标签的内容(会解析标签) <div v-blink:class="property" v-html="content"></div> 使用v-text来绑定纯文

  • Vue.js实现数据响应的方法

    许多前端JavaScript框架(例如Angular,React和Vue)都有自己的数据相应引擎.通过了解相应性及其工作原理,您可以提高开发技能并更有效地使用JavaScript框架.在视频和下面的文章中,我们构建了您在Vue源代码中看到的相同类型的Reactivity. 如果您观看此视频而不是阅读文章,请观看系列中的下一个视频,与Vue的创建者Evan You讨论反应性和代理.

  • vue.js实现数据动态响应 Vue.set的简单应用

    在vue里面,我们操作最多的就是各种数据,在jquery里面,我们习惯通过下标定向找到数据,然后重新赋值 比如var a[0]=111;(希望上家公司原谅菜鸟的我写了不少这样的代码) 下面上代码 <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.min.js

  • 浅谈Vue 数据响应式原理

    前言 Vue的数据响应主要是依赖了Object.defineProperty(),那么整个过程是怎么样的呢?以我们自己的想法来走Vue的道路,其实也就是以Vue的原理为终点,我们来逆推一下实现过程. 本文代码皆为低配版本,很多地方都不严谨,比如 if(typeof obj === 'object')这是在判断obj是否为为一个对象,虽然obj也有可能是数组等其他类型的数据,但是本文为了简便,就直接这样写来表示判断对象,对于数组使用Array.isArray(). 改造数据 我们先来尝试写一个函数

  • Vue.set()实现数据动态响应的方法

    在vue里面,我们操作最多的就是各种数据,在jquery里面,我们习惯通过下标定向找到数据,然后重新赋值 比如var a[0]=111;(希望上家公司原谅菜鸟的我写了不少这样的代码

  • Vue实现双向绑定的原理以及响应式数据的方法

    一.vue中的响应式属性 Vue中的数据实现响应式绑定 1.对象实现响应式: 是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep.notify进行发布通知,实现视图的更新. 2.数组实现响应式: 对于数组则是通过继承重写数组的方法splice.pop.push.shift.unshift.sort.reverse.等可以修改原数组的方式实现响应式的,但是通过length以及直接

  • 浅谈Vue数据响应思路之数组

    之前梳理Vue数据响应思路时没有考虑数组的情况. js 中数组有很多实例方法,其中有一部分会改变数组本身的值,比如 push pop shift unshift 等,这些方法被称为变异方法,这些变异方法也是 Vue 开发中常用的数组操作方法.那么要实现对数组的观测,首先要考虑的就是如何截获这些变异方法的调用. 简单来说,Vue 是通过保持这些数组变异方法原有功能不变的前提下,对其功能进行扩展来实现拦截的.具体怎么操作,可以先看一下例子: function add10(num) { return

  • 浅谈Vue数据响应

    Vue 中可以用 $watch 实例方法观察一个字段,当该字段的值发生变化时,会执行指定的回调函数(即观察者),实际上和 watch 选项作用相同.如下: vm.$watch('box', () => { console.log('box变了') }) vm.box = 'newValue' // 'box变了' 以上例切入,我想实现一个功能类似的方法 myWatch. 如何知道我观察的属性被修改了? -- Object.defineProperty 方法 该方法可以为指定对象的指定属性设置 g

  • 浅谈Vue的响应式原理

    一.响应式的底层实现 1.Vue与MVVM Vue是一个 MVVM框架,其各层的对应关系如下 View层:在Vue中是绑定dom对象的HTML ViewModel层:在Vue中是实例的vm对象 Model层:在Vue中是data.computed.methods等中的数据 在 Model 层的数据变化时,View层会在ViewModel的作用下,实现自动更新 2.Vue的响应式原理 Vue响应式底层实现方法是 Object.defineProperty() 方法,该方法中存在一个getter和s

  • 浅谈Vue使用Cascader级联选择器数据回显中的坑

    业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问题如下: 1.由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显,如何自动全部加载已选择类目的相关节点数据: 2.提前加载数据后,点击相应父级节点出现数据重复等: 3.使用多个数据源相同的级联选择器,产生只能成功响应一个加载子级节点数据: 4.Vue中级联选择器相应数据完成加载,依

  • 浅谈vue单一组件下动态修改数据时的全部重渲染

    今天在学习vue的过程中,发现一个有趣的现象. 在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定.可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化 这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????脑洞放开一想,会不会数据在双向同步的时候,发生了什么,比如.是不是只要有一个节点变了,node都重新进行了加载??? 我想这其中的缘由必定

  • 浅谈Vue.js之初始化el以及数据的绑定说明

    1.初始化el 2.数据绑定说明 3.监听值的变化 以上这篇浅谈Vue.js之初始化el以及数据的绑定说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 浅谈vue异步数据影响页面渲染

    今天遇到一个问题,要保证页面渲染前请求的数据已经得到了 由于user是在异步请求之后保存在session中,而在页面渲染时session中还没有user,页面直接报错. 因此我希望能在所有请求都得到后再去做页面的渲染. 1.先把id为app的div用v-if="appShow",定义appShow为false进行隐藏,避免渲染 2.写计数器,每1ms进行一次查询,如果session中已经有user,删除过滤器,移除滤布,appShow为true,开始渲染页面,这样可以保证页面的正常渲染

  • 浅谈vue获得后台数据无法显示到table上面的坑

    因为刚学vue然后自己自习了一下axios,然后想写一个简单的查询后台数据 <tr v-for=" user in uList"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.gender}}</td> </td> </tr> 然后先是写了这样一个代码 created: function () { axios.ge

  • 浅谈vue生命周期共有几个阶段?分别是什么?

    一共8个阶段 1.beforeCreate(创建前) 2.created(创建后) 3.beforeMount(载入前) 4.mounted(载入后) 5.beforeUpdate(更新前) 6.updated(更新后) 7.beforeDestroy(销毁前) 8.destroyed(销毁后) vue第一次页面加载会触发哪几个钩子函数? beforeCreate.created.beforeMount.mounted DOM 渲染在哪个周期中就已经完成? mounted 补充知识:记录一次vu

随机推荐