【vue】双向数据绑定（二）-- 实现vue的数据劫持与发布订阅

最新推荐文章于 2024-04-06 17:54:36 发布
最新推荐文章于 2024-04-06 17:54:36 发布
阅读量511 收藏 4
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52834435/article/details/124537907
版权

【vue】双向数据绑定（二）-- 实现vue的数据劫持与发布订阅

通过 Object.defineProperty() 来实现一个简单的数据劫持

文章目录



1.创建一个 index.html 和 vue.js，并对属性进行监测（数据劫持） --> Observe函数

在 index.html 页面上创建一个 vue实例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h3>姓名是：{{ name }}</h3>
    <h3>年龄是：{{ age }}</h3>
    <h3>info.a的值是: {{ info.a }}</h3>

    <!-- 通过表单来验证数据劫持 -->
    <div>name的值: <input type="text" v-model="name" /></div>
    <div>info.a的值: <input type="text" v-model="info.a" /></div>
  </div>

  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: { 
        name: 'zs',
        age: 20,
        info: {
          a: 'a1',
          c: 'c1'
        }
      }
    })

    console.log(vm)
  </script>
</body>

</html>

vue.js

第一步先在 vue实例上 绑定 $data 属性，该属性的值就是 vue实例上的数据。

接下来对所有数据进行监测。

具体实现监测的方法：

  • 创建一个监测（数据劫持）的函数
  • 在函数里，通过 Object.keys(obj) 获取到当前 obj 上的每个属性
  • 对于每一个属性设置 set 和 get
  • 并且对于子节点还是 object 的情况进行递归
class Vue {
  constructor(options) {
    // 1.这里的options就指向vue实例中的 el 和 data
    this.$data = options.data

    // 2.调用数据劫持的方法
    Observe(this.$data)
      
  }
}

// 2.1 定义一个数据劫持的方法
function Observe(obj) {
  // 这是递归的终止条件
  if (!obj || typeof obj !== 'object') return

  // 通过 Object.keys(obj) 获取到当前 obj 上的每个属性
  Object.keys(obj).forEach((key) => {
    // 当前被循环的 key 所对应的属性值
    let value = obj[key]
    // 把 value 这个子节点，进行递归
    Observe(value)
    // 需要为当前的 key 所对应的属性，添加 getter 和 setter
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        console.log(`有人获取了 ${key} 的值：`)
        return value
      },
      set(newVal) {
        value = newVal
        Observe(value)
      },
    })
  })
}

打开控制台，发现此时 vm身上所有的属性都已经添加上了 setter 和getter

在这里插入图片描述

并且，可以使用 vm.$data 的方法获取对应的属性值

在这里插入图片描述



2.进行属性代理，使得可以通过 vm.age 直接获取，而不是使用 vm.$data.age

// 属性代理
    Object.keys(this.$data).forEach((key) => {
      Object.defineProperty(this, key, {
        enumerable: true,
        configurable: true,
        get() {
          return this.$data[key]
        },
        set(newValue) {
          this.$data[key] = newValue
        },
      })
    })

vue.js 完整代码

class Vue {
  constructor(options) {
    // 1.这里的options就指向vue实例中的 el 和 data
    this.$data = options.data

    // 2.调用数据劫持的方法
    Observe(this.$data)

    // 3.属性代理
    Object.keys(this.$data).forEach((key) => {
      Object.defineProperty(this, key, {
        enumerable: true,
        configurable: true,
        get() {
          return this.$data[key]
        },
        set(newValue) {
          this.$data[key] = newValue
        },
      })
    })
  }
}

// 2.1 定义一个数据劫持的方法
function Observe(obj) {
  // 这是递归的终止条件
  if (!obj || typeof obj !== 'object') return

  // 通过 Object.keys(obj) 获取到当前 obj 上的每个属性
  Object.keys(obj).forEach((key) => {
    // 当前被循环的 key 所对应的属性值
    let value = obj[key]
    // 把 value 这个子节点，进行递归
    Observe(value)
    // 需要为当前的 key 所对应的属性，添加 getter 和 setter
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        console.log(`有人获取了 ${key} 的值：`)
        return value
      },
      set(newVal) {
        value = newVal
        Observe(value)
      },
    })
  })
}

打开控制台，进行测试

在这里插入图片描述



3.读取vm的属性值，并将值填充到 {{xxx}} 中进行渲染 --> Compile函数

定义 Compile函数，（ps: 所有相关函数的定义都放在 class Vue 外面，调用都在 constructor 中进行）

// 对 HTML 结构进行模板编译的方法
function Compile(el, vm) {
  // 获取 el 对应的 DOM 元素
  vm.$el = document.querySelector(el)

  // 创建文档碎片，提高 DOM 操作的性能
  const fragment = document.createDocumentFragment()

  while ((childNode = vm.$el.firstChild)) {
    fragment.appendChild(childNode)
  }

  // 进行模板编译
  replace(fragment)

  vm.$el.appendChild(fragment)

  // 负责对 DOM 模板进行编译的方法
  function replace(node) {
    // 定义匹配插值表达式的正则
    const regMustache = /\{\{\s*(\S+)\s*\}\}/

    // 证明当前的 node 节点是一个文本子节点，需要进行正则的替换
    if (node.nodeType === 3) {
      // 注意：文本子节点，也是一个 DOM 对象，如果要获取文本子节点的字符串内容，需要调用 textContent 属性获取
      const text = node.textContent
      // 进行字符串的正则匹配与提取
      const execResult = regMustache.exec(text)
      console.log(execResult)
      if (execResult) {
        const value = execResult[1].split('.').reduce((newObj, k) => newObj[k], vm)
        node.textContent = text.replace(regMustache, value)
        // 在这个时候，创建 Watcher 类的实例
        new Watcher(vm, execResult[1], (newValue) => {
          node.textContent = text.replace(regMustache, newValue)
        })
      }
      // 终止递归的条件
      return
    }

    // 判断当前的 node 节点是否为 input 输入框
    if (node.nodeType === 1 && node.tagName.toUpperCase() === 'INPUT') {
      // 得到当前元素的所有属性节点
      const attrs = Array.from(node.attributes)
      const findResult = attrs.find((x) => x.name === 'v-model')
      if (findResult) {
        // 获取到当前 v-model 属性的值   v-model="name"    v-model="info.a"
        const expStr = findResult.value
        const value = expStr.split('.').reduce((newObj, k) => newObj[k], vm)
        node.value = value

        // 创建 Watcher 的实例
        new Watcher(vm, expStr, (newValue) => {
          node.value = newValue
        })

        // 监听文本框的 input 输入事件，拿到文本框最新的值，把最新的值，更新到 vm 上即可
        node.addEventListener('input', (e) => {
          const keyArr = expStr.split('.')
          const obj = keyArr.slice(0, keyArr.length - 1).reduce((newObj, k) => newObj[k], vm)
          const leafKey = keyArr[keyArr.length - 1]
          obj[leafKey] = e.target.value
        })
      }
    }

    // 证明不是文本节点，可能是一个DOM元素，需要进行递归处理
    node.childNodes.forEach((child) => replace(child))
  }
}

在定义好，要在 class Vue 的 constructor 中调用模板编译的函数

    // 调用模板编译的函数
    Compile(options.el, this)



4.创建依赖收集的 Dep类，去收集 watcher 订阅者的类

// 依赖收集的类/收集 watcher 订阅者的类
class Dep {
  constructor() {
    // 今后，所有的 watcher 都要存到这个数组中
    this.subs = []
  }

  // 向 subs 数组中，添加 watcher 的方法
  addSub(watcher) {
    this.subs.push(watcher)
  }

  // 负责通知每个 watcher 的方法
  notify() {
    this.subs.forEach((watcher) => watcher.update())
  }
}



5.创建订阅者的 Watcher类

// 订阅者的类
class Watcher {
  // cb 回调函数中，记录着当前 Watcher 如何更新自己的文本内容
  //    但是，只知道如何更新自己还不行，还必须拿到最新的数据，
  //    因此，还需要在 new Watcher 期间，把 vm 也传递进来（因为 vm 中保存着最新的数据）
  // 除此之外，还需要知道，在 vm 身上众多的数据中，哪个数据，才是当前自己所需要的数据，
  //    因此，必须在 new Watcher 期间，指定 watcher 对应的数据的名字
  constructor(vm, key, cb) {
    this.vm = vm
    this.key = key
    this.cb = cb

    // ↓↓↓↓↓↓ 下面三行代码，负责把创建的 Watcher 实例存到 Dep 实例的 subs 数组中 ↓↓↓↓↓↓
    Dep.target = this
    key.split('.').reduce((newObj, k) => newObj[k], vm)
    Dep.target = null
  }

  // watcher 的实例，需要有 update 函数，从而让发布者能够通知我们进行更新！
  update() {
    const value = this.key.split('.').reduce((newObj, k) => newObj[k], this.vm)
    this.cb(value)
  }
}



总结：


完整代码 – index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h3>姓名是：{{ name }}</h3>
    <h3>年龄是：{{ age }}</h3>
    <h3>info.a的值是: {{ info.a }}</h3>

    <!-- 通过表单来验证数据劫持 -->
    <div>name的值: <input type="text" v-model="name" /></div>
    <div>info.a的值: <input type="text" v-model="info.a" /></div>
  </div>

  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: { 
        name: 'zs',
        age: 20,
        info: {
          a: 'a1',
          c: 'c1'
        }
      }
    })

    console.log(vm)
  </script>
</body>

</html>

完整代码 – vue.js
class Vue {
  constructor(options) {
    this.$data = options.data

    // 调用数据劫持的方法
    Observe(this.$data)

    // 属性代理
    Object.keys(this.$data).forEach((key) => {
      Object.defineProperty(this, key, {
        enumerable: true,
        configurable: true,
        get() {
          return this.$data[key]
        },
        set(newValue) {
          this.$data[key] = newValue
        },
      })
    })

    // 调用模板编译的函数
    Compile(options.el, this)
  }
}


// 1.定义一个数据劫持的方法
function Observe(obj) {
  // 这是递归的终止条件
  if (!obj || typeof obj !== 'object') return
  const dep = new Dep()

  // 通过 Object.keys(obj) 获取到当前 obj 上的每个属性
  Object.keys(obj).forEach((key) => {
    // 当前被循环的 key 所对应的属性值
    let value = obj[key]
    // 把 value 这个子节点，进行递归
    Observe(value)
    // 需要为当前的 key 所对应的属性，添加 getter 和 setter
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        // 只要执行了下面这一行，那么刚才 new 的 Watcher 实例，
        // 就被放到了 dep.subs 这个数组中了
        Dep.target && dep.addSub(Dep.target)
        return value
      },
      set(newVal) {
        value = newVal
        Observe(value)
        // 通知每一个订阅者更新自己的文本
        dep.notify()
      },
    })
  })
}


// 2.对 HTML 结构进行模板编译的方法
function Compile(el, vm) {
  // 获取 el 对应的 DOM 元素
  vm.$el = document.querySelector(el)

  // 创建文档碎片，提高 DOM 操作的性能
  const fragment = document.createDocumentFragment()

  while ((childNode = vm.$el.firstChild)) {
    fragment.appendChild(childNode)
  }

  // 进行模板编译
  replace(fragment)

  vm.$el.appendChild(fragment)

  // 负责对 DOM 模板进行编译的方法
  function replace(node) {
    // 定义匹配插值表达式的正则
    const regMustache = /\{\{\s*(\S+)\s*\}\}/

    // 证明当前的 node 节点是一个文本子节点，需要进行正则的替换
    if (node.nodeType === 3) {
      // 注意：文本子节点，也是一个 DOM 对象，如果要获取文本子节点的字符串内容，需要调用 textContent 属性获取
      const text = node.textContent
      // 进行字符串的正则匹配与提取
      const execResult = regMustache.exec(text)
      console.log(execResult)
      if (execResult) {
        const value = execResult[1].split('.').reduce((newObj, k) => newObj[k], vm)
        node.textContent = text.replace(regMustache, value)
        // 在这个时候，创建 Watcher 类的实例
        new Watcher(vm, execResult[1], (newValue) => {
          node.textContent = text.replace(regMustache, newValue)
        })
      }
      // 终止递归的条件
      return
    }

    // 判断当前的 node 节点是否为 input 输入框
    if (node.nodeType === 1 && node.tagName.toUpperCase() === 'INPUT') {
      // 得到当前元素的所有属性节点
      const attrs = Array.from(node.attributes)
      const findResult = attrs.find((x) => x.name === 'v-model')
      if (findResult) {
        // 获取到当前 v-model 属性的值   v-model="name"    v-model="info.a"
        const expStr = findResult.value
        const value = expStr.split('.').reduce((newObj, k) => newObj[k], vm)
        node.value = value

        // 创建 Watcher 的实例
        new Watcher(vm, expStr, (newValue) => {
          node.value = newValue
        })

        // 监听文本框的 input 输入事件，拿到文本框最新的值，把最新的值，更新到 vm 上即可
        node.addEventListener('input', (e) => {
          const keyArr = expStr.split('.')
          const obj = keyArr.slice(0, keyArr.length - 1).reduce((newObj, k) => newObj[k], vm)
          const leafKey = keyArr[keyArr.length - 1]
          obj[leafKey] = e.target.value
        })
      }
    }

    // 证明不是文本节点，可能是一个DOM元素，需要进行递归处理
    node.childNodes.forEach((child) => replace(child))
  }
}


// 3.依赖收集的类/收集 watcher 订阅者的类
class Dep {
  constructor() {
    // 今后，所有的 watcher 都要存到这个数组中
    this.subs = []
  }

  // 向 subs 数组中，添加 watcher 的方法
  addSub(watcher) {
    this.subs.push(watcher)
  }

  // 负责通知每个 watcher 的方法
  notify() {
    this.subs.forEach((watcher) => watcher.update())
  }
}


// 4.订阅者的类
class Watcher {
  // cb 回调函数中，记录着当前 Watcher 如何更新自己的文本内容
  //    但是，只知道如何更新自己还不行，还必须拿到最新的数据，
  //    因此，还需要在 new Watcher 期间，把 vm 也传递进来（因为 vm 中保存着最新的数据）
  // 除此之外，还需要知道，在 vm 身上众多的数据中，哪个数据，才是当前自己所需要的数据，
  //    因此，必须在 new Watcher 期间，指定 watcher 对应的数据的名字
  constructor(vm, key, cb) {
    this.vm = vm
    this.key = key
    this.cb = cb

    // ↓↓↓↓↓↓ 下面三行代码，负责把创建的 Watcher 实例存到 Dep 实例的 subs 数组中 ↓↓↓↓↓↓
    Dep.target = this
    key.split('.').reduce((newObj, k) => newObj[k], vm)
    Dep.target = null
  }

  // watcher 的实例，需要有 update 函数，从而让发布者能够通知我们进行更新！
  update() {
    const value = this.key.split('.').reduce((newObj, k) => newObj[k], this.vm)
    this.cb(value)
  }
}
程序媛小y
关注
专栏目录
vue的响应式原理，数据劫持和发布者订阅者模式
TDG_SF的博客
09-19 658
vue的响应式原理 数据劫持+发布者订阅者模式 数据劫持 new vue时候拿到data中返回的对象，通过object.key().forEach()遍历，给原来对象中的属性通过object.defineProperty重新定义赋值。通过这个方法在对象使用这个属性的时候（obj[key]）会通过属性的get()方法使用，修改这个属性值的时候是通过这个属性的set()方法修改。所以我们可以对数据做一个劫持。 const obj={ message:'哈哈哈', name:'sf' }
Vue双向绑定原理-数据劫持和发布订阅 - Vue篇
阿莹yes的博客
03-10 836
目录原理介绍DEMO实现双向绑定第一部分是Observer：第二部分是Watcher：第三部分是Dep：Vue中的双向绑定Vue中的Observer：Vue中的Dep：Vue中的Watcher：总结一下 原理介绍 Vue.js是通过数据劫持以及结合发布者-订阅者来实现双向绑定的，数据劫持是利用ES5的Object.defineProperty(obj, key, val)来劫持各个属性的的setter以及getter，在数据变动时发布消息给订阅者，从而触发相应的回调来更新视图。 双向数据绑定，简单点来说分为
浅谈Vue的双向绑定原理——数据劫持+（订阅者/发布者）模式
王春燕的博客
05-08 3128
一、访问器属性 关于Vue的双向绑定，核心是Object.defineProperty()方法， 语法： Object.defineProperty(obj, prop, descriptor) 其中： obj 要在其上定义属性的对象。 prop 要定义或修改的属性的名称。 descriptor 将被定义或修改的属性描述符。 其实，简单点来说，就是通过此方法来定义一个值。 调用，使用到了get方法， 赋值，使用到了set方法。 ...
【vue】双向数据绑定（一）--发布订阅模式
前端学习博客
05-02 551
【vue】双向数据绑定（一）–发布订阅模式 一个最简单的发布订阅模式 Dep 类 负责进行依赖收集 首先，有个数组，专门来存放所有的订阅信息 其次，还要提供一个向数组中追加订阅信息的方法 然后，还要提供一个循环，循环触发数组中的每个订阅信息 Watcher 类 负责订阅一些事件，将自己的一些行为交给了 Dep类，放在 Dep数组中。 当以后到了一定时机， Dep类负责对每一个行为进行循环，然后触发。此时 Watcher类就可以收到通知。 // 收集依赖/收集订阅者 class Dep
vue响应式原理，数据劫持 + 发布订阅模式
年三十的博客
06-06 293
数据劫持，vue2使用Obeject.defineProperty()监听数据变化，vue3使用ES6的proxy构造函数监听数据变化，为每个属性分配一个订阅者集合的管理数组Dep，添加方式不限于：v-model，v-bing，{{}}，等用到该属性的指令，修改属性值则触发set()方法，在set()方法内通知订阅者数组Dep，订阅者数组循环调用自身的update()方法更新视图。订阅者，有update()方法，收到Dep的通知后，会调用自身的update()方法，并触发Compile中绑定的回调。
详解Vue双向数据绑定原理解析
08-29
Vue 双向数据绑定是 Vue 框架中的一种核心机制，实现数据和视图之间的双向绑定。下面是对 Vue 双向数据绑定原理的详细解析。 基本原理 Vue 采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty...
vue双向数据绑定原理探究(附demo)
08-31
`bindModel` 处理 `w-model` 指令，实现数据和表单元素的双向绑定。 ```javascript init: function() { this.bindText(); this.bindModel(); } ``` 3. `bindText` 方法遍历所有带有 `w-text` 指令的元素，将其...
Vue的双向数据绑定实现原理解析
10-15
Vue的双向数据绑定是一个精心设计的机制，它通过数据劫持和发布者-订阅者模式实现了模型与视图的实时同步。Observer、Compile和Watcher共同协作，确保数据变化时视图能够快速响应。这一机制使得Vue在构建用户界面时...
Vue数据双向绑定原理及简单实现方法
08-27
Vue 数据双向绑定原理及简单实现方法 数据双向绑定是 Vue 框架的核心特性之一...我们可以通过 Object.defineProperty() 来实现数据劫持，并使用 Dep 来实现发布者-订阅者模式，最后通过 Watcher 来更新视图层的变化。
关于vue的双向数据绑定：MVVM、数据劫持和发布-订阅模式
qq_60990876的博客
07-20 979
vue 在实例化的时候，使用方法或Proxy 构造函数，对 data 进行getter 和 setter的处理。在组件渲染时，若用到 data 里的某个数据，这个数据就会被依赖收集进 watcher 里。当数据更新，如果这个数据在 watcher 里，就会收到通知并更新，否则不会更新——vue 采用 “数据劫持”+“观察者模式（发布者-订阅者模式）”相结合的方式实现了双向绑定——vue 的响应式原理。原文链接3。
Vue源码学习笔记之实现双向数据绑定（一）--- 发布订阅模式
tang_1227的博客
10-23 340
首先看下vue官方文档中对于响应式原理说明的配图： Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现双向数据绑定的。当把一个普通 Js 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，通过用Object.defineProperty 设定对象属性的 setter/getter 方法来监听数...
Vue双向绑定原理解析，理解发布订阅难点问题！
lin_ji_you的博客
04-19 135
Vue双向绑定是面题的难点，之前看了很多视频都没有理解Vue双向绑定发布订阅的问题，终于在b站黑马视频找到讲的比较好的视频了（https://www.bilibili.com/video/BV1Dr4y1c7xS?from=search&seid=1122885673916184117） 源码 感兴趣的小伙伴可以去看视频，讲的很清楚了 class Vue { constructor(options) { this.$data = options.data; // 调用数据劫持
「Vue系列」之Vue2的数据劫持、发布订阅者模式、diff算法
码农的博客
06-25 2736
Vue双向绑定（数据劫持，发布订阅者模式，diff算法） 最近一段时间自己找点东西学习，因为面试vue双向绑定问的挺多的，就想去深入研究一下本质原理，说是本质也不算，就是看了看别人的研究总结一点自己的看法和理解。 数据劫持 首先想实现双向绑定，肯定要先知道数据的变化，这时候应该怎么做？就是使用一个方法进行数据劫持。这个方法就是Object.defineProperty()。 介绍一下这个方法： O...
vue响应式，数据劫持&发布订阅实现
小易不止于搬砖的博客
02-07 580
vue数据双向绑定原理： 数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 observer：每个对象的属性，添加到订阅者容器Dependency(Dep)中，当数据发生变化的时候发出notice通知。 Watcher：某个属性数据的监听者/订阅者，一旦数据有变化，它会通知指令(directive)重新编译模板并渲染UI Dep对象: 订阅
sport应用
08-27 332
Vue数据双向绑定 Vue是通过数据劫持的方式来实现数据双向数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，该方法允许精确地添加或修改对象的属性，对数据添加属性描述符中的getter与setter实现劫持。 描述 运行一个Vue实例并将data打印，可以看到对象中对于msg有了get与set，通过他们就可以实现数据的劫持，从而进行数据的更新，在Vue中get与set是通过ES5的Object.defineProperty()方法定义的，该方法的具体
vue源码:Watcher系列（一）
yezi__6的博客
04-07 2092
vue源码:Watcher系列（一） 在分析之前我们先来看看，vue中都有哪些Watcher种类呢？以及分别在什么时候创建呢？从vue源码里面看，Watcher是一个公共类，在不同的地方去初始化Watcher就代表不同类的Watcher。主要分为以下三类： computed watcher：执行计算属性更新computed user watcher：用户注册的普通watcher render watcher：负责视图更新 注意者三种watcher的执行顺序为computed watcher、user w
vue中三种watcher
最新发布
qq_42931285的博客
04-06 1232
vue中三种watcher
Vue2双向绑定，Object.defineProperty、Observe、Compile、Watcher、Dep各显神通，相辅相成
昔冰_G的博客
07-13 1033
Vue2.x双向绑定原理：除Object.defineProperty()数据劫持，还有Compile模板解析、Watcher订阅者、Dep收集订阅者以便对订阅者们做同一更新处理，相辅相成以实现数据劫持、模板引用数据提取、模板引用数据对应值的更新等多方面功能...
代码实现vue的双向绑定（一）：订阅者和发布者
weixin_44769310的博客
03-05 1316
参看相关文章以及 vue 源码，自己去实现 vue 的双向绑定的观察者模式
理解Vue数据双向绑定：原理与实现
"Vue数据双向绑定是通过数据劫持与发布者-订阅者模式实现的，结合`Object.defineProperty()`和观察者模式的核心技术。本文旨在深入解析Vue数据双向绑定的原理，并提供简单实现方法。" 在JavaScript的世界里，Vue.js...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序媛小y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值