文章 2023-05-10 来自:开发者社区

vue2源码系列-响应式原理

之前学习了 vue 实例化及渲染函数的实现,其中的数据初始化 initData 中的 observe(data) 我们没有继续深入分析。因为内容比较多,所以今天单独开了篇来介绍 vue 的响应式原理。对数据劫持与订阅发布比较生疏的,可以先阅读 浅谈订阅发布实现vue打打基础。从入口开始initState -> initData -> observe(data)observe我们从 s....

vue2源码系列-响应式原理
文章 2023-05-10 来自:开发者社区

vue2源码系列-深入响应式原理Vue.set

前面我们在 vue2源码系列-响应式原理 中介绍了 vue 中的整个响应式实现及流程,其中跳过了某些细节性的代码,现在我们再去好好学习研究一番入口我们在 defineReactive 函数里发现这么一段代码Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reac...

文章 2023-05-10 来自:开发者社区

vue源码系列-深入响应式原理数组变异方法

前言上一篇文章 深入响应式原理Vue.set 我们学习了 Vue.set 的实现原理,在此基础上我们再来学习下 vue 中数组变异方法为什么无法监听数组我们知道 vue 是利用 Object.defineProperty 来实现监听的,为什么说无法监听数组呢?是因为 Object.defineProperty 的原因么其实 Object.defineProperty 是可以监听数组元素的cons....

文章 2023-05-07 来自:开发者社区

从零带你手把手实现Vue3响应式原理-下(Map和Set的处理)

前言在本系列的上一篇文章带你彻底搞懂Vue3的响应式原理!TypeScript从零实现基于Proxy的响应式库。[1]中我们详细的讲解了普通对象和数组实现响应式的原理,但是Proxy可以做的远不止于此,对于es6中新增的、、、也一样可以实现响应式的支持。MapSetWeakMapWeakSet但是对于这部分的劫持,代码中的逻辑是完全独立的一套,这篇文章就来看一下如何基于函数劫持实现实现这个需求。....

文章 2023-05-07 来自:开发者社区

从零带你手把手实现Vue3响应式原理-上(非玩具)

前言笔者最近在浏览React状态管理库的时候,发现了一些响应式的状态管理库如hodux,react-easy-state,内部有一个基于proxy实现响应式的基础仓库observer-util,它的代码实现和Vue3中的响应式原理非常相似,这篇文章就从这个仓库入手,一步一步带你剖析响应式的实现。本篇是系列第一篇,主要讲解了普通对象的响应式源码系列终结篇也已经发布,讲解Map和Set的特殊响应式流....

文章 2023-05-07 来自:开发者社区

为什么说 Vue 的响应式更新精确到组件级别?(原理深度解析)

前言我们都知道 Vue 对于响应式属性的更新,只会精确更新依赖收集的当前组件,而不会递归的去更新子组件,这也是它性能强大的原因之一。例子举例来说 这样的一个组件:<template> <div> {{ msg }} <ChildComponent /> </div> </template>我们在触发 ...

文章 2023-05-07 来自:开发者社区

Vue3 的响应式和以前有什么区别,Proxy 无敌?(源码级详解)

前言大家都知道,Vue2 里的响应式其实有点像是一个半完全体,对于对象上新增的属性无能为力,对于数组则需要拦截它的原型方法来实现响应式。举个例子:let vm = new Vue({ data() { a: 1 } }) // ❌ oops,没反应! vm.b = 2let vm = new Vue({ data() { a: 1 }, watch: { ...

文章 2023-04-27 来自:开发者社区

Vue3 响应式原理之 ref

isProxy实现 isProxy 非常简单,就我们之前实现的 isReactive 和 isReadonly,只要满足其中之一即为已经代理的对象it('isProxy', () => { const original = { foo: 1, bar: { baz: 2 } }; const wrapped = readonly(original); const observe...

Vue3 响应式原理之 ref
文章 2023-04-27 来自:开发者社区

Vue3 响应式原理之 readonly

readonlyreadonly和 reactive 类似,只不过,readonly不需要进行依赖收集,并且不可被 set,我们只需要在 set 时报错即可仍然从测试用例入手it("readonly", () => { const original = { foo: 1, bar: { baz: 2 } }; const wrapped = readonly(original);...

Vue3 响应式原理之 readonly
文章 2023-04-27 来自:开发者社区

Vue3 响应式原理之scheduler、stop

scheduler这里引用一下 Vue 官方的经典测试用例来测试 scheduler 功能it("scheduler", () => { let dummy; let run: any; const scheduler = jest.fn(() => { run = runner; }); const obj = reactive({ foo: 1 });...

Vue3 响应式原理之scheduler、stop

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注