文章 2023-08-20 来自:开发者社区

手撸vue3核心源码——响应式原理(ref)

实现ref我们知道读取ref对象的值需要.value, 因此我们来写一个单元测试来简单实现以下它的功能it("happy path", () => { let obj = ref(1) expect(obj.value).toBe(1) })我们要读取到obj身上的value属性即可,读属性就想到了get操作,同reactive,我们也定义一个类来实...

文章 2023-08-20 来自:开发者社区

Vue中Css的scoped的原理

当style标签拥有scoped属性的时候,它的css样式只会作用在当前组件也就是说scoped可以使得组件之间的样式互相隔离,互不影响如果一个项目中的左右组件style标签都加上scoped就相当于实现了样式模块化原理:添加scoped标签后会给组件中所有标签元素,添加一个唯一标识,这个唯一标识就是自定义属性,data-v-xxxxxxxx这样的字眼,同时对应的样式选择器也会添加这个唯一的属性....

文章 2023-08-19 来自:开发者社区

Vue 中 CSS scoped 的原理

前言在日常的Vue项目开发过程中,为了让项目更好的维护一般都会使用模块化开发的方式进行。也就是每个组件维护独立的template,script,style。主要介绍一下使用<style scoped>为什么在页面渲染完后样式之间并不会造成污染。示例搭建一个简单的Vue项目测试一下:终端执行npx webpack输出dist目录,在浏览器打开index.html调试一下看看现象:每个组....

Vue 中 CSS scoped 的原理
文章 2023-08-19 来自:开发者社区

vue3 中的响应式设计原理 2

4. 修改 track 和 trigger 函数通过上面代码,我们已经实现一个简单 reactive() 函数,用来将普通对象转换为响应式对象。但是还缺少自动执行 track() 函数和 trigger() 函数,接下来修改上面代码:const targetMap = new WeakMap(); let total = 0; const effect = () => { total = ....

vue3 中的响应式设计原理 2
文章 2023-08-19 来自:开发者社区

vue3 中的响应式设计原理 1

Vue 3 中的响应式原理可谓是非常之重要,通过学习 Vue3 的响应式原理,不仅能让我们学习到 Vue.js 的一些设计模式和思想,还能帮助我们提高项目开发效率和代码调试能力。一、Vue 3 响应式使用1. Vue 3 中的使用当我们在学习 Vue 3 的时候,可以通过一个简单示例,看看什么是 Vue 3 中的响应式:&lt;!-- HTML 内容 --&gt; &lt;div id="app....

 vue3 中的响应式设计原理 1
文章 2023-08-17 来自:开发者社区

Vue3 响应式原理(四)

collectionHandlers.ts 文件collectionHandlers.ts 文件包含了 MapWeakMapSetWeakSet 的处理器对象,分别对应完全响应式的 proxy 实例、浅层响应的 proxy 实例、只读 proxy 实例。这里只讲解对应完全响应式的 proxy 实例的处理器对象:export const mutableCollectionHandlers: Pro....

Vue3 响应式原理(四)
文章 2023-08-17 来自:开发者社区

Vue3 响应式原理(三)

effect.ts 文件等把 effect.ts 文件讲解完,响应式模块基本上差不多结束了。effect()effect() 主要和响应式的对象结合使用。export function effect<T = any>( fn: () => T, options: ReactiveEffectOptions = EMPTY_OBJ ): ReactiveEffect<...

Vue3 响应式原理(三)
文章 2023-08-17 来自:开发者社区

Vue3 响应式原理(二)

baseHandlers.ts 文件在 baseHandlers.ts 文件中针对 4 种 proxy 实例定义了不对的处理器。由于它们之间差别不大,所以在这只讲解完全响应式的处理器对象:export const mutableHandlers: ProxyHandler<object> = { get, set, deleteProperty, has, own...

Vue3 响应式原理(二)
文章 2023-08-17 来自:开发者社区

Vue3 响应式原理(一)

前言学习 Vue3.0 源码必须对以下知识有所了解:proxy reflect iteratormap weakmap set weakset symbol这些知识可以看一下阮一峰老师的《ES6 入门教程》。如果不会 ts,我觉得影响不大,了解一下泛型就可以了。因为我就没用过 TS,但是不影响看代码。阅读源码,建议先过一遍该模块下的 API,了解一下有哪些功能。然后再看一遍相关的单元测试,单元测....

文章 2023-08-17 来自:开发者社区

【vue系列-03】vue的计算属性,列表,监视属性及原理

一,vue核心属性1,计算属性在vue实例的data中,里面的key值就是属性名,里面的value就是属性值,而这个计算属性,就是用来对data中的数据进行一个属性计算的,将里面的数据进行一个加工操作,生成一个全新的数据。计算属性的数据通过这个computed保存。new Vue({ data:{firstName:'郑',lastName'三'}, computed:{ ful...

【vue系列-03】vue的计算属性,列表,监视属性及原理

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

阿里巴巴终端技术

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

+关注
AI助理

你好,我是AI助理

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