文章 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-10 来自:开发者社区

vue2源码系列-nextTick实现原理

nextTick实现nextTick 作为 vue 的全局 api 之一,想必大家都非常熟悉。我们在上篇文章 深入Watcher 分析异步 watcher 的时候也是利用了 nextTick 来实现异步执行。今天我们就来分析分析 nextTick 的实现原理。任务队列如果想要更好的理解 nextTick,需要补充下任务队列的知识储备,感兴趣的可以看看之前的文章 JS事件循环(Event Loop....

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

Vue3原理实战运用,我用40行代码把他装进了React做状态管理

前言vue-next是Vue3的源码仓库,Vue3采用lerna做package的划分,而响应式能力@vue/reactivity被划分到了单独的一个package中。如果我们想把它集成到React中,可行吗?来试一试吧。使用示例话不多说,先看看怎么用的解解馋吧。// store.ts import { reactive, computed, effect } from '@vue/reacti....

Vue3原理实战运用,我用40行代码把他装进了React做状态管理
文章 2023-05-07 来自:开发者社区

深入解析 Vue 的热更新原理,尤大是如何巧用源码中的细节?

大家都用过 Vue-CLI 创建 vue 应用,在开发的时候我们修改了 vue 文件,保存了文件,浏览器上就自动更新出我们写的组件内容,非常的顺滑流畅,大大提高了开发效率。想知道这背后是怎么实现的吗,其实代码并不复杂。这个功能的实现底层用了vue-hot-load-api[1]这个库,得益于 vue 的良好设计,热更新的实现总共就一个 js 文件,200 行代码,绰绰有余。而在这个库里涉及到的技....

深入解析 Vue 的热更新原理,尤大是如何巧用源码中的细节?
文章 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 来自:开发者社区

Vue 的计算属性如何实现缓存?(原理深入揭秘)

前言很多人提起 Vue 中的 computed,第一反应就是计算属性会缓存,那么它到底是怎么缓存的呢?缓存的到底是什么,什么时候缓存会失效,相信还是有很多人对此很模糊。本文以 Vue 2.6.11 版本为基础,就深入原理,带你来看看所谓的缓存到底是什么样的。注意本文假定你对 Vue 响应式原理已经有了基础的了解,如果对于 Watcher、Dep和什么是 渲染watcher 等概念还不是很熟悉的话....

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

请你说说Vue中slot和solt-scope的原理(2.6.11深度解析)

前言Vue 中的 slot 和 slot-scope 一直是一个进阶的概念,对于我们的日常的组件开发中不常接触,但是却非常强大和灵活。在 Vue 2.6 中slot 和 slot-scope 在组件内部被统一整合成了 函数他们的渲染作用域都是 子组件并且都能通过 this.$slotScopes去访问这使得这种模式的开发体验变的更为统一,本篇文章就基于 2.6.11 的最新代码来解析它的原理。对....

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

阿里巴巴终端技术

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

+关注
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等