了解defineProperty，实现一个简单的vue数据响应式

最新推荐文章于 2024-04-08 00:36:44 发布
最新推荐文章于 2024-04-08 00:36:44 发布
阅读量232 收藏
点赞数
文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Layouwen/article/details/115985136
版权
本文介绍了JavaScript中对象的读写监听、观察者模式和发布订阅模式，以及如何利用这些模式模拟Vue的数据监听响应。通过正则表达式替换模板变量，并使用Object.defineProperty实现数据劫持，最后通过依赖收集和发布订阅模式实现了简单的响应式系统。文章还展示了如何应用于v-model、v-text和v-html的场景。
摘要由CSDN通过智能技术生成

1、前言

本文章相关代码地址：https://github.com/layouwen/blog_demo_defineproperty

如果本文章对你有所帮助，请不要吝啬你的 Start 哦~

2、对象进行读写监听

const obj = {
  name: 'layouwen',
}
Object.defineProperty(obj, 'name', {
  configurable: true,
  enumerable: true,
  get() {
    console.log('触发get')
    return 'layouwen'
  },
  set(newValue) {
    console.log('触发set')
    return newValue
  },
})
obj.name // 触发get
obj.name = 'yuouwen' // 触发set

3、观察者模式

下面有个场景。当儿子说要出去玩的时候，爸爸告诉孩子不能出去玩。

const father = {
  eat() {
    console.log('不给出去玩！准备吃饭了')
  },
}

const son = {
  play() {
    console.log('爸，我出去玩会~')
  },
}

son.play()

我们新建一个事件触发器

const EventObj = new EventTarget()

在执行 play 方法是，通知爸爸

EventObj.addEventListener('callFather', father.eat)

const son = {
  play() {
    console.log('爸，我出去玩会~')
    EventObj.dispatchEvent(new CustomEvent('callFather'))
  },
}

4、发布订阅模式

跟上面的场景一致，我们换个思路实现。首先创建一个保存需要执行函数的队列。提供两个方法：添加新的任务 addSub，执行所有任务 notify。

class Dep {
  constructor() {
    this.subs = []
  }
  addSub(sub) {
    this.subs.push(sub)
  }
  notify() {
    this.subs.forEach(item => item.update())
  }
}

创建一个用于新建任务的类，提供一个方法：执行自己的任务 update。

class Watcher {
  constructor(callback) {
    this.callback = callback
  }
  update() {
    this.callback()
  }
}

实例化 Dep，用于将新建的任务加入到队列中。

const dep = new Dep()

创建两个对象，模拟妈妈和爸爸。

const father = {
  eat() {
    dep.addSub(
      new Watcher(() => {
        console.log('爸爸：不给出去玩！准备吃饭了')
      })
    )
  },
}

const mother = {
  eat() {
    dep.addSub(
      new Watcher(() => {
        console.log('妈妈：不给出去玩！准备吃饭了')
      })
    )
  },
}

执行里面的方法，使其加入到等待任务中

father.eat()
mother.eat()

此时创建一个儿子对象

const son = {
  play() {
    console.log('儿子：爸，我出去玩会~')
    dep.notify()
  },
}

我设置一个延迟，在 2 秒回触发儿子的 play 方法。看看是否会将爸爸和妈妈中的等待任务给执行。

setTimeout(son.play, 2000)

结果

儿子：爸，我出去玩会~
爸爸：不给出去玩！准备吃饭了
妈妈：不给出去玩！准备吃饭了

5、观察模式模拟 Vue 的数据监听响应

先实现通过正则表达式，将{{value}}内的值替换成，data 中的数值

class LVue {
  constructor(option) {
    this.$option = option
    this._data = option.data
    this.compile()
  }
  compile() {
    const el = document.querySelector(this.$option.el)
    this.compileNodes(el)
  }
  compileNodes(el) {
    /* 获取所有子节点 */
    const childNodes = el.childNodes
    childNodes.forEach(node => {
      /* 如果为元素节点，并且该节点内部还有内容，就继续进行遍历编译 */
      if (node.nodeType === 1 && node.childNodes.length > 0) {
        /* 元素节点 */
        this.compileNodes(node)
      } else if (node.nodeType === 3) {
        /* 文本节点 */
        const textContent = node.textContent
        // 创建正则。匹配{{}}中的内容
        const reg = /\{\{\s*([^\{\}\s]+)\s*\}\}/g
        /* 匹配成功的就是我们需要的内容 */
        if (reg.test(textContent)) {
          // 获得匹配到的内容
          const name = RegExp.$1
          // 替换内容
          node.textContent = node.textContent.replace(reg, this._data[name])
        }
      }
    })
  }
}

new LVue({
  el: '#app',
  data: {
    name: 'layouwen',
    age: 22,
    address: '广州市荔湾区',
  },
})

我们实现了简单的替换后，我们开始实现数据劫持监听

// 继承 EventTarget 实现监听事件
/* new content start */
class LVue extends EventTarget {
  /* new content end */
  constructor(option) {
    super()
    this.$option = option
    this._data = option.data
    this.observe(option.data)
    this.compile()
  }
  observe(data) {
    const keys = Object.keys(data)
    const that = this
    keys.forEach(key => {
      let value = data[key]
      Object.defineProperty(data, key, {
        configurable: true,
        enumerable: true,
        get() {
          return value
        },
        set(newValue) {
          /* new content start */
          // 触发对应 key 事件
          that.dispatchEvent(new CustomEvent(key, { detail: newValue }))
          /* new content end */
          // 更新闭包中缓存的 value
          value = newValue
        },
      })
    })
  }
  compile() {
    const el = document.querySelector(this.$option.el)
    this.compileNodes(el)
  }
  compileNodes(el) {
    /* 获取所有子节点 */
    const childNodes = el.childNodes
    childNodes.forEach(node => {
      /* 如果为元素节点，并且该节点内部还有内容，就继续进行遍历编译 */
      if (node.nodeType === 1 && node.childNodes.length > 0) {
        /* 元素节点 */
        this.compileNodes(node)
      } else if (node.nodeType === 3) {
        /* 文本节点 */
        const textContent = node.textContent
        // 创建正则。匹配{{}}中的内容
        const reg = /\{\{\s*([^\{\}\s]+)\s*\}\}/g
        /* 匹配成功的就是我们需要的内容 */
        if (reg.test(textContent)) {
          console.log(this, 'this1')
          // 获得匹配到的内容
          const name = RegExp.$1
          // 替换内容
          node.textContent = node.textContent.replace(reg, this._data[name])
          /* new content start */
          // 监听 name 对应的事件
          this.addEventListener(name, e => {
            console.log(this, 'this2')
            const newValue = e.detail
            const oldValue = this._data[name]
            node.textContent = node.textContent.replace(oldValue, newValue)
            console.log('页面数据刷新了')
          })
          /* new content end */
        }
      }
    })
  }
}

const lvue = new LVue({
  el: '#app',
  data: {
    name: 'layouwen',
    age: 22,
    address: '广州市荔湾区',
  },
})
setTimeout(() => {
  lvue._data.name = '梁又文'
  setTimeout(() => {
    lvue._data.age = 23
  }, 1000)
}, 2000)

6、发布订阅模式版本

通过依赖收集，对用 notify 触发所有收集的依赖实现响应式。简单模拟了一下 v-model、v-text 以及 v-html

<div id="app">
  <h1>{{name}}</h1>
  <input type="text" v-model="name" />
  <h2>v-text</h2>
  <div v-text="name"></div>
  <div v-html="name"></div>
  <div>
    <p>年龄:{{age}}</p>
    <p>地址:{{address}}</p>
  </div>
</div>
<script>
  class LVue2 {
    constructor(option) {
      this.$option = option
      this.$data = option.data
      this.observer()
      this.compile()
    }
    observer() {
      const keys = Object.keys(this.$data)
      keys.forEach(keyName => {
        const dep = new Dep()
        let value = this.$data[keyName]
        Object.defineProperty(this.$data, keyName, {
          configurable: true,
          enumerable: true,
          get() {
            if (Dep.target) {
              dep.addSub(Dep.target)
            }
            return value
          },
          set(newValue) {
            dep.notify(newValue)
            value = newValue
          },
        })
      })
    }
    compile() {
      const el = document.querySelector(this.$option.el)
      this.compileNodes(el)
    }
    compileNodes(el) {
      const childNodes = el.childNodes
      childNodes.forEach(node => {
        if (node.nodeType === 1) {
          /* new content start */
          // 新增 v-model 属性监听
          let attrs = node.attributes
          ;[...attrs].forEach(attr => {
            const attrName = attr.name
            const attrValue = attr.value
            if (attrName === 'v-model') {
              node.value = this.$data[attrValue]
              node.addEventListener('input', e => {
                this.$data[attrValue] = e.target.value
              })
            } else if (attrName === 'v-text') {
              node.innerText = this.$data[attrValue]
              new Watcher(this.$data, attrValue, newValue => {
                node.innerText = newValue
              })
            } else if (attrName === 'v-html') {
              node.innerHTML = this.$data[attrValue]
              new Watcher(this.$data, attrValue, newValue => {
                node.innerHTML = newValue
              })
            }
          })
          /* new content end */
          if (node.childNodes.length > 0) {
            this.compileNodes(node)
          }
        } else if (node.nodeType === 3) {
          const textContent = node.textContent
          const reg = /\{\{\s*([^\{\}\s]+)\s*\}\}/g
          if (reg.test(textContent)) {
            const valueName = RegExp.$1
            node.textContent = node.textContent.replace(reg, this.$data[valueName])
            new Watcher(this.$data, valueName, newValue => {
              const oldValue = this.$data[valueName]
              node.textContent = node.textContent.replace(oldValue, newValue)
            })
          }
        }
      })
    }
  }

  class Dep {
    constructor() {
      this.subs = []
    }
    addSub(sub) {
      this.subs.push(sub)
    }
    notify(newValue) {
      this.subs.forEach(sub => {
        sub.update(newValue)
      })
    }
  }

  class Watcher {
    constructor(data, key, cb) {
      this.cb = cb
      // 保存实例对象到 Dep 中的 target 中
      Dep.target = this
      // 为了触发 get 收集依赖
      data[key]
      Dep.target = null
    }
    update(newValue) {
      this.cb(newValue)
    }
  }

  const lvue2 = new LVue2({
    el: '#app',
    data: {
      name: '梁又文',
      age: 23,
      address: '广州市荔湾区',
    },
  })
  setTimeout(() => (lvue2.$data.name = '梁文文'), 1000)
  setTimeout(() => (lvue2.$data.name = '我是v-text的内容'), 2000)
  setTimeout(() => (lvue2.$data.name = '<h3>我是v-html的内容</h3>'), 3000)
</script>
努力了吗梁同学
关注
深入Vue实现原理，实现一个响应式框架
02-24
在前面的章节中我们已经学习了Vue.js的基础内容并且了解了Vue.js的源码实现，包括：Vue的生命周期、Vue的数据响应、Vue的渲染流程等等，在这一章节我们会和大家一起去实现一个响应式的框架--MVue，MVue会遵循Vue的...
vue3-基础知识（2）- 响应式
junjiahuang的博客
11-18 1909
【代码】vue3-基础知识（2）- 响应式。
vue3 defineProps传值使用 ref 响应式失效
nullzzzz的博客
01-14 1万+
子组件接收父组件的传参。 <template> </template> <script lang="ts" setup> import { ref, reactive, toRefs, defineEmits, toRef } from "vue"; </script>
Vue3中如何响应式解构 props
qq_40147756的博客
11-24 5030
Vue3中如何响应式解构 props。vue3.5 的新特性
在 Vue 3 中， defineProps 定义的 props 默认是响应式的
LRQQHM的博客
06-21 1731
在 Vue 3 中， defineProps 定义的 props 默认是响应式的，因此，当在子组件中使用时，无需进行任何特殊的操作。
数据绑定
weixin_33890499的博客
05-21 108
// Observer class Observer { constructor (data) { this.walk(data) } walk (data) { // 遍历 let keys = Object.keys(data) for(let i = 0; i < keys.length; i++)...
你了解vue3.0响应式数据怎么实现吗
10-16
Vue 3.0的响应式数据实现是该版本中一个非常重要的特性，它标志着Vue从依赖于Object.defineProperty()的方式转变为使用Proxy来实现响应式系统。这一改进不仅提高了性能，还提供了更强大的特性。 首先，我们来探讨...
Vue data的数据响应式到底是如何实现的
10-15
那么，Vue数据响应式到底是如何实现的呢？ 首先，我们要明白，Vue并不能直接监听到像`data: { n: 0 }`这样声明的数据变化。Vue通过`Object.defineProperty()`这个JavaScript API来实现数据响应性。`Object....
浅谈Vue 数据响应式原理
08-27
Vue 数据响应式原理详解 Vue 的数据响应式原理是 Vue 框架最...Vue 的数据响应式原理是基于 Object.defineProperty() 方法和 Dep 实例实现的。它使得开发者可以轻松地实现数据的双向绑定，提高了开发效率和应用性能。
JS 利用defineProperties实现的响应式 计算器
jl2qzz的博客
09-11 255
响应式
【vue2源码学习】— 响应式初始化
kyyius的博客
03-08 197
vue数据响应式初始化过程和优化点
vue3中defineProps传值失去响应
菜鸟先飞
05-03 7882
写小项目的时候，遇到了一个问题，异步请求出的数据，无法及时传值给子组件，一时竟想不明白为什么，经过查阅资料，发现，子组件在用defineProps接受到值以后，必须用toRefs来解构一下，才可以。
Vue3之响应式
Zhang_YingJie的博客
10-25 6577
如果有多个文件都直接修改数据的话，我们对于数据的更改是不确定的，所以尽可能的对于响应式的状态的变更都保持在供给方组件中，这样确保状态的声明和变更操作都内聚在同一个组件中。是一个钩子函数，是在组件中使用组合API的入口，当我们在选项式API的组件中使用组合API时需要这个函数，组合API都要写在这个函数内。生成的是一个代理对象，可以理解为有一个对象包裹住这个原对象，这个对象就叫原对象的包装对象，响应性是通过这个包装对象实现的。创建的响应式对象都是深层的，深层对象或数组也是响应式的，他们的改变都能被监测到。
defineProps
热门推荐
过客如期的博客
09-01 4万+
1.在vue2中，我们使用选项api中的props来接受父组件传递来的数据。2.在vue3的setup中，我们使用来定义父组件传递的props。
vue2.x 是怎么让普通对象变为 响应式对象的呢
buyiny123的博客
09-02 2205
function initData (vm) { var data = vm.$options.data; data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}; if (!isPlainObject(data)) { data = {}; process.env.NODE_ENV !== 'production' && warn( .
js通过Object.defineProperty实现数据响应式
最新发布
风天语的博客
04-08 670
数据响应式，依赖收集，派发更新，属性描述符，get，set，Object.defineProperty
通过学会Object.defineProperty的用法彻底理解vue2响应式原理，附带对比vue3响应式原理
talentT的博客
03-31 1085
大白话就是vue写在data里面的变量，在页面初始化的时候会通过Object.defineProperty递归去拦截所有属性，然后通过get把对应属性的依赖收集放到一个数组里面，当我们改变一个data里面的属性时，Object.defineProperty就用forEach去循环更新依赖数组里面的属性，这样就实现了双向绑定。上面其它属性是一带而过，开始讲最重要的两个属性 set和get这也是vue2双向绑定的绝对核心，至于这两个属性什么作用的？get： 读取时内部调用的函数，默认值是undefined。
Vue响应式原理(defineProperty)
weixin_45785873的博客
11-10 2851
Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。Vue通过Object.defineProperty来实现监听数据的改变和读取（属性中的getter和setter方法） 实现数据劫持
vue2响应式原理之Object.defineProperty()方法
学如逆水行舟，不进则退！
05-13 3631
vue2响应式原理之Object.defineProperty()方法
手把手教你实现Vue响应式框架：从Object.defineProperty看核心机制
在本章节中，我们将深入探讨Vue实现原理，并通过实例化一个名为MVue的轻量级响应式框架，以便更好地理解和掌握Vue的核心概念——响应式数据渲染。在开始MVue的构建之前，我们先回顾两个关键知识点： 1. Object....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值