前言

不知不觉，根据文档横向对比vue2.0与3.0系列到了最后一篇文章啦。

封控了好久，看着窗外的树从光秃秃到绿油油，封控第一次下楼做核酸还要穿羽绒服，前两天惊觉居然已经立夏了，春装还没来得及晒洗，就已经要放到柜子深处。

最后一篇文章，准备写一些零碎的对比部分，用来把vue的横向对比系列进行简单的收尾。老规矩，对比差异部分，使用2️⃣3️⃣分别表示vue2.0与vue3.0，这样就能在通篇翻页时很显眼的看到差异部分。

响应式相关

个人认为，响应式就是A变化，A有关的其它值也都跟着一起变化。

vue里如何追踪变化

2️⃣vue2.0主要通过 Object.definePropert 方式追踪变化。

Object.definePropert 设置遍历得到的property，组件对应watch，渲染将组件需要的property记录为依赖，这些依赖变化的时候，监听到就告诉render重新渲染。

仔细分析一下：

1、设置存储：对象->data 的背后，vue遍历该对象，用Object.defineProperty方法，把遍历得到的property->getter/setter。

2、确定依赖并监听：组件实例对应watcher实例，watcher会把组件渲染过程中的数据记录为依赖，当依赖的property的setter触发，会通知watcher，从而触发render，让关联的组件重新渲染。

3️⃣vue3.0通过 proxy 方式追踪变化。

Proxy 是一个对象，它包装了另一个对象，并允许你拦截对该对象的任何交互。

分析一下：

1、设置存储并确定依赖：当一个值被读取时进行追踪，proxy 的 get 处理函数中 track 函数记录了该 property 和当前副作用。

2、依赖变化时：当某个值改变时进行检测，在 proxy 上调用 set 处理函数。

3、变化后重新渲染：重新运行代码来读取原始值，trigger 函数查找哪些副作用依赖于该 property 并执行它们。

综上所述，vue 实现响应式的方式进行了变化，但万变不离其宗，关键思想还是差不多的：设置存储->确定依赖->依赖变化则重新渲染。

3️⃣vue3.0的响应式对象

响应式对象主要为 ref 与 reactive。

其中，使用 reactive 主要为“深度转换”，会影响传递对象的所有嵌套的property。

而 ref 特点为浅层自动解包，深层就需要使用 .value，如果不想访问对象的实例，即不想写 .value，可以使用reactive进行对象的包裹。

单文件组件相关

单文件组件，即 .vue 后缀的文件，vue 组件的模板、逻辑与样式封装在单个文件中。文件由三种类型的顶层代码块组成：<template>、<script> 与 <style>。

分析 script 部分

vue2.0中一般使用 <script>，组件被首次引入的时候执行一次。

3️⃣vue3.0中，添加了单文件组件组合式API的语法糖<script setup>，其内部的代码会被编译成 setup()函数内容，和一般的<script>不同在于，其每次组件实例被创建的时候执行。

<script setup>可配合一般的<script>一起使用，比如创建只需要执行一次的对象时，就可配合使用。

简单说明<script setup>的内部使用方法：

1、变量与模板：任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用。

2、响应式：响应式状态，需要使用响应式API来创建(reactive、refs等)。

3、使用组件：普通组件，引入直接使用；动态组件，用:is绑定；递归组件，可引用自己。

4、自定义指令：以vXXXDirective形式命名，在模板中以v-xxx-directive 方式使用自定义指令。

5、props-emits的使用：使用 defineProps 接收与 props 选项相同的值；使用 defineEmits 接收 emits 选项相同的值。

分析 style 部分

`<style scoped>`

定义在当前组件范围内的样式。子组件的根节点，会被父组件和子组件本身的样式影响。

深度选择器 :deep(xxx)，能够影响子组件的样式。

全局选择器 :global(xxx)，能让样式应用到全局。

可同时混合无作用域的样式使用。

3️⃣`<style module>`

vue3.0新增了<style module>，能够将css生成css类，作为$style对象暴露给组件，能够在组件内使用。

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

<style module>
.red {
  color: red;
}
</style>

3️⃣状态驱动 v-bind()

vue3.0 新增状态驱动 v-bind()，能把组件中的动态值绑定到样式表中。

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

3️⃣片段

vue3.0 新增了“片段”概念，其实就是组件允许了多根节点。

vue2.0 中，组件内都需要被包裹在唯一的根如 div 内，而现在不需要啦。

可以通过 v-bind="$attrs" ，显式的定义父组件传下来的属性分布在哪个根组件上。

结尾

以上就是根据文档横向对比vue2.0与vue3.0的零碎补充。其他的 “基础-组件-可复用&组合” 部分可以由传送门去到对应文章查看。

因为这一系列对比的最后一篇文章写完了，所以顺便在此处复盘一下。

因为我就是尤大大口中不爱看文档的人，哈哈哈，宁愿花时间在查资料上，也不乐意去看文档。

当我在前段时间完完整整的看完文档后，才发现，原来很多当时要纠结的一些细节问题，可能找五六篇帖子才明白，而文档里原来就清清楚楚的写着。

此外，因为用了很长时间的vue2.0，所以当vue3.0发布后，我的内心还是抗拒（摆烂）的。除了大幅度的增减内容外，很多细节也发生了变化。当我有一天烦躁的连点键盘上的backspace时，我忍不住脱口而出 “到底变了多少啊！！！”

查看了很多帖子想了解其中的区别，但毕竟是别人的思想，相当于经过别人的咀嚼（对不起有点恶心了哈哈哈），所以正如我第一篇文章所言，有的人注重从源码层次分析区别，有的人注重从八股文层次区分，每个人对于“主次内容”的概念都不一样。

所以，我就决定踏踏实实的打开分屏，左边vue2.0文档，右边vue3.0文档，进行苦行僧的横向的对比。

这一对比，我才发现，其实从目录中就能看出很多区别，而更多的细节差异，也在字里行间中显眼起来。

虽然不知道多少人需要横向对比的了解，毕竟每个人的主次概念不一样嘛，但我还是决定把它们写成文章，分享出来，说不定有人需要呢？

写文章真的好麻烦，我习惯性使用xmind进行笔记总结，但要写成文章，就要注重分层格式啥的，有时候真的写得很暴躁！哈哈哈哈哈。

反正！我写完了！也许看的人不是很多（球球大家看一下😥），但我写完啦哈哈哈哈哈！居然还四篇那么多！！我也太棒了吧！！

进一步有一步的欢喜啦~

传送门

vue2.0与vue3.0 基础部分 对比：根据文档横向对比vue2.0与vue3.0（一）

vue2.0与vue3.0 组件部分 对比：根据文档横向对比vue2.0与vue3.0（二）

vue2.0与vue3.0 可复用&组合 对比：根据文档横向对比vue2.0与vue3.0（三）

vue2.0与vue3.0 零碎部分 对比：根据文档横向对比vue2.0与vue3.0（四）

根据文档横向对比vue2.0与vue3.0（四）

前言