关于vue.js:vue响应式实现

30次阅读

共计 601 个字符,预计需要花费 2 分钟才能阅读完成。

咱们晓得 Vue 是一个 MVVM 框架,它一个核心思想就是 数据驱动。数据驱动就是指视图是由数据驱动生成的,咱们若想让视图扭转,要通过批改数据来进行批改,而不是像原始 JS 那样间接操作 DOM。

响应式?

首先理解一下 Vue 是如何实现数据驱动的,这是一幅 Vue 官网的配图。

  • 黄色那一块是 Vue 负责渲染的 render function,当 视图初始化 以及 视图更新 时都会调用这个render function
  • 而每次渲染时都会无奈防止地触碰到咱们的数据,也就是图中紫色的 data 局部。渲染时通过触发波及数据的 getter,把波及数据作为依赖收集到watcher 中。(而且这个 watcher 在每个组件实例中都会对应有一个)
  • 所以在前面咱们批改这些收集到的依赖数据时,就会触发数据的 settersetter 办法会批改数据的值并告诉(notify)给 watcher,最初watcher 再触发 render funnction 进行视图的从新渲染。

下面说的就是 Vue 实现数据驱动的过程,能够看进去实现数据驱动的要害是让咱们的数据变成响应式,而 gettersetter这两个办法又是让数据变成响应式的要害。
然而咱们写在 data 中的原始数据并没有对应性能的 gettersetter啊?其实这就是 Vue 的工作:重写数据的 gettersetter

Vue2

那么 Vue 是怎么实现数据的响应式的?首先咱们来看一下 Vue2 的实现原理。

Vue3

两者的比照

正文完
 0