持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情 什么是响应式 Vue的响应式是实现数据驱动视图的第一步，也是考察Vue原理的第一题。其作用是监听data的

目标是写一个非常详细的关于diff的干货，所以本文有点长。也会用到大量的图片以及代码举例，一起来get吧。 先来了解几个点... 1. 当数据发生变化时，vue是怎么更新节点的？ 要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起…

预处理 文本预处理 在讨论 vue3 的快速 diff 算法前，我们要先了解一下纯文本 diff 算法的预处理。 现在有如下两段文本： 经过预处理后，剩下的文字部分就是我们需要进行 diff 操作的部

首先diff算法是发生在更新的过程，而更新的情况有以下几种情况： 老的是Array，新的是Text 老的是Text，新的是Text 老的是Text，新的是Array 老的是Array，新的是Array

这篇文章主要参考了 Vue.js 核心成员 Guillaume Chau 在 19 年美国的 Vue conf 分享的主题：9 Performance secrets revealed，分享中提到了九个 Vue.js 性能优化的技巧。 我看完他的分享 PPT后，也阅读了相关的项…

之前写了两篇文章谈论 vue3 的新特性，然鹅……周一最近又 get 到了几个比较进阶的新特性，比如： vue2 用 watch ， vue

一文了解Composition API新特性：ref、toRef、toRefs 在上一篇文章中，我们初步了解了vue3的新特性，今天，我们将延续C

vue3新增特性Teleport 像我们如果写Modal组件、Message组件、Loading组件这种全局式组件，没有Teleport的话，将它们引入一个.vue文件中，则则他们的HTML结构会被添

1.改写计数器例子： Vue2中的代码： 使用vue3改写后的代码： setup:在生命周期之前运行的 通过代码可以发现，increase函数改变count的值是改变的count对象的value,但t