手写Vue响应式特性

2023-12-31 18:36:37

响应性是 Vue的一个核心特性,用于监听视图中绑定的数据,当数据发生改变时视图自动更新。人们往往对响应性这个术语有一些误解或困惑,会认为响应性就是类似RX之类的响应性编程。但是在这里只要状态发生改变,系统依赖部分发生自动更新就可以称为响应性。在 web应用中,数据的变化如何响应到DOM中,就是Vue解决的问题。

假设我们有个需求,b永远等于a的十倍,如果使用命令式编程,可以很简单实现,可以像下面这样实现,但是当我们把a设置成4时,b还是等于30

let a = 3;
let b = a+ 10;
console.log(b)//30
a = 4
console.log(b)//30

为了让b等于a的10倍,我们需要重新设置b的值:

let a = 3;
let b = a * 10;
console.log(b)//30
a = 4;
b = a * 10;
console.log(b)//40

改进方式

通过Object.defineProperty修改对象属性的getter和setter让对象具有响应性,这种基于依赖跟踪的方式其实就是vue.js、konckout.js等框架实现的原理。

手写函数

ES5的Object.defineProperty提供监听属性变更的功能,下面将演示如何通过covert函数修改传入对象的getter和setter实现修改对象属性时打印日志的功能。

function convert (obj) {
  // Object.keys获取对象的所有key值,通过forEach对每个属性进行修改
  Object.keys(obj).forEach(key => {
    // 保存属性初始值
    let internalValue = obj[key]
    Object.defineProperty(obj, key, {
      get () {
        console.log(`getting key "${key}": ${internalValue}`)
        return internalValue
      },
      set (newValue) {
        console.log(`setting key "${key}" to: ${newValue}`)
        internalValue = newValue
      }
    })
  })
}

文章来源:https://blog.csdn.net/m0_56699208/article/details/135317933
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。