从设计理念到数据响应式

简介: 本文从vue系列的基本设计思路开始,到手写基本api的实现。让大家从实践中体会vue的数据驱动的神秘之处。

网络异常,图片无法展示
|


本文从vue系列的基本设计思路开始,到手写基本api的实现。让大家从实践中体会vue的数据驱动的神秘之处。


设计理念


大家都知道,vue是一个典型的MVVM框架。那什么是MVVM、在vue中又是怎么体现的呢?


MVVM


网络异常,图片无法展示
|

M

M代表的是模型Model。是展示在页面中的数据,在vue中指向的是data中的数据模型。


V

V代表的是视图View。是展示的页面,指向的是vue中的模板引擎(template模板)。


VM

VM代表的是ViewModel。不需要通过我们的操作将数据解析展示到视图上,以及数据发生改变,页面上的视图自动会发生相应改变。


那么vue是如何将视图和逻辑操作分开,这就很有必要提到vue中数据驱动的特点。那么这些数据又是如何在视图中展示的呢? vue通过数据响应式监听数据的变化并在视图中更新;


模板引擎提供描述视图的模板语法(类html。提供一些vue特有指令、插值);

渲染:将模板语法转为html(AST=>vdom=>dom)。


数据响应式


简单响应式


vue中的监听数据变化:


vue2: Object.defineProperty()

vue3: Proxy


两者简单的响应数据案例可以查看这篇文章

<div id="app"></div>
<script>
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      return val
    },
    set(newVal) {
      if (val != newVal)
        val = newVal
      // 数据发生变化通知视图更新
      update()
    }
  })
}
function update() {
  content.innerHTML = `<h1>${obj.name}</h1>`
}
let obj = { name: 'clying' }
let content = document.getElementById('app')
update()
// 响应式处理
defineReactive(obj, 'name', 'clying')
setTimeout(() => {
obj.name = 'deng'
console.log(obj.name);
}, 1000)
</script>

运行代码,我们可以看到页面一开始展示clying,经过1秒之后变为deng。 通过这个简单的案例,我们可以实现简单的obj对象响应式地对页面进行渲染。


递归响应式


上述案例中只是对deep=1的对象进行了数据监听。那么具有深度的obj对象又是如何监听变化的呢?


这时候就需要遍历obj对象,对对象中的每个属性进行数据监听。通过Object.keys返回一个obj中所有元素为字符串的数组,对其进行setter和getter拦截。

// 先来一个具有深度的对象
let obj = {
  name: 'clying',
  arr: [
    1,
    {
      namearr: '2',
    },
  ],
  children: {
    name1: 'deng',
    children: {
      name2: 'clying deng',
    },
  },
}
function defineReactive(obj, key, val) {
  observe(val) // 子属性可能仍为对象,在对其进行拦截
  Object.defineProperty(obj, key, {
    get() {
      console.log('获取', key)
      return val
    },
    set(newVal) {
      if (newVal !== val) val = newVal
      console.log('设置新值', key, obj[key])
    },
  })
}
function observe(obj) {
  if (typeof obj !== 'object' || obj === null) return
  Object.keys(obj).forEach((key) => defineReactive(obj, key, obj[key]))
}
observe(obj)
obj.children.name1 = 'l'

网络异常,图片无法展示
|


当设置obj.children.name1时,先获取到children属性,发现children仍是一个对象,继续遍历。获取到children中的name1属性时,发现不是对像,对name1进行拦截,设置新值。


动态添加属性


当我想要根据上例,对obj动态添加一个age属性时,其实是没有作用的。defineProperty无法检测新增属性,这也涉及到vue2的一个弊端。这就要额外使用到vue2中的set API方法。

function set(obj, key, val) {
  defineReactive(obj, key, val)
}
set(obj, 'age', 22)
obj.age


可以看出set方法其实也是利用defineProperty去添加新属性,只是需要用户手动调用。通过调用set,使obj中新属性age可以被拦截到。

网络异常,图片无法展示
|


注意set用法:


set方法对于接收的目标参数必须是响应式的,可以在源码set方法中看到,一开始就会去判断传入的目标值是否是原始值、undefined或null,如果是这些情况直接警告。如果想要删除属性,相同的需要手动调用delete方法。


注:observer文件夹index.js 201行


数组响应式


defineProperty方法其实是可以拦截到像arr[0] = 1这种,通过index下标赋值的数组。但是它无法支持数组中push、pop等数组的原型方法。我们需要拦截数组的7个方法,重写他们,就是干!


因为我们只是简单的模仿,没有写Observe类。在此我将Observe类中拆成observe方法(判断是数组还是对象,分别监听)、observeArray循环遍历监听数组属性。


function observeArray(arr) {
  arr.forEach((_) => observe(_))
}
function observe(obj) {
  if (typeof obj !== 'object' || obj == null) return
  if (Array.isArray(obj)) {
    obj.__proto__ = arrayMethods // 继承原型方法属性
    observeArray(obj)
  } else {
    Object.keys(obj).forEach((key) => defineReactive(obj, key, obj[key]))
  }
}


比较核心的还是在 obj.__proto__ = arrayMethods中,使当前遍历到的数组的原型链可以指向我们重写的数组方法。


const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse',
]
let oldArrayMethods = Array.prototype
let arrayMethods = Object.create(oldArrayMethods) //arrayMethods的原型指向Array数组的原型,可以获取数组原型方法
methodsToPatch.forEach((method) => {
  arrayMethods[method] = function (...args) {
    const result = oldArrayMethods[method].apply(this, args)
    let inserted // 当前用户插入的元素
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      // 3个 新增属性 splice 有删除 新增的功能 arr.splice(0,1,{name:1})
      case 'splice':
        inserted = args.slice(2)
      default:
        break
    }
    // let ob = this.__ob__;
    // ob.observeArray(inserted); // 插入的是对象或者数组的话还需要再次递归监听
    // update通知更新
    return result
  }
})


当我们通过obj.arr.push(1);obj.arr[1].namearr = 2时,可以看到控制台输出:

网络异常,图片无法展示
|


说明在push数组方法,和修改数组值时,数组都可以走到defineProperty中,被其拦截。


在此,数组插入的值可能是对象或数组时,仍需要对其插入的值进行监听。应该在Observe类中,先将这个实例保存(内部会含有observeArray方法)。然后,在arrayMethods中使用其observeArray方法,继续进行深度劫持。


至此,关于数据响应式就可以告一段落拉。如有不足,欢迎大家指正。

目录
打赏
0
0
0
0
0
分享
相关文章
京东面试:分库分表后,如何深度翻页?
在40岁老架构师尼恩的读者交流群中,有小伙伴在京东面试时遇到了MySQL分库分表后深度分页太慢的问题。本文详细分析了单表和分表场景下的性能问题及优化方法,包括索引覆盖、子查询分页、Join分页、禁止跳页查询、二次查询法等。此外,还介绍了使用ES+HBase的海量NOSQL架构方案。通过这些方法,可以显著提升分页查询的性能,帮助面试者在技术面试中脱颖而出。
京东面试:分库分表后,如何深度翻页?
美甲帮:玩转指甲上的大数据平台
美甲帮APP目前有几百万的用户,然而不同用户喜好和动机不同,譬如是想提升美甲技艺,还是想通过美甲图片选款,或者是想在商城里购买美甲产品,如何挖掘用户需求并以此进行精准化营销或个性化推荐,提升客户体验同时又可以增加收入,这些都是美甲帮最关注的问题。
6017 0
OpenCV(图像处理)-基于Python-特征检测-特征点匹配
1.图像特征 图像特征就是指有意义的图像区域,具有独特性,易于识别性,比如角点、斑点以及高密度区。而为什么角点具有重要的特征呢? 看下图:
597 0
深入了解Windows安装Docker
【8月更文挑战第22天】深入了解Windows安装Docker
492 0
DataWorks操作报错合集之无法连接到指定的数据库实例,该如何解决
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
7、忘记密码中重置密码接口开发
业务逻辑:用户忘记登录密码,然后根据用户用户名找到用户之前设置的问题,用户填写问题答案,若答案正确用户即可重置密码,若回答问题错误,则提示回答错误,不允许重置密码。
1351 0
Flink常见异常和错误信息小结
Flink的常见异常众多,不可能面面俱到,所以想到哪儿写到哪儿,有漏掉的之后再补充。部署和资源问题(0) JDK版本过低这不是个显式错误,但是JDK版本过低很有可能会导致Flink作业出现各种莫名其妙的问题,因此在生产环境中建议采用JDK 8的较高update(我们使用的是181)。
2635 0
通过宏实现Word接入DeepSeek
本文介绍如何在Microsoft Word中通过宏接入DeepSeek,实现自动化文本处理。首先确保具备Word 2016及以上版本、DeepSeek API密钥和VBA基础。接着,从豆包平台获取API密钥及模型ID,并在Word中启用开发者选项和宏功能。最后,编写VBA宏代码调用DeepSeek API,完成文本分析与处理。
377 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问