AI 助理
文档备案控制台
文章 2023-04-22 来自：开发者社区

Vue3——02路由跳转以及数据渲染的新写法

一、路由跳转的写法useRouter官网解释：使用useRouter对路由进行跳转HomeView.vue页面<p @click="goAbout">点我</p> import { useRouter } from "vue-router"; export default { name: "HomeView", setup() { let router =...

Vue3——02路由跳转以及数据渲染的新写法
文章 2023-04-22 来自：开发者社区

Vue/vant——渲染详情页添加购物车数据渲染到购物车页面，并进行删除数据效果

添加后的数据渲染在购物车页面在登陆成功后请求购物车页面数据Login.vuesetTimeout(() => { this.$axios({ method: "post", url: "/login", data: { username: this.username, ...

Vue/vant——渲染详情页添加购物车数据渲染到购物车页面，并进行删除数据效果
文章 2023-04-20 来自：开发者社区

【Vue.js】条件渲染和列表渲染以及Vue中key值的内部原理

条件渲染v-if写法:(1).v-if="表达式"(2).v-else-if="表达式"(3).v-else="表达式"适用于:切换频率较低的场景。特点:不展示的DOM元素直接被移除。注意: v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。实例：// &lt;!-- 使用v-if做条件渲染 if为true则把结构直接从页面上删除--&gt; &lt;h2 v.....

【Vue.js】条件渲染和列表渲染以及Vue中key值的内部原理
文章 2023-04-20 来自：开发者社区

Vuejs设计与实现 —— 渲染器核心 Diff 算法（下）

快速 Diff 算法Vue.js 3 借鉴了 ivi 和 inferno 这两个框架中使用的算法：快速 Diff 算法，这个算法的性能优于 Vue.js 2 中所采用的 双端 Diff 算法.以下涉及的源码位置均在：vue-core-3.2.31-main\packages\runtime-core\src\renderer.ts 中的 patchKeyedChildren 函数中节点预处理对于....

Vuejs设计与实现 —— 渲染器核心 Diff 算法（下）
文章 2023-04-20 来自：开发者社区

Vuejs设计与实现 —— 渲染器核心 Diff 算法（上）

前言当组件发生更新时会重新执行 render 方法生成新的 vnode 节点，而当 新旧vnode 都是 一组节点 时，为了以最小的性能开销完成 更新操作，需要比较两组子节点，其中用于比较的算法就叫 Diff 算法。Vue 中的 Diff 算法实际上也是一个逐步演进的过程，那么下面就来看看它是如何演进、优化成如今的 Diff 算法的。简单 diff 算法在进行 新旧 两组子节点的更新时，去遍历 ....

Vuejs设计与实现 —— 渲染器核心 Diff 算法（上）
文章 2023-04-20 来自：开发者社区

Vuejs设计与实现 —— 渲染器核心：挂载与更新

前言挂载 与 更新 是 渲染器 的核心功能，也是渲染器应该要提供的基本功能，而 挂载 和 更新 又是基于 VNode 虚拟节点的，因为 VNode 节点描述了其对应的 真实 DOM 应该是什么样子的。挂载与卸载VNode 节点无论是 vue 还是 react 都引入了 虚拟 DOM，只不过它们定义 虚拟 DOM 的结构不同，但本质上都只是一个普通的 JavaScript 对象。VDOM 和 VN....

Vuejs设计与实现 —— 渲染器核心：挂载与更新
文章 2023-04-20 来自：开发者社区

Vuejs设计与实现 —— 渲染器

基本概念了解渲染器所涉及的基本概念，有助于更好的理解框架 API 的设计。渲染器 &amp; 渲染通常使用名词 renderer 来表示 "渲染器"，使用动词 render 来表示 "渲染"。渲染器 的作用是把虚拟 DOM渲染 为特定平台上的真实元素，例如，在浏览器平台上，渲染器会把 虚拟 DOM 渲染为 真实 DOM 元素。虚拟 DOM &amp; 虚拟节点虚拟 DOM 通常使用英文 virt....

Vuejs设计与实现 —— 渲染器
文章 2023-04-20 来自：开发者社区

Vuejs设计与实现 —— 同构渲染

前言Vue.js 是一个构建客户端应用的框架，组件的代码会在浏览器中运行，然后向页面输出 DOM 元素，也就是我们最常用的方式，即 客户端渲染（client-side rendering，CSR）.实际上 Vue.js 还可以在 Node.js 环境中运行，即可将相同组件渲染成相应的字符串，并发送给浏览器进行渲染，这就是 服务端渲染（server-side rendering，SSR）.Vue.....

Vuejs设计与实现 —— 同构渲染
文章 2023-04-20 来自：开发者社区

从 vue 源码看问题 —— vue 编译器如何生成渲染函数？（下）

genData() 方法文件位置：src\compiler\codegen\index.js/* 处理节点上的众多属性，最后生成这些属性组成的 JSON 字符串， 比如 data = { key: xx, ref: xx, ... } */ export function genData(el: ASTElement, state: CodegenState): string { ...

文章 2023-04-20 来自：开发者社区

从 vue 源码看问题 —— vue 编译器如何生成渲染函数？（上）

前言前两篇主要了解了 vue 编译器的 解析 和 优化：将组件的 html 模版解析成 AST 对象基于 AST 语法树 进行静态标记，首先标记每个节点是否为 静态节点，然后进一步标记出静态 根节点，便于在后续更新中跳过静态根节点的更新，从而提高性能下面就了解一下 vue 编译器是如何从 AST 语法树 生成运行渲染函数.深入源码createCompiler() 方法 —— 入口文件位置：/sr....

从 vue 源码看问题 —— vue 编译器如何生成渲染函数？（上）

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

VUE.js更多渲染相关

VUE.js您可能感兴趣

阿里巴巴终端技术

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

+关注