冰冻大西瓜的博客

Appearance

前置 ​

1. 回顾 vue2 对比 vue3 ​

传统的 vue2 逻辑比较分散 可读性差 可维护性差

对比 vue3 逻辑分明 可维护性 高

2. Vue3 新特性介绍 ​

2.1 重写双向绑定 ​

vue2 基于Object.defineProperty()实现, vue3 基于Proxy

proxy 与 Object.defineProperty(obj, prop, desc)方式相比有以下优势：

  • 丢掉麻烦的备份数据
  • 省去 for in 循环
  • 可以监听数组变化
  • 代码更简化
  • 可以监听动态新增的属性
  • 可以监听删除的属性
  • 可以监听数组的索引和 length 属性；
javascript
let proxyObj = new Proxy(obj, {
  get: function (target, prop) {
    return prop in target ? target[prop] : 0
  },
  set: function (target, prop, value) {
    target[prop] = 888
  },
})

2.2 优化 Vdom ​

在 Vue2 中,每次更新 diff,都是全量对比,

Vue3 则只对比带有标记的,这样大大减少了非动态内容的对比消耗

我们可以通过这个网站看到静态标记 → 演练场

patch flag 优化静态树

最后这个参数 8 就是一个更新类型标记 (patch flag)。一个元素可以有多个更新类型标记，会被合并成一个数字。运行时渲染器也将会使用位运算来检查这些标记，确定相应的更新操作.

部分 patch flag 标记

javascript
TEXT = 1 // 动态文本节点
CLASS=1<<1,1 // 2//动态class
STYLE=1<<2，// 4 //动态style
PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
FULLPR0PS=1<<4,// 16 //具有动态key属性，当key改变时，需要进行完整的diff比较。
HYDRATE_ EVENTS = 1 << 5，// 32 //带有监听事件的节点
STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
HOISTED = -1 // 静态节点

patch flag 的强大之处在于，当你的 diff 算法走到 _createBlock 函数的时候，会忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效。

尽管 JavaScript 做 Vdom 的对比已经非常的快，但是 patch flag 的出现还是让 Vue3 的 Vdom 的性能得到了很大的提升，尤其是在针对大组件的时候。

2.3 Fragment ​

vue3 允许我们写多个根节点

vue
<template>
  <div>12</div>
  <div>23</div>
</template>

同时支持 render JSX 写法

vue
render() {
  return (
    <>
      {this.visable ? (
          <div>{this.obj.name}</div>
      ) : (
          <div>{this.obj.price}</div>
      )}
      <input v-model={this.val}></input>
      {[1, 2, 3].map((v) => {
          return <div>{v}-----</div>;
      })}
    </>
  );
},

同时新增了Suspense和多v-model用法

2.4 Tree shaking ​

简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码

在 Vue2 中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是 Vue 实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到

而 Vue3 源码引入tree shaking特性，将全局 API 进行分块。如果你不使用其某些功能，它们将不会包含在你的基础包中

就是比如你要用 watch 就是 import {watch} from 'vue' 其他的 computed 没用到就不会给你,这样就可以减少打包体积

2.5 Composition Api ​

Setup 函数式编程 也叫 vue Hook

例如 ref reactive watch computed toRefs toRaws 会在后续详解.

3. Vite 目录&SFC 语法规范&npm run dev 详解 ​

3.1 Vite 目录 ​

名称描述
public文件夹中的不会被编译 可以存放静态资源
assets文件夹中可以存放可编译的静态资源
components文件夹中用来存放我们的组件
App.vue全局组件
main.ts全局的 ts 文件
index.htmlvite 的入口文件
vite.config.ts配置文件具体配置项

提示

Vscode Vue3 插件推荐 Vue Language Features (Volar)

3.2 SFC 语法规范 ​

*.vue 都由三种类型的顶层语法块所组成：<template>、<script>、<style>

<template> 每个  *.vue  文件最多可同时包含一个顶层  <template>  块。

其中的内容会被提取出来并传递给  @vue/compiler-dom，预编译为 JavaScript 的渲染函数，并附属到导出的组件上作为其  render  选项。

<script> 每一个 *.vue 文件最多只能有一个 <script> 块 (不包括<script setup>)。

该脚本将作为 ES Module 来执行。

其默认导出的内容应该是 Vue 组件选项对象，它要么是一个普通的对象，要么是  defineComponent  的返回值。

<script setup> 每个  *.vue  文件最多只能有一个 <script setup>  块 (不包括常规的  <script>)

该脚本会被预处理并作为组件的  setup()  函数使用，也就是说它会在每个组件实例中执行。<script setup>  的顶层绑定会自动暴露给模板。更多详情请查看  <script setup>  文档。

<style> 一个  *.vue  文件可以包含多个  <style>  标签。

<style>  标签可以通过  scoped  或  module attribute (更多详情请查看  SFC 样式特性) 将样式封装在当前组件内。多个不同封装模式的  <style>  标签可以在同一个组件中混

3.3 npm run dev 详解 ​

在我们执行这个命令的时候会去找 package.json 的 scripts 然后执行对应的 dev 命令:

那为什么我们不直接执行 vite 命令不是更方便吗?

因为在我们的电脑上面并没有配置过相关命令环境, 所以无法直接执行

其实在我们执行 npm install 的时候（包含 vite） 会在 node_modules/.bin/ 创建好可执行文件

.bin 目录，这个目录不是任何一个 npm 包。目录下的文件，表示这是一个个软链接，打开文件可以看到文件顶部写着  #!/bin/sh ，表示这是一个脚本

在我们执行 npm run xxx  npm 会通过软连接 查找这个软连接存在于源码目录 node_modules/vite

所以 npm run xxx 的时候，就会到 node_modules/bin 中找对应的映射文件，然后再找到相应的 js 文件来执行

  1. 查找规则是先从当前项目的 node_modlue /bin 去找,
  2. 找不到去全局的 node_module/bin  去找
  3. 再找不到 去环境变量去找

node_modules/bin 中 有三个 vite 文件。为什么会有三个文件呢？

bash
# unix Linux macOS 系默认的可执行文件，必须输入完整文件名
vite

# windows cmd 中默认的可执行文件，当我们不添加后缀名时，自动根据 pathext 查找文件
vite.cmd

# Windows PowerShell 中可执行文件，可以跨平台
vite.ps1

使用 windows 一般执行的是第二个 MacOS Linux 一般是第一个

4. 模板语法与指令 ​

4.1 插值语法 ​

vue
<template>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
const message = 'Hello, 猫の南北'
</script>

模板语法是可以编写条件运算的

vue
<template>
  <div>{{ message == 0 ? '猫の南北' : '冰冻大西瓜' }}</div>
</template>

<script setup lang="ts">
const message: number = 1
</script>

运算也是支持的

vue
<template>
  <div>{{ message + 1 }}</div>
</template>

<script setup lang="ts">
const message: number = 1
</script>

操作 API 也是支持的

vue
<template>
  <div>{{ message.split('，') }}</div>
</template>

<script setup lang="ts">
const message: string = '我，是，猫，南, 北'
</script>

4.2 内部指令 ​

  • v-text

    更新元素的文本内容。

    vue
    <span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>

  • v-html

    更新元素的 innerHTML。

    👉v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。

    👉 在单文件组件，scoped 样式将不会作用于 v-html 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。如果你想让 v-html 的内容也支持 scoped CSS，你可以使用 CSS modules 或使用一个额外的全局 <style> 元素，手动设置类似 BEM 的作用域策略。

    vue
    <template>
  <div v-html="htmlElement"></div>
</template>

<script setup lang="ts">
const htmlElement: string = '<p>可以接受元素标签</p>'
</script>

  • v-show

    基于表达式值的真假性，来改变元素的可见性。

    vue
    <template>
  <h3 v-show="info">我是 v-show</h3>
</template>

<script setup lang="ts">
const info: boolean = false
</script>

  • v-if

    基于表达式值的真假性，来条件性地渲染元素或者模板片段。

    👉 当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。

    警告

    当同时使用时，v-if 比 v-for 优先级更高。我们并不推荐在一元素上同时使用这两个指令 — 查看列表渲染指南详情。

    vue
    <template>
  <div>
    <!-- 条件渲染 -->
    <div v-if="flag === 'A'">A</div>
    <!-- v-else-if 限定：上一个兄弟元素必须有 v-if 或 v-else-if。 -->
    <div v-else-if="flag === 'B'">B</div>
    <!-- v-else 限定：上一个兄弟元素必须有 v-if 或 v-else-if。 -->
    <div v-else="flag === 'C'">C</div>
  </div>
</template>

<script setup lang="ts">
const flag: string = 'C'
</script>

  • v-for

    基于原始数据多次渲染元素或模板块。

    vue
    <div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

  • v-on

    给元素绑定事件监听器。缩写为:@

    允许的修饰符:

    修饰符描述
    .stop阻止事件冒泡
    .prevent阻止默认事件产生(例如防止提交按钮刷新页面)
    .capture在捕获模式添加事件监听器。
    .self事件从元素本身发出才触发处理函数
    .{keyAlias}只在某些按键下触发处理函数
    .once最多触发一次处理函数
    .left鼠标左键事件触发处理函数
    .right鼠标右键事件触发处理函数
    .middle鼠标中键事件触发处理函数
    .passive与.prevent 功能相反, 用来优化页面流畅性

    当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。

    v-on 还支持绑定不带参数的事件/监听器对的对象。请注意，当使用对象语法时，不支持任何修饰符。

    vue
    <!-- 方法处理函数 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 内联声明 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 使用缩写的动态事件 -->
<button @[event]="doThis"></button>

<!-- 停止传播 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认事件 -->
<button @click.prevent="doThis"></button>

<!-- 不带表达式地阻止默认事件 -->
<form @submit.prevent></form>

<!-- 链式调用修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 按键用于 keyAlias 修饰符-->
<input @keyup.enter="onEnter" />

<!-- 点击事件将最多触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

  • v-bind

    动态的绑定一个或多个 attribute，也可以是组件的 prop

    允许的修饰符:

    修饰符描述
    .camel短横线命名的 attribute 转变为驼峰式命名
    .prop强制绑定为 DOM property
    .attr强制绑定为 DOM attribute
    vue
    <!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />

<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc" />

<!-- 缩写形式的动态 attribute 名 -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定对象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop 绑定。“prop” 必须在子组件中已声明。 -->
<MyComponent :prop="someThing" />

<!-- 传递子父组件共有的 prop -->
<MyComponent v-bind="$props" />

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

    .prop 修饰符也有专门的缩写，.

    vue
    <div :someProperty.prop="someObject"></div>

<!-- 等同于 -->
<div .someProperty="someObject"></div>

    当在 DOM 内模板使用 .camel 修饰符，可以驼峰化 v-bind attribute 的名称，例如 SVG viewBox attribute：

    vue
    <svg :view-box.camel="viewBox"></svg>

    如果使用字符串模板或使用构建步骤预编译模板，则不需要 .camel。

  • v-model

    在表单输入元素或组件上创建双向绑定。

    仅限以下标签/元素:

    • <input>
    • <select>
    • <textarea>
    • components 允许的修饰符:
      修饰符描述
      .lazy监听 change事件而不是input
      .number将输入的合法符串转为数字
      .trim移除输入内容两端空格

  • v-slot

    用于声明具名插槽或是期望接收 props 的作用域插槽。

    仅限以下元素/标签:

    • <template>
    • components(用于带有 prop 的单个默认插槽)
    vue
    <!-- 具名插槽 -->
<BaseLayout>
  <template v-slot:header>
    Header content
  </template>

  <template v-slot:default>
    Default slot content
  </template>

  <template v-slot:footer>
    Footer content
  </template>
</BaseLayout>

<!-- 接收 prop 的具名插槽 -->
<InfiniteScroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</InfiniteScroll>

<!-- 接收 prop 的默认插槽，并解构 -->
<Mouse v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</Mouse>

  • v-pre

    跳过该元素及其所有子元素的编译。

    元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。

    vue
    <span v-pre>{{ this will not be compiled }}</span>

  • v-once

    仅渲染元素和组件一次，并跳过之后的更新。

    在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。

    vue
    <!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 带有子元素的元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<MyComponent v-once :comment="msg" />
<!-- `v-for` 指令 -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

    从 3.2 起，你也可以搭配 v-memo 的无效条件来缓存部分模板。

  • v-memo

    缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。

    vue
    <div v-memo="[valueA, valueB]">
  ...
</div>

    当组件重新渲染，如果 valueA 和 valueB 都保持不变，这个 <div> 及其子项的所有更新都将被跳过。实际上，甚至虚拟 DOM 的 vnode 创建也将被跳过，因为缓存的子树副本可以被重新使用。

    正确指定缓存数组很重要，否则应该生效的更新可能被跳过。v-memo 传入空依赖数组 (v-memo="[]") 将与 v-once 效果相同。

    与v-for一起使用

    v-memo 仅用于性能至上场景中的微小优化，应该很少需要。最常见的情况可能是有助于渲染海量 v-for 列表 (长度超过 1000 的情况)：

    vue
    <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  <p>...more child nodes</p>
</div>

    当组件的 selected 状态改变，默认会重新创建大量的 vnode，尽管绝大部分都跟之前是一模一样的。v-memo 用在这里本质上是在说“只有当该项的被选中状态改变时才需要更新”。这使得每个选中状态没有变的项能完全重用之前的 vnode 并跳过差异比较。注意这里 memo 依赖数组中并不需要包含 item.id，因为 Vue 也会根据 item 的 :key 进行判断。

    警告

    当搭配 v-for 使用 v-memo，确保两者都绑定在同一个元素上。v-memo不能用在 v-for内部。

    v-memo 也能被用于在一些默认优化失败的边际情况下，手动避免子组件出现不需要的更新。但是一样的，开发者需要负责指定正确的依赖数组以免跳过必要的更新。

  • v-cloak

    用于隐藏尚未完成编译的 DOM 模板。

    当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。

    v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 [v-cloak] { display: none } 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板。

    vue
    <template>
  <div v-cloak>
    {{ message }}
  </div>
</template>

<style>
[v-cloak] {
  display: none;
}
</style>

    直到编译完成前，<div> 将不可见。

5. Vue 虚拟 Dom 和 diff 算法 ​

为什么要学习源码?

1.可以提升自己学习更优秀的 API 设计和代码逻辑

2.面试的时候也会经常问源码相关的东西

3.更快的掌握 vue 和遇到问题可以定位

5.1 什么是虚拟 dom? ​

将目标所需的 UI 通过数据结构“虚拟”地表示出来，保存在内存中，然后将真实的 DOM 与之保持同步。

虚拟 DOM 就是通过 JS 来生成一个 AST 节点树

5.2 为什么要有虚拟 DOM？ ​

我们可以先看一下真实的 DOM 有多少属性

所以直接操作 DOM非常浪费性能, 解决方案就是我们可以用 JS 的计算性能来换取操作 DOM 所消耗的性能，既然我们逃不掉操作 DOM 这道坎,但是我们可以尽可能少的操作 DOM.

5.3 diff 算法 ​

📌 待补充