Vue.js 响应式原理

最新推荐文章于 2023-06-30 16:16:25 发布
最新推荐文章于 2023-06-30 16:16:25 发布
阅读量468 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47124862/article/details/119797180
版权

Vue.js 响应式原理

准备工作

数据驱动

在学习 Vue.js 的过程中，我们经常看到三个概念：

  • 数据驱动
  • 数据响应式
  • 双向数据绑定
响应式的核心原理
核心原理分析
  • Vue 2.x 版本与 Vue 3.x 版本的响应式实现有所不同，我们将分别讲解。
    • Vue 2.x 响应式基于 ES5 的 Object.defineProperty 实现。
<script>
    var obj = {
      name: 'rae',
      age: '18'
    }
    // Object.defineProperty()操作演示与回顾
    Object.defineProperty(obj, 'gender', {
      // 设置值
      value: '女',
      // 是否可写
      writeable: true,
      // 是否可以遍历
      enumerable: true,
      // 重新配置
      configurable: true
    })

    Object.defineProperty(obj, 'gender', {
      enumerable: false
    })

    for (var k in obj) {
      console.log(k, obj[k])
    }

  </script>

    var genderValue = '女'
    Object.defineProperty(obj, 'gender', {
      get () {
        console.log('任意获取时需要的自定义操作')
        return genderValue
      },
      set (newValue) {
        console.log('任意设置时需要的自定义操作')
        genderValue = newValue
      }
    })
  • Vue 3.x 响应式基于 ES6 的 Proxy 实现
Vue 2 响应式原理
  • Vue 2.x 的数据响应式通过 Object.defineProperty() 实现的
    • 设置 data 后，遍历所有属性，转换为 Getter、Setter，从而在数据变化时进行视图更新等操作。
  • 下面我们来通过一段代码实现数据绑定的基础效果
  • 数据变化，自动更新到视图
<div id="app">原始内容</div>
  <script>
    // 声明数据对象，模拟vue实例的data属性
    let data = {
      msg: 'hello'
    }
    // 模拟vue实例的对象
    let vm = {}
    // 通过数据劫持的方式，给data的属性设置为getter与setter
    Object.defineProperty(vm, 'msg', {
      // 可遍历
      enumerable: true,
      // 可配置
      configurable: true,
      get () {
        console.log('访问了属性')
        return data.msg
      },
      set (newValue) {
        // 更新数据
        data.msg = newValue
        // 数据更改，更新视图中的dom元素的内容
        document.querySelector('#app').textContent = data.msg
      }
    })
  </script>
改进
  • 上述版本只是雏形，问题如下：
    • 操作中只监听了一个属性，多个属性无法处理
    • 无法监听数组变化（Vue 中同样存在）
    • 无法处理属性也为对象的情况
  • 下面我们来进行改进
<div id="app">原始内容</div>
  <script>
    // 声明数据对象，模拟vue实例的data属性
    let data = {
      msg1: 'hello',
      msg2: 'world',
      arr: [1, 2, 3],
      obj: {
        name: 'jack',
        age: 18
      }
    }
    // 模拟vue实例的对象
    let vm = {}
    // 封装为函数，用于对数据进行响应式处理
    const createReactive = (function () {
      // 添加数组方法支持
      const arrMethodName = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']

      // 用于存储处理结果的对象，准备替换掉数组实例的原型指针_proto_
      const customProto = {}

      // 为了避免数组实例无法再使用其他的数组方法
      customProto.__proto__ = Array.prototype

      arrMethodName.forEach(method => {
        customProto[method] = function () {

          // 确保原始功能可以使用（this为数组实例对象）
          const result = Array.prototype[method].apply(this, arguments)
          // 进行其他自定义功能设置，更新视图
          document.querySelector('#app').textContent = this
          return result
        }
      })
      // 需要进行数据劫持的主题功能，也是递归时需要的功能
      return function (data, vm) {
        // 遍历被劫持对象的所有属性
        Object.keys(data).forEach(key => {
          // 检测是否为数组
          if (Array.isArray(data[key])) {
            // 将当前数组实例的_proto_更换为customproto即可
            data[key].__proto__ = customProto
          } else if (typeof data[key] === 'object' && data[key] !== null) {
            // 检测是否为对象，如果是对象，需要进行递归处理
            vm[key] = {}
            createReactive(data[key], vm[key])
            return 
          }
          // 通过数据劫持的方式，给data的属性设置为getter与setter
          Object.defineProperty(vm, key, {
            // 可遍历
            enumerable: true,
            // 可配置
            configurable: true,
            get () {
              console.log('访问了属性')
              return data[key]
            },
            set (newValue) {
              // 更新数据
              data[key] = newValue
              // 数据更改，更新视图中的dom元素的内容
              document.querySelector('#app').textContent = data[key]
            }
          })
        })
      } 
    })()

    createReactive(data, vm)
Proxy 回顾
<script>
    const data = {
      msg1: '内容',
      arr: [1, 2, 3],
      obj: {
        name: 'rae',
        age: 18
      }
    }
    const p = new Proxy(data, {
      get (target, property, receiver) {
        console.log(target, property, receiver)
        return target[property]
      },
      set (target, property, value, receiver) {
        console.log(target, property, value, receiver)
        target[property] = value
      }
    })
  </script>
Vue 3 响应式原理

-Vue 3.x 与 Vue 2.x 的区别为数据响应式是通过 Proxy 实现的，其他相同，下面我们来进行原理示。

相关设计模式

设计模式（design pattern）是针对软件设计中普遍存在的各种问题所提出的解决方案。

观察者模式
  • 观察者模式（Observer pattern）指的是在对象间定义一个一对多（被观察者与多个观察者）的关联，当一个对象改变了状态，所有其他相关的对象会被通知并且自动刷新。
  • 核心概念：
  • 观察者 Observer
  • 被观察者（观察目标）Subject
<script>
    // 被观察者（观察目标）
    // 1.添加观察者
    // 2.通知所有观察者
    class Subject {
      constructor () {
        // 存储所有的观察者
        this.observers = []
      }
      // 添加观察者功能
      addObserver (observer) {
        // 检测传入的参数是否为观察者实例
        if (observer && observer.update) {
          this.observers.push(observer)
        }
      }
      // 当特殊事件发生时，通知观察者
      notify () {
        // 调用观察者列表中每个观察者的更新方法
        this.observers.forEach(observer => {
          observer.update()
        })
      }
    }

    // 观察者
    // 1 当观察目标发生状态变化时，进行更新
    class Observer {
      update () {
        console.log('事件发生了，进行相应的处理...')
      }
    }


    // 功能测试
    const subject = new Subject()
    const ob1 = new Observer()
    const ob2 = new Observer()

    // 将观察者添加给要观察的观察目标
    subject.addObserver(ob1)
    subject.addObserver(ob2)

    // 通知观察者进行操作（某些具体的场景项）
    subject.notify()
  </script>
发布-订阅模式
  • 发布-订阅模式（Publish-subscribepattern）可认为是为观察者模式解耦的进阶版本，特点如下：
  • 在发布者与订阅者之间添加消息中心，所有的消息均通过消息中心管理，
    而发布者与订阅者不会直接联系，实现了两者的解耦。
  • 核心概念：
  • 消息中心 Dep
  • 订阅者 Subscriber
  • 发布者 Publishe*
<script>
    // 创建vue实例(消息中心)
    const eventBus = new Vue()

    // 注册事件(设置订阅者)
    eventBus.$on('dataChange', () => {
      console.log('事件处理功能1')
    })

    eventBus.$on('dataChange', () => {
      console.log('事件处理功能2')
    })

    // 触发事件(设置发布者)
    eventBus.$emit('dataChange')
  </script>
设计模式小结
  • 观察者模式是由观察者与观察目标组成的，适合组件内操作。
    • 特性：特殊事件发生后，观察目标统一通知所有观察者。
  • 发布/订阅模式是由发布者与订阅者以及消息中心组成，更加适合消息类型复杂的情况。
    • 特性：特殊事件发生，消息中心接到发布指令后，会根据事件类型给对应的订阅者发送信息。

Vue 响应式原理模拟

整体分析
<div id="app">
    <p>{{ msg1 }}</p>
    <p v-text="msg2"></p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg1: '内容1',
        msg2: '内容2'
      }
    })
  </script>
  • 要模拟 Vue 实现响应式数据，首先我们观察一下 Vue 实例的结构，分析要实现哪些属性与功能。
  • Vue
    • 目标：将 data 数据注入到 Vue 实例，便于方法内操作。
  • Observer（发布者）
    • 目标：数据劫持，监听数据变化，并在变化时通知 Dep
  • Dep（消息中心）
    • 目标：存储订阅者以及管理消息的发送
  • Watcher（订阅者）
    • 目标：订阅数据变化，进行视图更新
  • Compiler
    • 目标：解析模板中的指令与插值表达式，并替换成相应的数据
Vue 类
  • 功能：
    • 接收配置信息
    • 将 data 的属性转换成 Getter、Setter，并注入到 Vue 实例中。
    • *监听 data 中所有属性的变化，设置成响应式数据
    • *调用解析功能（解析模板内的插值表达式、指令等）
class Vue {
  constructor (options) {
    // 1 存储属性
    this.$options = options || {}
    this.$data = options.data || {}
    // 判断el值的类型，并进行相应处理
    const { el } = options
    this.$el = typeof el === 'string' ? document.querySelector(el) : el

    // 2 将data属性注入到Vue实例中(该功能为内部使用)
    _proxyData(this, this.$data)

    // * 3 创建Observer 实例监视data的属性变化
    new Observer(this.$data)

    // * 4 调用Compiler
    new Compiler(this)
  }
}

// 将data的属性注入到Vue实例
function _proxyData (target, data) {
  Object.keys(data).forEach(key => {
    Object.defineProperty(target, key, {
      enumerable: true,
      configurable: true,
      get () {
        return data[key]
      },
      set (newValue) {
        data[key] = newValue
      }
    })
  })
}
Observer 类
  • 功能：
    • 通过数据劫持方式监视 data 中的属性变化，变化时通知消息中心 Dep。
    • 需要考虑 data 的属性也可能为对象，也要转换成响应式数
class Observer {
  // 接收传入的对象，将这个对象的属性转换为getter或setter
  constructor (data) {
    this.data = data
    // 遍历数据
    this.walk(data)
  }
  // 封装用于数据遍历的方法
  walk (data) {
    // 将遍历后的数据转换为getter、setter
    Object.keys(data).forEach(key => this.convert(key, data[key]))
  }
  // 封装用于将对象转换为响应式数据的方法
  convert (key, value) {
    defineReactive(this.data, key, value)
  }
}

// 用于为对象定义一个响应式的属性
function defineReactive (data, key, value) {
  // 创建消息中心
  const dep = new Dep()

  //检测是否为对象,如果是创建一个新的Oberver实例进行管理
  observer(value)
  // 进行数据劫持
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get () {
      console.log('获取了属性')
      //  *在触发getter时，添加订阅者
      Dep.target && dep.addSub(Dep.target)
      return value
    },
    set (newValue) {
      console.log('设置了属性')
      if (newValue === value) return
      value = newValue
      observer(value)

      //  *数据变化是，通知消息中心
      dep.notify()
    }
  })
}

function observer (value) {
  if (typeof value === 'object' && value !== null) {
    return new Observer(value)
  } 
}
Dep 类
  • Dep 是 Dependency 的简写，含义为“依赖”，指的是 Dep 用于收集与管理订阅者与发布者之间的依赖关系。
  • 功能：
    • *为每个数据收集对应的依赖，存储依赖。
    • 添加并存储订阅者。
    • 数据变化时，通知所有观察者
class Dep {
  constructor () {
    // 存储订阅者
    this.subs = []
  }
  // 添加订阅者
  addSub (sub) {
    if (sub && sub.update) {
      this.subs.push(sub)
    }
  }
  // 通知订阅者的方法
  notify () {
    // 遍历订阅者并执行更新功能即可
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}
Watcher 类
  • 功能：
    • 实例化 Watch 时，往dep对象中添加自己
    • 当数据变化触发 dep， dep 通知所有对应的 Watcher 实例更新视图
class Watcher {
  constructor (vm, key, cb) {
    // 当前value实例
    this.vm = vm
    // 订阅的属性名
    this.key = key
    // 数据变化后，要执行的回调
    this.cb = cb

    // 触发getter前，将当前订阅者实例存储给Dep类
    Dep.target = this
    // 记录属性更改之前的值，用于进行更新状态检测(导致了属性Getter的触发)
    this.oldValue = vm[key]
    // 操作完毕后，清除target，用来存储下一个watcher实例
    Dep.target = null
  }
  // 封装数据变化时更新视图的功能
  update () {
    const newValue = this.vm[this.key]
    // 如果数据不变无需更新
    if (newValue === this.oldValue) return
    // 数据改变，调用更新后的回调
    this.cb(newValue)
  }
}
Compiler 类
  • 功能：
    • 进行编译模板，并解析内部指令与插值表达式。
    • 进行页面的首次渲染
    • 数据变化后，重新渲染视图
class Compiler {
  constructor (vm) {
    this.vm = vm
    this.el = vm.$el

    // 初始化模板编译方法
    this.compile(this.el)
  }
  // 基础模板方法
  compile (el) {
    const childNodes = el.childNodes
    Array .from(childNodes).forEach(node => {
      // 检测节点类型（文本节点，元素节点）
      if (isTextNode(node)) {
        // 编译文本节点内容
        this.compileText(node)
      } else if (isElementNode(node)) {
        // 编译元素节点内容
        this.compileElement(node)
      }
      // 检测当前节点是否存在子节点
      if (node.childNodes && node.childNodes.length) {
        this.compile(node)
      } 
    })
  }
  // 封装文本节点的编译方法
  compileText (node) {
    const reg = /\{\{(.+?)\}\}/g
    // 去除内容中不必要的空格与换行
    const value = node.textContent.replace(/\s/g, '')
    // 声明数据存储多段文本
    const tokens = []
    // 记录已经操作过的位置的索引
    let lastIndex = 0
    // 记录当前正在提取内容的初始索引
    let index

    let result
    while (result = reg.exec(value)) {
      // 本次提取内容的初始索引
      index = result.index
      // 判断
      if (index > lastIndex) {
        // 将中间部分内容存储到tokens中
        tokens.push(value.slice(lastIndex, index))
      }
      // 处理插值表达式内容(去除空格的操作可以省略)
      const key = result[1].trim()
      // 根据key过去对应属性值，存储到tokens
      tokens.push(this.vm[key])

      // 更新lastIndex
      lastIndex = index + result[0].length

      // 创建订阅者 Watcher实时订阅数据变化
      const pos = tokens.length - 1
      new Watcher(this.vm, key, newValue => {
        // 数据变化，修改token中的对应数据
        tokens[pos] = newValue
        node.textContent = tokens.join('')
      })
    }
    // 初始页面，初始渲染
    node.textContent = tokens.join('')
  }
  // 封装元素节点的处理方法
  compileElement (node) {
    // 获取属性节点
    Array.from(node.attributes).forEach(attr => {
      // 保存属性名称，并检测属性的功能
      let attrName = attr.name
      if (!isDirective(attrName)) return
      // 获取指令的具体名称
      attrName = attrName.slice(2)
      // 获取指令的值，代表响应式数据的名称
      let key = attr.value
      // 封装update方法，用于进行不同指令的功能分配
      this.update(node, key, attrName)
    })
  }
  // 用于指令分配的方法
  update (node, key, attrName) {
    //  名称处理
    let updateFn = this[attrName + 'Updater']
    // 检测并调用
    updateFn && updateFn.call(this, node, key, this.vm[key])
  }
  // v-text 处理
  textUpdater (node, key, value){
    // 给元素设置内容
    node.textContent = value
    // 订阅数据变化
    new Watcher(this.vm, key, newValue => {
      node.textContent = newValue
    })
  }
  // v-model处理
  modelUpdater (node, key, value) {
    // 给元素设置内容
    node.value = value
    // 订阅数据变化
    new Watcher(this.vm, key, newValue => {
      node.value = newValue
    })
    // 监听input事件，实现双向绑定
    node.addEventListener('input', () => {
      this.vm[key] = node.value
    })
  }
}

// 判断节点是否为元素节点
function isElementNode (node) {
  return node.nodeType === 1
}

// 判断节点是否为文本节点
function isTextNode (node) {
  return node.nodeType === 3
}

// 判断属性名是否为指令
function isDirective (attrName) {
  return attrName.startsWith('v-')
}
功能回顾与总结
  • Vue 类
    • 把 data 的属性注入到 Vue 实例
    • 调用 Observer 实现数据响应式处理
    • 调用 Compiler 编译模板
  • Observer
    • 将 data 的属性转换成 Getter/Setter
    • 为 Dep 添加订阅者 Watcher
    • 数据变化发送时通知 De
  • Dep
    • 收集依赖，添加订阅者（watcher）
    • 通知订阅者
  • Watcher
    • 编译模板时创建订阅者，订阅数据变化
    • 接到 Dep 通知时，调用 Compiler 中的模板功能更新视图
  • Compiler
    • 编译模板，解析指令与插值表达式
    • 负责页面首次渲染与数据变化后重新渲染
前端小菜羊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js---响应式原理
weixin_52462962的博客
03-22 3955
挑战每天更一篇--Day3
vue.js响应式原理解析与实现
weixin_34176694的博客
10-26 174
vue.js响应式原理解析与实现。angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后，再接触了vue.js，当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面。vue.js响应式原理解析与实现 Object.defineProperty es5新增了Object.defineProperty这个api，它可以允许我们为对象的属性来设定getter和setter,从而...
Vue学习之源码分析--Vue.js响应式原理（一）
心暖未晴
10-19 604
关于Vue.jsVue.js是一款MVVM框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法
vue.js 响应式原理
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-29 284
说明 【本文转载自：https://github.com/answershuto/learnVue】 关于Vue.js Vue.js是一款MVVM框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一
Vue.js 框架源码与进阶（二）- 模拟Vue.js响应式原理
最新发布
07-04
在"Vue.js框架源码与进阶（二）- 模拟Vue.js响应式原理"这个主题中，我们将深入探讨如何模拟Vue2.x的响应式机制。 首先，响应式系统的核心在于数据的观测（Observation）。在Vue2.x中，当创建一个Vue实例时，所有...
Vue.js-深入响应式原理
01-27
Vue最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的...
从JavaScript属性描述器剖析Vue.js响应式视图
01-27
JavaScript中的属性描述器是深入理解诸如Vue.js这样的响应式框架的关键。属性描述符（PropertyDescriptor）允许我们精细控制对象属性的行为，这在构建复杂的数据绑定系统时尤为重要。在Vue.js中，这种机制被用来实现...
用原生JS搞懂VUE的响应式原理，这篇文章就够了
01-08
在实现之前我们先了解下VUE的响应式是什么； 它是Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。 博主网站：www.dzyong.top 微信公众号：《前端筱园》 原理是什么 VUE中实现响应式运用到了JavaScript中object的一个很重要的属性Object.defineProperty。Object.defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。 VUE会将一个普通的JavaScript对象传入VUE实例中作为data选项，da
Vue.js 中的响应式原理是什么？
u013749113的博客
06-05 1275
在Vue.js中，响应式是指当数据发生变化时，相关的视图将自动更新。这种自动更新是通过Vue.js内部的响应式系统实现的。响应式系统是Vue.js的核心组成部分之一，它的工作原理是将数据对象转换为响应式对象。响应式对象是一个包装了原始对象的代理对象，当我们访问响应式对象的属性时，实际上是访问了原始对象的属性。但是，当我们修改响应式对象的属性时，Vue.js会自动检测到这个变化，并通知相关的视图进行更新。Vue.js的响应式原理是通过将数据对象转换为响应式对象，利用ES6中的Proxy对象实现的。
深入学习Vue.js（二）响应式原理
volit的博客
12-29 547
而若将该操作运行在我们前面的响应式系统中，它将会产生死循环，因为当我们进行了读取操作后，会立即进行赋值操作，而在赋值操作中，读取操作再次被触发，然后循环的执行这一系列操作。当有操作对响应式数据进行读取中，我们将其添加至一个依赖队列，当修改响应式数据的值时，将依赖队列中的操作依次取出，并执行。​ 当effect函数执行时，它会设置body的内容，而body是一个全局变量，除了effect函数外任何地方都可以访问到，也就是说effect函数的执行会对其他操作产生影响，即effect函数是一个副作用函数。
Vue.js深入响应式原理
bokenice的博客
05-27 380
因为学习到相关知识，所以在此做了一个知识点的总结。 不过在学习之前我们来先了解下MVVM框架， MVVM框架： M–model层 ，它可以对 数据进行增删改查 V–view层，也就是我们所说的视图层，它与HTML一样的模板类似----用户界面（UI） VM–viewModel，它相当于我们model与view中间的一面镜子也就是我们所说的model和view的一个映射层，它是一个转值器，负责转换M...
Vue.js响应式原理
weixin_38550182的博客
03-01 228
Vue.js响应式原理 1、数据驱动 数据响应式、双向绑定、数据驱动 数据响应式： a.数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率 双向绑定： a. 数据改变，视图改变；视图改变，数据也随之改变 b. 我们可以使用 v-model 在表单元素上创建双向数据绑定 数据驱动是 Vue 最独特的特性之一： a. 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图 2、数据响应式的核心原理-Vue2 Vue 2.x Vue
Vuejs的学习笔记1---------响应式原理
YinWeiLaiBuJi的专栏
10-26 1265
Vuejs采用的基于依赖收集的观测机制        1 将原生的数据改造成可观测对象，一个可观测的对象可以被取值，也可以被赋值        2 在watcher的求值过程中，每一个被取值的可观测对象都会将当前的watcher注册为自己的一个订阅者，并成为当前watcher的一个依赖。        3 当一个被依赖的可观察对象被赋值时，它会通知所有订阅自己的watcher重新求值
vue的响应式原理
垂耳兔的博客
04-28 8749
一、reduce 1.数值的累加 作用：将****前一项*和*后一项****的值进行运算，返回累积的结果 格式：数组.reduce（function（prev，next）{…}） 其中，prev表示前一项，next表示后一项。 运算规则： 默认情况下，会把数组的第一个元素作为prev的初始值。 每循环一次，把累积的结果赋给prev，next就变为下一个数组元素 var arr3 = [10,22,23,25,50]; const total = arr3.reduce(function(pre,ne
Vue.js的响应式原理
忧郁的蛋的专栏
06-30 541
使用 computed 和 watch 选项 Vue.js 提供了 computed 和 watch 选项来实现响应式系统，可以使用 computed 选项来定义计算属性，在响应式数据变化时自动更新，使用 watch 选项来监听响应式数据的变化，并在变化时执行回调函数。在 Vue 中，数据的更新和 DOM 更新是异步的。Vue.js 在设计时，也做了一些优化，避免了不必要的更新，例如通过记录哪些组件依赖于哪些数据来控制更新的组件，在 Vue.js 2.x 中，还添加了虚拟 DOM 来优化更新流程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值