文章 2024-05-09 来自:开发者社区

vue3版本的爱心源码

<template> <div style="position: relative;width: 100%;height: 100%"> <div style="width:100%;height:100%;display: flex;align-items: center;justify-content: center;"> <...

文章 2024-01-24 来自:开发者社区

看完这篇文章,不再害怕Vue3的源码(三)

看完这篇文章,不再害怕Vue3的源码(二)https://developer.aliyun.com/article/1426270自定义指令和过滤器在 Vue 3 中,自定义指令和过滤器是扩展 Vue 的功能的重要手段。1. 自定义指令自定义指令是指在 Vue 中,开发者可以根据需要自定义一些指令,在模板中使用指令来操作 DOM 结构和渲染视图。自定义指令可以实现一些非常有用的功能,例如自动聚焦....

文章 2024-01-24 来自:开发者社区

看完这篇文章,不再害怕Vue3的源码(二)

看完这篇文章,不再害怕Vue3的源码(一)https://developer.aliyun.com/article/1426268组件渲染在 Vue 3 中,组件的渲染过程流程如下:初始化渲染:当 Vue 3 创建一个组件实例时,Vue 3 会先对该组件进行初始化,并创建出其对应的 vnode。此时 Vue 3 将调用组件实例的 Setup 函数,来收集组件所需的响应式数据以及重新渲染组件所需的....

文章 2024-01-24 来自:开发者社区

看完这篇文章,不再害怕Vue3的源码(一)

I 前言概述Vue 3Vue 3是一个流行的JavaScript框架Vue.js的最新版本,它已经在2020年9月正式发布,是Vue.js的一个重要升级。Vue 3相对于Vue 2在性能提高、组件系统的结构优化和响应式系统的全面更新方面都有了很大的改进,为前端开发者带来了更好的开发体验。Vue 3的核心重构包括了响应式、虚拟DOM、组件自定义等方面的改进,旨在更好地提高开发人员的生产力和体验,并....

文章 2024-01-10 来自:开发者社区

Vue3进阶5个小知识点 附带源码

1.在Vue3中,可以使用<script setup>标签来简化组件的编写。在这个标签中,我们可以将数据、方法和其他属性直接放在setup()函数内部,而不需要使用data、methods等选项。这样可以让代码更加简洁和易于阅读。<template> <div>{{ count }}</div> </template> <sc...

文章 2024-01-10 来自:开发者社区

Vue3指令:搜索框输入防抖实现(附源码)

在Vue3中,我们可以使用v-debounce指令来实现搜索框输入防抖。首先,我们需要安装一个名为lodash.debounce的库,然后创建一个自定义指令v-debounce。安装lodash.debounce库:npm install lodash.debounce --save创建一个自定义指令v-debounce:// 导入lodash库 import { debounce } from....

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

我将vue3响应式核心源码手写了一遍,成长了许多

vue3响应式原理到这里已经结束,接下来要准备runtime-core的源码学习了,这里总结了前面所学的reactivity里面的核心知识,内容围绕流程图来讲,希望大家跟我一样可以有所收获, 这里的流程图可能不太清晰,要高清的可以私信我备注流程图流程图这份流程图是我对响应式原理知识点的手绘图,对自己学习的知识点的理解,如果有不完善的地方,请大家可以指出来,补充一下,也希望大家多多包涵核心逻辑依赖....

我将vue3响应式核心源码手写了一遍,成长了许多
文章 2023-08-21 来自:开发者社区

手写vue3核心源码——响应式原理(Computed篇)

实现computed基本功能先写一个简单的测试, 这里的逻辑是调用computed函数之后我们能够拿到age的值,因为computed底层借助了ref创建计算属性的响应式对象,所以需要通过.value拿到值it("happy path", () => { const user = reactive({ age: 1 }) ...

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

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

ProxyRefs初步实现先来看一下单测要实现的功能, 这里我们先实现一下get功能, 我们可以看到这里的user对象里面包裹的有一个ref对象,我们这里取name时要实现不用.value,就可以拿到ref对象的值it("it test ProxyRefs", () => { const user = { name: ref("meng"), ...

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

手撸vue3核心源码——响应式原理(isRef与unRef)

isRefisRef和isReactive一样,都是用于检测数据类型,isRef是检测是不是一个ref对象,跟isReactive函数实现起来一样,我们先来写一个单元测试这里要实现的功能是,检测ref对象肯定就通过返回true,检测普通类型数据以及reactive对象都是falseit("it should return a boolean", () => { let ob...

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

阿里巴巴终端技术

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

+关注