VUE是如何实现响应式的

最新推荐文章于 2022-12-03 16:17:06 发布
最新推荐文章于 2022-12-03 16:17:06 发布
阅读量142 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45022949/article/details/105826772
版权

关键：Object.defineProperty()
将data的属性代理到vm上
修改data属性后，vue能立刻监听到
在这里插入图片描述

入坑做码农的N天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex的响应式原理
weixin_57259948的博客
10-12 1526
状态管理 在开发中，我们会用应用程序处理很多的数据，这些数据需要保存在我们应用程序徐的某一个位置，对于这些数据的管理我们就称之为状态管理 使用方法 下载vuex最新版npm install vuex@next 新建文件夹及文件 * index.js导入createStore ，并创建state共享数据 import { createStore } from 'vuex' const store = createStore({ state() { return ...
vue响应式简单实现
weixin_47450807的博客
03-05 1687
一、写在前面 关于MVVM开发模式，不得不说其响应式原理。响应式是MVVM架构和MVP之间最为显著的区别。在以前使用MVP架构进行前端开发时，其中间层p需要处理的逻辑特别多，导致比较臃肿。随着MVVM架构的出现，大大减少了中间层处理的业务逻辑。原因是其响应式原理，视图可以触发其中的某一个指令来改变数据，当数据改变时，视图也会随之刷新。下面我们将简单实现一个响应式。 二、vue2和vue3的响应式的区别 在vue2中我们对响应式数据进行监听时，使用的是Object.defineProperty方法来实现的，在
vue：使用vuex数据如何做到“响应式”
m0_64401231的博客
12-03 3705
使用vuex数据如何做到“响应式”。所以使用vuex数据时，最好还是用mapState或者mapGetter，可以省去你很多不必要的麻烦。
Vue3下使用Vuex(store)实现响应式全局变量
热门推荐
fatfish517的博客
03-21 2万+
本文记录了如何使用vuex建立响应式全局变量，内容有：按类别建立多模块、如何引入、使用、如何不借助第三方工具在localStorage、sessionStorage中实现数据持久化，以及vuex store state的赋值问题。
Vue 如何关掉响应式
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
03-31 5293
大家都知道Vue有双向数据绑定 ，但是很少人知道怎样把它这个功能关掉 比如想要让某个值的改变不改变原有值 使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。 例子： var obj = { foo: 'bar' } Object.freeze(obj) new Vue({ el: '#app', data: obj }) <div id="app"> <p>{{ foo }}</p> &l
Vue响应式原理
weCat_s的博客
02-16 1734
一、深入响应式原理 当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新。 Vue通过watcher将data中的属性全部使用Object.definePropery编程,当属性值发生改变的时候， getter和setter就会触发， 然后wather触发， 通知视图（V）进行重新渲染。 数据必须放在data选项中才能进行深入响应式。 底层原理：核心使用的是es5的一个方法...
Vue如何实现响应式系统
10-18
本文将深入探讨Vue如何实现响应式系统。 首先，我们需要理解响应式系统的基本概念。在Vue中，响应式系统的核心思想是"数据变更驱动视图更新"。这意味着当数据发生变化时，视图会自动更新以反映这些变化。这让我们...
Vue3.0数据响应式原理详解
10-16
在Vue3中，响应式系统的实现主要依赖于ES6的`Proxy`和`Reflect`对象，这两个新特性使得Vue能够更加精细地监控数据的变化。 1. **ES6 Proxy**: `Proxy`允许我们创建一个代理对象，该对象可以拦截和控制对原始对象的...
Vue data的数据响应式到底是如何实现的
10-15
或者，可以通过数组的变异方法（如`push`）来实现响应式更新： ```javascript this.array.push(item) ``` Vue对这些变异方法进行了改写，确保它们能够触发数据的响应式更新。 总结起来，Vue数据响应式的核心机制...
vue.js响应式原理解析与实现
10-18
下面我们将详细讲解Vue.js响应式原理及其实现方式。 首先，我们要了解Vue.js如何实现数据的响应式。这主要依赖于JavaScript的`Object.defineProperty`方法。在ES5中，`Object.defineProperty`允许我们为对象的属性...
Vuex 响应式的原理与解决方案
qq_15506981的博客
11-27 2940
vuex的响应式必须是事先添加到对象中的元素,vuex才会监听响应式变化,如果实现没有添加,那么将不是响应式. 如,往一个对象中添加属性时使用 state:{ obj:{ name:"zhangsan", age:"18" } } mutations:{ //payload为参数 methodName(state,payload){ //事先定义好的name这是响应式的 state.obj.name = "lisi" //事先未定义好的address不是响应式的,数据更新页面不会更新
Vue.js学习 Item12 – 内部响应式原理探究
小平果的欢乐谷
07-11 2917
深入响应式原理大部分的基础内容我们已经讲到了，现在讲点底层内容。Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象，修改它则更新视图。这让状态管理非常简单且直观，不过理解它的原理也很重要，可以避免一些常见问题。下面我们开始深挖 Vue.js 响应系统的底层细节。如何追踪变化把一个普通对象传给 Vue 实例作为它的 data 选项，Vue.js 将遍历它的属性，用 Object.defi
vuex 中的响应式坑
小傲哥哥的博客
03-21 3316
我们都知道，vuex是vue中很重要的一部分，每当涉及到数据在多个页面都要用到时，而且页面的层级关系相对来说比较复杂是，那样使用传统的组件之间传值方法就显得比较麻烦了。比如来说我前几天使用vuex这个大管家来放购物车数组时，然后到后来将商品push到购物车数组中cart，然后到页面上修改商品数量时，发现页面上的数字没发生变化，但是监听vuex状态改变的devtools中的数据改变了，可把我愁死了。...
Vue2中vuex新添加的数据变成响应式
weixin_61728412的博客
07-20 1494
vuex中后续添加数据不是数据响应式的解决办法
Vue响应式原理及实现
Joy_Yue的博客
11-30 778
一直认为明白Vue的底层实现原理很重要，能给你提供高效正确的开发思路，但深挖原理也确实有难度 这里推荐一篇讲Vue响应式原理的文章，希望能从中有点收获 https://mp.weixin.qq.com/s/WqsmZ2UL_5ZulOct5e37DQ...
Vue-数据响应式原理
s8806479的博客
04-25 1142
什么是数据响应式？ 数据变化，页面重新渲染。×不准确 数据是在对象里面，就是改变了对象的一个属性，运行了render函数。√稍微准确 改变了对象，运行了某些函数。√准确 响应式数据的最终目标，是当对象本身或对象属性发生变化时，将会运行一些函数，最常见的就是render函数。 以上两张图证明了对象改变，运行了某些函数。 在具体实现上，vue用到了几个核心部件: 0bserver Dep Watcher Scheduler 0bserver 我们先来思考，对象改变，怎么联动地运行某些函数？ ES5数据劫持
pyzmq-26.0.0b2-cp312-cp312-manylinux_2_28_x86_64.whl
最新发布
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
C++冒泡排序（基础内容）
06-19
1.循环两个变量：外层（轮数）、内层每轮的次数； 2.总轮数=元素长度-1=最大下标 3.每轮次数=元素长度-1-轮数=最大下标-轮数； 4.轮数（++），次数（++）； 5.两两交换，大的放后面 冒泡排序基础内容，自学可用； 分为三个部分，推到过程，总结，题目样例 很详细，欢迎一起学习交流
vue2实现响应式原理
05-12
Vue2 的响应式原理主要是基于 Object.defineProperty() 函数实现的。 Vue2 通过对数据对象的访问拦截，在访问数据对象的时候自动触发依赖收集和派发更新操作。具体实现步骤如下： 1. 遍历数据对象的所有属性，为每个属性创建一个独立的依赖收集器（Dep）对象。 2. 对访问数据对象的方法进行重写，使其在访问数据对象的属性时，将当前正在执行的 Watcher 对象添加到该属性对应的依赖收集器中。 3. 对修改数据对象的方法进行重写，使其在修改数据对象的属性时，触发该属性对应的依赖收集器对象的派发更新操作，通知所有依赖于该属性的 Watcher 对象更新视图。 具体实现代码如下： ```javascript function defineReactive(obj, key, val) { const dep = new Dep(); // 创建依赖收集器对象 Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter() { if (Dep.target) { dep.depend(); // 将当前 Watcher 对象添加到依赖收集器中 } return val; }, set: function reactiveSetter(newVal) { if (newVal === val) { return; } val = newVal; dep.notify(); // 触发依赖收集器对象的派发更新操作，通知所有 Watcher 对象更新视图 } }); } function observe(obj) { if (!obj || typeof obj !== 'object') { return; } Object.keys(obj).forEach(key => { defineReactive(obj, key, obj[key]); }); } class Watcher { constructor(vm, expOrFn, cb) { this.vm = vm; this.getter = parsePath(expOrFn); this.cb = cb; this.value = this.get(); } get() { Dep.target = this; const value = this.getter.call(this.vm, this.vm); Dep.target = null; return value; } update() { const oldValue = this.value; this.value = this.get(); this.cb.call(this.vm, this.value, oldValue); } } class Dep { constructor() { this.subs = []; } addSub(sub) { this.subs.push(sub); } removeSub(sub) { remove(this.subs, sub); } depend() { if (Dep.target) { Dep.target.addDep(this); } } notify() { const subs = this.subs.slice(); for (let i = 0, l = subs.length; i < l; i++) { subs[i].update(); } } } Dep.target = null; const targetStack = []; function pushTarget(target) { targetStack.push(target); Dep.target = target; } function popTarget() { targetStack.pop(); Dep.target = targetStack[targetStack.length - 1]; } function parsePath(path) { const segments = path.split('.'); return function(obj) { for (let i = 0; i < segments.length; i++) { if (!obj) { return; } obj = obj[segments[i]]; } return obj; }; } function remove(arr, item) { if (arr.length) { const index = arr.indexOf(item); if (index > -1) { return arr.splice(index, 1); } } } class Vue { constructor(options) { this._data = options.data; observe(this._data); this._watchers = []; this._initWatchers(options); } _initWatchers(options) { const watchers = options.watch || {}; for (let key in watchers) { const handler = watchers[key]; this.$watch(key, handler); } } $watch(expOrFn, cb) { const watcher = new Watcher(this, expOrFn, cb); this._watchers.push(watcher); return function unwatch() { watcher.teardown(); }; } } ``` 上述代码中，defineReactive 函数用于将一个属性变成响应式的，observe 函数用于遍历数据对象的所有属性并调用 defineReactive 函数，Watcher 类用于封装一个 Watcher 对象，Dep 类用于封装一个依赖收集器对象。Vue 类则用于封装一个 Vue 实例，实现了 $watch 方法用于监听数据的变化，并创建 Watcher 对象。在 Watcher 对象的构造函数中，会调用 parsePath 函数将表达式字符串转换成一个函数，然后调用该函数获取数据对象的值，并触发依赖收集。在数据对象的属性被修改时，会触发该属性对应的依赖收集器对象的派发更新操作，通知所有 Watcher 对象更新视图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值