vue.js数据响应式原理解析

 更新时间:2022年08月03日 10:14:54   作者:亦黑迷失  
这篇文章主要介绍了vue.js数据响应式原理解析,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下

Object.defineProperty()

得力于 Object.defineProperty() 的特性,vue 的数据变化有别于 react 和小程序,是非侵入式的。详细介绍可以看 MDN 文档这里特别说明几点:

  • get / set 属性是函数,出于习惯会被称为 getter 函数 / setter 函数(Java,c++ 中都有这种惯例)
  • value 或 writable 和 get 或 set 是不能同时出现的,否则报错
  • 注意区别 Object.defineProperties()

定义 defineReactive 函数

Object.defineProperty() 在使用 getter 和 setter 的时候,要想实现属性的修改,需要借助一个变量周转,如下面的 value,这就很麻烦。

const obj = {}
let value
Object.defineProperty(obj, 'a', {
  enumerable: true,
  configurable: true,
  get() {
    console.log('getter')
    return value
  },
  set(newValue) {
    value = newValue
    console.log('setter', newValue)
  }
})

所以定义了 defineReactive 函数,方便去给对象增加一个响应式属性。这里创建一个闭包的环境:闭包一定要有内外两个函数,外面这个函数 defineReactive 的 value 就形成了闭包。

const obj = {}
function defineReactive(data, key, value) {
  // 如果只传了两个参数,则让 value 直接等于 data[key]
  if (arguments.length === 2) value = data[key]

  Object.defineProperty(data, key, {
    enumerable: true, // 可被枚举(for...in 或 Object.keys 方法)
    configurable: true, // 可被配置,比如删除
    get() {
      console.log('查看了' + key + '属性')
      return value
    },
    set(newValue) {
      console.log('修改了' + key + '属性')
      value = newValue
    }
  })
}

defineReactive(obj, 'a', 10)
console.log(obj.a)
obj.a = 11
console.log(obj.a)

得到的结果如下图:

递归侦测对象的全部属性

我们自己写一个能够侦测对象全部属性的库
新建 index.js 作为主入口文件,用于测试效果,我们 let 一个对象 obj,目标是通过把 obj 作为参数传给 observe 函数,即可实现对 obj 对象所有属性的查看与修改的监测。

// index.js
import observe from './observe.js'
let obj = {
  a: {
    m: {
      n: 1
    }
  },
  b: 2
}
observe(obj)

流程分析

observe 函数

observe 函数用于观察一个对象(value)的属性是否已被监测的(是否有 __ob__ 属性),如果不是则让其属性成为响应式的(通过 new Observer(value))。
注意:之所以起了 __ob__ 这么奇怪的变量名,是为了保证不会与对象的原有属性同名。

// observe.js
import Observer from './Observer.js'
export default (value) => {
  if (typeof value !== 'object') return
  if (value.__ob__ !== undefined) {
    // 暂时留空
  } else {
    new Observer(value)
  }
}

Observer 类

Observer 是一个类,一旦 new 了一个实例,则做 2 件事:

  • 给传入的 value(其实是个对象) 添加 __ob__ 属性,值为这次 new 的实例(也就是构造函数中的 this),因为希望 __ob__ 属性是不可被枚举的,所以用 def 函数处理。
  • 遍历 value 的属性,通过 defineReactive 函数将其变为响应式的
// Observer.js
import { def } from './utils.js'
import defineReactive from './defineReactive.js'

export default class Observer {
  constructor(value) {
    def(value, '__ob__', this, false)
    this.walk(value)
  }
  // 处理对象,让对象的属性变为响应式
  walk(value) {
    for (let key in value) {
      defineReactive(value, key)
    }
  }
}

def 函数定义如下:

export const def = (obj, key, value, enumerable) => {
  Object.defineProperty(obj, key, {
    value,
    enumerable,
    writable: true,
    configurable: true
  })
}

完善 defineReactive 函数

相较于前面定义的时候,在两个地方添加了 observe(value),从而实现了递归侦测对象的全部属性。这里的参数 value,就是已经被变为响应式的属性的值,这个值如果是个对象,也需要被侦测,所以也要被 observe。

// defineReactive.js
import observe from './observe.js'

export default function defineReactive(data, key, value) {
  if (arguments.length === 2) value = data[key]

  // 注意这里不是传 key 而是传 value,因为 key 只是一个字符串,value 才是 key 指向的对象
  observe(value)
  // 让 data 的 key 属性变为响应式属性
  Object.defineProperty(data, key, {
    enumerable: true, 
    configurable: true, 
    get() {
      console.log('查看了' + key + '属性')
      return value
    },
    set(newValue) {
      console.log('修改了' + key + '属性')
      value = newValue
      // 修改的属性也需要被观察,如果是对象需要被侦测
      observe(newValue)
    }
  })
}

至此,在 index.js 传入 observe 的 obj 的每个属性都是响应式的了

// index.js
...省略前面的代码
obj.a.m = {
  y: 8
}
console.log(obj.a.m.y)

测试结果如下:

One More Thing

普通对象也是有 getter 和 setter 的:

  • get propertyName(){} 用来得到当前属性值的回调函数
  • set propertyName(){} 用来监视当前属性值变化的回调函数
  • 下面的代码中,属性 a 称为“数据属性”,它只有一个简单的值;属性b这种用 getter 和 setter 方法定义的属性称为“存取器属性”。
var num= {
    a: 2,
    get b(){
        return 2
    }
}

存取器属性定义为一个或两个与属性同名的函数,这个函数定义不使用 function 关键字,而是使用 get 或 set,也没有使用冒号将属性名和函数体分开。

到此这篇关于vue.js数据响应式原理解析的文章就介绍到这了,更多相关vue.js响应式原理 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue解析指令compile源码层面使用解析

    vue解析指令compile源码层面使用解析

    这篇文章主要为大家介绍了Vue编译器解析compile源码解析示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • ElementUI如何修改el-cascader的默认样式

    ElementUI如何修改el-cascader的默认样式

    ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持。该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,这篇文章主要介绍了ElementUI如何修改el-cascader的默认样式,需要的朋友可以参考下
    2023-12-12
  • 源码分析Vue3响应式核心之effect

    源码分析Vue3响应式核心之effect

    这篇文章主要为大家详细介绍了Vue3响应式核心之effect的相关知识,文中的示例代码讲解详细,对我们学习Vue3有一定的帮助,需要的可以参考一下
    2023-04-04
  • vue 虚拟DOM快速入门

    vue 虚拟DOM快速入门

    这篇文章主要介绍了vue 虚拟DOM的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • Vue路由传参页面刷新后参数丢失原因和解决办法

    Vue路由传参页面刷新后参数丢失原因和解决办法

    这几天在开发中遇见的一个关于路由传参后,页面刷新数据丢失的问题,下面这篇文章主要给大家介绍了关于Vue路由传参页面刷新后参数丢失原因和解决办法,需要的朋友可以参考下
    2022-12-12
  • 浅谈vue项目用到的mock数据接口的两种方式

    浅谈vue项目用到的mock数据接口的两种方式

    这篇文章主要介绍了浅谈vue项目用到的mock数据接口的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Vue基础配置讲解

    Vue基础配置讲解

    在本篇文章里小编给大家整理的是关于Vue基础配置讲解内容,有兴趣的朋友们可以学习下。
    2019-11-11
  • Electron+vite+vuetify项目搭建的流程和方法

    Electron+vite+vuetify项目搭建的流程和方法

    最近想用Electron来进行跨平台的桌面应用开发,同时想用vuetify作为组件,于是想搭建一个这样的开发环境,这里分享下Electron+vite+vuetify项目搭建的流程和方法,感兴趣的朋友一起看看吧
    2024-06-06
  • vue中element 的upload组件发送请求给后端操作

    vue中element 的upload组件发送请求给后端操作

    这篇文章主要介绍了vue中element 的upload组件发送请求给后端操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • uniapp微信小程序WebApi_openid、phone接口获取代码详解

    uniapp微信小程序WebApi_openid、phone接口获取代码详解

    本文主要记录了微信小程序接口调用的过程,首先查看uniapp文档和微信API文档,获取openid和phone,然后通过uniapp实现获取openid和电话号码,但遇到了合法域名屏蔽的问题,最后通过将微信访问迁移到后台解决,需要的朋友可以参考下
    2024-10-10

最新评论