深入理解vue响应式原理

【稿件】前言

创新互联建站不只是一家网站建设的网络公司；我们对营销、技术、服务都有自己独特见解，公司采取“创意+综合+营销”一体化的方式为您提供更专业的服务！我们经历的每一步也许不一定是最完美的，但每一步都有值得深思的意义。我们珍视每一份信任，关注我们的网站制作、成都网站制作质量和服务品质，在得到用户满意的同时，也能得到同行业的专业认可，能够为行业创新发展助力。未来将继续专注于技术创新，服务升级，满足企业一站式营销型网站需求，让再小的品牌网站制作也能产生价值！

Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。----官方文档 本文将针对响应式原理做一个详细介绍，并且带你实现一个基础版的响应式系统。本文的代码请猛戳Github博客

什么是响应式

我们先来看个例子：

  
 
 
 
       
  
  
  
  1.  
    2.    
  
  
  
  2.     
    Price :￥{{ price }}
     
    3.    
  
  
  
  3.     
    Total:￥{{ price * quantity }}
     
    4.    
  
  
  
  4.     
    Taxes: ￥{{ totalPriceWithTax }}
     
    5.    
  
  
  
  5.     改变价格 
    6.
  
  
 
 
 
       
  
  
  
  1. var app = new Vue({ 
    2.    
  
  
  
  2.   el: '#app', 
    3.    
  
  
  
  3.   data() { 
    4.    
  
  
  
  4.     return { 
    5.    
  
  
  
  5.       price: 5.0, 
    6.    
  
  
  
  6.       quantity: 2 
    7.    
  
  
  
  7.     }; 
    8.    
  
  
  
  8.   }, 
    9.    
  
  
  
  9.   computed: { 
    10.    
  
  
  
  10.     totalPriceWithTax() { 
    11.    
  
  
  
  11.       return this.price * this.quantity * 1.03; 
    12.    
  
  
  
  12.     } 
    13.    
  
  
  
  13.   }, 
    14.    
  
  
  
  14.   methods: { 
    15.    
  
  
  
  15.     changePrice() { 
    16.    
  
  
  
  16.       this.price = 10; 
    17.    
  
  
  
  17.     } 
    18.    
  
  
  
  18.   } 
    19.    
  
  
  
  19. }) 
    20.

上例中当price 发生变化的时候，Vue就知道自己需要做三件事情：

发生变化后，会重新对页面渲染，这就是Vue响应式，那么这一切是怎么做到的呢?

想完成这个过程，我们需要：

对应专业俗语分别是：

如何侦测数据的变化

首先有个问题，在Javascript中，如何侦测一个对象的变化? 其实有两种办法可以侦测到变化：使用Object.defineProperty和ES6的Proxy，这就是进行数据劫持或数据代理。这部分代码主要参考珠峰架构课。

方法1.Object.defineProperty实现

Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。

 
 
 
 
      
  
  
  
  1. function render () { 
    2.   
  
  
  
  2. console.log('模拟视图渲染') 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4. let data = { 
    5.   
  
  
  
  5. name: '浪里行舟', 
    6.   
  
  
  
  6. location: { x: 100, y: 100 } 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8. observe(data) 
    9.   
  
  
  
  9. function observe (obj) { 
    10.   
  
  
  
  10. // 判断类型 
    11.   
  
  
  
  11. if (!obj || typeof obj !== 'object') { 
    12.   
  
  
  
  12. return 
    13.   
  
  
  
  13. } 
    14.   
  
  
  
  14. Object.keys(obj).forEach(key => { 
    15.   
  
  
  
  15. defineReactive(obj, key, obj[key]) 
    16.   
  
  
  
  16. }) 
    17.   
  
  
  
  17. function defineReactive (obj, key, value) { 
    18.   
  
  
  
  18. // 递归子属性 
    19.   
  
  
  
  19. observe(value) 
    20.   
  
  
  
  20. Object.defineProperty(obj, key, { 
    21.   
  
  
  
  21. enumerable: true, //可枚举(可以遍历) 
    22.   
  
  
  
  22. configurable: true, //可配置(比如可以删除) 
    23.   
  
  
  
  23. get: function reactiveGetter () { 
    24.   
  
  
  
  24. console.log('get', value) // 监听 
    25.   
  
  
  
  25. return value 
    26.   
  
  
  
  26. }, 
    27.   
  
  
  
  27. set: function reactiveSetter (newVal) {  
    28.   
  
  
  
  28. observe(newVal) //如果赋值是一个对象，也要递归子属性  
    29.   
  
  
  
  29. if (newVal !== value) { 
    30.   
  
  
  
  30. console.log('set', newVal) // 监听 
    31.   
  
  
  
  31. render()  
    32.   
  
  
  
  32. value = newVal  
    33.   
  
  
  
  33. } 
    34.   
  
  
  
  34. }  
    35.   
  
  
  
  35. })  
    36.   
  
  
  
  36. }  
    37.   
  
  
  
  37. }  
    38.   
  
  
  
  38. data.location = {  
    39.   
  
  
  
  39. x: 1000,  
    40.   
  
  
  
  40. y: 1000  
    41.   
  
  
  
  41. } //set {x: 1000,y: 1000} 模拟视图渲染  
    42.   
  
  
  
  42. data.name // get 浪里行舟 
    43.

几个注意点补充说明：

这是因为 Vue 通过Object.defineProperty来将对象的key转换成getter/setter的形式来追踪变化，但getter/setter只能追踪一个数据是否被修改，无法追踪新增属性和删除属性。如果是删除属性，我们可以用vm.$delete实现，那如果是新增属性，该怎么办呢? 1)可以使用 Vue.set(location, a, 1) 方法向嵌套对象添加响应式属性; 2)也可以给这个对象重新赋值，比如data.location = {...data.location,a:1}

 
 
 
 
      
  
  
  
  1. function render() { 
    2.   
  
  
  
  2. console.log('模拟视图渲染') 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4. let obj = [1, 2, 3] 
    5.   
  
  
  
  5. let methods = ['pop', 'shift', 'unshift', 'sort', 'reverse', 'splice', 'push'] 
    6.   
  
  
  
  6. // 先获取到原来的原型上的方法 
    7.   
  
  
  
  7. let arrayProto = Array.prototype 
    8.   
  
  
  
  8. // 创建一个自己的原型 并且重写methods这些方法 
    9.   
  
  
  
  9. let proto = Object.create(arrayProto)  
    10.   
  
  
  
  10. methods.forEach(method => {  
    11.   
  
  
  
  11. proto[method] = function() {  
    12.   
  
  
  
  12. // AOP  
    13.   
  
  
  
  13. arrayProto[method].call(this, ...arguments) 
    14.   
  
  
  
  14. render()  
    15.   
  
  
  
  15. }  
    16.   
  
  
  
  16. }) 
    17.   
  
  
  
  17. function observer(obj) {  
    18.   
  
  
  
  18. // 把所有的属性定义成set/get的方式  
    19.   
  
  
  
  19. if (Array.isArray(obj)) {  
    20.   
  
  
  
  20. obj.__proto__ = proto  
    21.   
  
  
  
  21. return  
    22.   
  
  
  
  22. }  
    23.   
  
  
  
  23. if (typeof obj == 'object') {  
    24.   
  
  
  
  24. for (let key in obj) {  
    25.   
  
  
  
  25. defineReactive(obj, key, obj[key])  
    26.   
  
  
  
  26. }  
    27.   
  
  
  
  27. }  
    28.   
  
  
  
  28. }  
    29.   
  
  
  
  29. function defineReactive(data, key, value) {  
    30.   
  
  
  
  30. observer(value)  
    31.   
  
  
  
  31. Object.defineProperty(data, key, {  
    32.   
  
  
  
  32. get() {  
    33.   
  
  
  
  33. return value  
    34.   
  
  
  
  34. },  
    35.   
  
  
  
  35. set(newValue) { 
    36.   
  
  
  
  36. observer(newValue) 
    37.   
  
  
  
  37. if (newValue !== value) {  
    38.   
  
  
  
  38. render()  
    39.   
  
  
  
  39. value = newValue  
    40.   
  
  
  
  40. } 
    41.   
  
  
  
  41. }  
    42.   
  
  
  
  42. })  
    43.   
  
  
  
  43. }  
    44.   
  
  
  
  44. observer(obj)  
    45.   
  
  
  
  45. function $set(data, key, value) { 
    46.   
  
  
  
  46. defineReactive(data, key, value)  
    47.   
  
  
  
  47. }  
    48.   
  
  
  
  48. obj.push(123, 55)  
    49.   
  
  
  
  49. console.log(obj) //[1, 2, 3, 123, 55] 
    50.

这种方法将数组的常用方法进行重写，进而覆盖掉原生的数组方法，重写之后的数组方法需要能够被拦截。但有些数组操作Vue时拦截不到的，当然也就没办法响应，比如：

 
 
 
 
      
  
  
  
  1. obj.length-- // 不支持数组的长度变化 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. obj[0]=1 // 修改数组中***个元素，也无法侦测数组的变化 
    4.

ES6提供了元编程的能力，所以有能力拦截，Vue3.0可能会用ES6中Proxy 作为实现数据代理的主要方式。

方法2.Proxy实现

Proxy 是 JavaScript 2015 的一个新特性。Proxy 的代理是针对整个对象的，而不是对象的某个属性，因此不同于 Object.defineProperty 的必须遍历对象每个属性，Proxy 只需要做一层代理就可以监听同级结构下的所有属性变化，当然对于深层结构，递归还是需要进行的。此外**Proxy支持代理数组的变化。**

 
 
 
 
      
  
  
  
  1. function render() {  
    2.   
  
  
  
  2. console.log('模拟视图的更新')  
    3.   
  
  
  
  3. }  
    4.   
  
  
  
  4. let obj = {  
    5.   
  
  
  
  5. name: '前端工匠',  
    6.   
  
  
  
  6. age: { age: 100 },  
    7.   
  
  
  
  7. arr: [1, 2, 3]  
    8.   
  
  
  
  8. }  
    9.   
  
  
  
  9. let handler = { 
    10.   
  
  
  
  10. get(target, key) { 
    11.   
  
  
  
  11. // 如果取的值是对象就在对这个对象进行数据劫持  
    12.   
  
  
  
  12. if (typeof target[key] == 'object' && target[key] !== null) { 
    13.   
  
  
  
  13. return new Proxy(target[key], handler)  
    14.   
  
  
  
  14. } 
    15.   
  
  
  
  15. return Reflect.get(target, key)  
    16.   
  
  
  
  16. },  
    17.   
  
  
  
  17. set(target, key, value) {  
    18.   
  
  
  
  18. if (key === 'length') return true  
    19.   
  
  
  
  19. render()  
    20.   
  
  
  
  20. return Reflect.set(target, key, value)  
    21.   
  
  
  
  21. }  
    22.   
  
  
  
  22. }  
    23.   
  
  
  
  23. let proxy = new Proxy(obj, handler)  
    24.   
  
  
  
  24. proxy.age.name = '浪里行舟' // 支持新增属性  
    25.   
  
  
  
  25. console.log(proxy.age.name) // 模拟视图的更新 浪里行舟  
    26.   
  
  
  
  26. proxy.arr[0] = '浪里行舟' //支持数组的内容发生变化 
    27.   
  
  
  
  27. console.log(proxy.arr) // 模拟视图的更新 ['浪里行舟', 2, 3 ] 
    28.   
  
  
  
  28. proxy.arr.length-- // 无效 
    29.

以上代码不仅精简，而且还是实现一套代码对对象和数组的侦测都适用。不过Proxy兼容性不太好!

我们之所以要观察数据，其目的在于当数据的属性发生变化时，可以通知那些曾经使用了该数据的地方。比如***例子中，模板中使用了price 数据，当它发生变化时，要向使用了它的地方发送通知。那如何收集依赖呢?

收集依赖与发布订阅模式

如何收集依赖，总结起来就一句话，在getter中收集依赖，在setter中触发依赖 我们先来实现一个 Dep 类，用于解耦属性的依赖收集和派发更新操作。

 
 
 
 
      
  
  
  
  1. // 通过 Dep 解耦属性的依赖和更新操作 
    2.   
  
  
  
  2. class Dep { 
    3.   
  
  
  
  3. constructor() { 
    4.   
  
  
  
  4. this.subs = [] 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6. // 添加依赖  
    7.   
  
  
  
  7. addSub(sub) {  
    8.   
  
  
  
  8. this.subs.push(sub)  
    9.   
  
  
  
  9. }  
    10.   
  
  
  
  10. // 更新  
    11.   
  
  
  
  11. notify() {  
    12.   
  
  
  
  12. this.subs.forEach(sub => {  
    13.   
  
  
  
  13. sub.update()  
    14.   
  
  
  
  14. })  
    15.   
  
  
  
  15. }  
    16.   
  
  
  
  16. }  
    17.   
  
  
  
  17. // 全局属性，通过该属性配置 Watcher  
    18.   
  
  
  
  18. Dep.target = null 
    19.

当需要依赖收集的时候调用 addSub，当需要派发更新的时候调用 notify。具体如何调用呢?

 
 
 
 
      
  
  
  
  1. let dp = new Dep()  
    2.   
  
  
  
  2. dp.addSub(() => {  
    3.   
  
  
  
  3. console.log('emit here')  
    4.   
  
  
  
  4. })  
    5.   
  
  
  
  5. dp.notify() 
    6.

这就是一个简单实现的“事件发布订阅模式”，当然代码只是启发思路，真实应用还比较“粗糙”，没有进行事件名设置，APIs 也并不丰富，但完全能够说明问题了。

接下来我们先来简单的了解下 Vue 组件挂载时添加响应式的过程。在组件挂载时，会先对所有需要的属性调用 Object.defineProperty()，然后实例化 Watcher，传入组件更新的回调。在实例化过程中，会对模板中的属性进行求值，触发依赖收集。我们可以把Watcher理解成一个中介的角色，数据发生变化时通知它，然后它再通知其他地方。

***需要对 defineReactive 函数进行改造，在自定义函数中添加依赖收集和派发更新相关的代码。

 
 
 
 
      
  
  
  
  1. function render () { 
    2.   
  
  
  
  2.   console.log('模拟视图渲染') 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4. let data = { 
    5.   
  
  
  
  5.   name: '浪里行舟', 
    6.   
  
  
  
  6.   location: { x: 100, y: 100 } 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8. observe(data) 
    9.   
  
  
  
  9.   let dp = new Dep() 
    10.   
  
  
  
  10. function observe (obj) { 
    11.   
  
  
  
  11.   // 判断类型 
    12.   
  
  
  
  12.   if (!obj || typeof obj !== 'object') { 
    13.   
  
  
  
  13.     return 
    14.   
  
  
  
  14.   } 
    15.   
  
  
  
  15.   Object.keys(obj).forEach(key => { 
    16.   
  
  
  
  16.     defineReactive(obj, key, obj[key]) 
    17.   
  
  
  
  17.   }) 
    18.   
  
  
  
  18.   function defineReactive (obj, key, value) { 
    19.   
  
  
  
  19.     // 递归子属性 
    20.   
  
  
  
  20.     observe(value) 
    21.   
  
  
  
  21.     Object.defineProperty(obj, key, { 
    22.   
  
  
  
  22.       enumerable: true, //可枚举（可以遍历） 
    23.   
  
  
  
  23.       configurable: true, //可配置（比如可以删除） 
    24.   
  
  
  
  24.       get: function reactiveGetter () { 
    25.   
  
  
  
  25.         console.log('get', value) // 监听 
    26.   
  
  
  
  26.     // 将 Watcher 添加到订阅 
    27.   
  
  
  
  27.        if (Dep.target) { 
    28.   
  
  
  
  28.          dp.addSub(Dep.target) 
    29.   
  
  
  
  29.        } 
    30.   
  
  
  
  30.         return value 
    31.   
  
  
  
  31.       }, 
    32.   
  
  
  
  32.       set: function reactiveSetter (newVal) { 
    33.   
  
  
  
  33.         observe(newVal) //如果赋值是一个对象，也要递归子属性 
    34.   
  
  
  
  34.         if (newVal !== value) { 
    35.   
  
  
  
  35.           console.log('set', newVal) // 监听 
    36.   
  
  
  
  36.           render() 
    37.   
  
  
  
  37.           value = newVal 
    38.   
  
  
  
  38.      // 执行 watcher 的 update 方法 
    39.   
  
  
  
  39.           dp.notify() 
    40.   
  
  
  
  40.         } 
    41.   
  
  
  
  41.       } 
    42.   
  
  
  
  42.     }) 
    43.   
  
  
  
  43.   } 
    44.   
  
  
  
  44. } 
    45.

以上所有代码实现了一个简易的数据响应式，核心思路就是手动触发一次属性的 getter 来实现依赖收集。

总结

我们再来回顾下整个过程：

  1. data在 Observer 时闭包的dep实例的subs添加观察它的 Watcher 实例;
  2. Watcher 的deps中添加观察对象 Observer 时的闭包dep;

参考文章和书籍

作者介绍

浪里行舟：硕士研究生，专注于前端。个人公众号：「前端工匠」，致力于打造适合初中级工程师能够快速吸收的一系列优质文章!

【原创稿件，合作站点转载请注明原文作者和出处为.com】

网站题目：深入理解vue响应式原理
网页路径：http://www.shufengxianlan.com/qtweb/news48/137048.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App设计知识

同城分类信息

广安园林绿化公司　　 　成都网站建设　　 　广告媒介投放　　 　成都h5建站开发　　 　全网整合营销推广　　 　中国（西部）云计算中心　　 　成都网络推广　　 　雅安服务器托管　　 　企业网站制作　　 　正泰动物　　 　域名注册　　 　成都网络公司　　 　手机网站制作　　 　成都响应式网站建设公司　　 　成都服务器托管　　 　宜宾网站营销推广　　 　眉山服务器托管　　 　网站运营　　 　商城网站建设　　 　顺泽窗帘