Vue3 常用知识

vue 3.x

跳转链接

（科普）简述–前端

MVC 模式

即 Model（模型），View（视图） 和 Controller（控制器）
技术：jQuery + Bootstrap 一把梭

MVVM 模式
即 Model（模型），View（视图） 和 ViewModel（视图模型）
标志：AngularJS 的诞生
特点：数据驱动页面（数据发生变化后，通知页面更新）。各大框架在这个步骤上，各显神通：

• Angular 1 就是最老套的脏检查

脏检查：对数据变化的检查上，遵循每次用户交互时都检查一次数据是否变化，有变化就去更新 DOM

• React 1 使用了虚拟 DOM

虚拟 DOM：就像是数据和实际 DOM 的一个缓存层。数据有变化的时候，我们生成一份新的虚拟 DOM 数据，然后再对之前的虚拟 DOM 进行计算，算出需要修改的 DOM（计算逻辑：Diff），再去页面进行操作

---

缺点：如果虚拟 DOM 树过于庞大，使得计算时间大于 16.6ms，那么就可能会造成性能的卡顿

• Vue 1 使用了响应式

响应式：初始化的时候，Watcher 监听了数据的每个属性，这样数据发生变化的时候，我们就能精确地知道数据的哪个 key 变了，去针对性修改对应的 DOM 即可

---

缺点：Watcher 监听，本身就比较损耗性能，导致内存占用过多

• Angular 2 引入了 TypeScript、RxJS 等新内容，但是不支持向前兼容

设计很优秀，但是抛弃了老用户，这也是 Angular 这个优秀的框架现在在国内没有大面积推广的原因

• React 2 借鉴了操作系统时间分片的概念，引入了 Fiber 架构，巧妙地利用空闲实现计算，解决了卡顿的问题

把整个虚拟 DOM 树微观化，变成链表，然后我们利用浏览器的空闲时间计算 Diff。一旦浏览器有需求，我们可以把没计算完的任务放在一旁，把主进程控制权还给浏览器，等待浏览器下次空闲

• Vue 2 引入虚拟 DOM

组件之间的变化，可以通过响应式来通知更新；组件内部的数据变化，则通过虚拟 DOM 去更新页面。这样就把响应式的监听器，控制在了组件级别，而虚拟 DOM 的量级，也控制在了组件的大小

版本原理

vue 2

特性

Options API

缺点：

• 由于所有数据都挂载在 this 之上，因而 Options API 的写法对 TypeScript 的类型推导很不友好，并且这样也不好做 Tree-shaking 清理代码。
• 新增功能基本都得修改 data、method 等配置，并且代码上 300 行之后，会经常上下反复横跳，开发很痛苦。
• 代码不好复用，Vue 2 的组件很难抽离通用逻辑，只能使用 mixin，还会带来命名冲突的问题。

	<div id="app">
      <h1 @click="add">{{count}} * 2 = {{double}}</h1>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
      let App = {
        data() {
          return {
            count: 1,
          }
        },
        methods: {
          add() {
            this.count++
          },
        },
        computed: {
          double() {
            return this.count * 2
          },
        },
      }
      Vue.createApp(App).mount('#app')
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

vue 3

源码链接

特性

Composition API，即组合 API

缺点

vue 3 响应式系统用了 Proxy，会存在兼容性问题，即不兼容 IE11

优点

• 所有 API 都是 import 引入的，对 Tree-shaking 很友好，没用到的功能，打包的时候会被清理掉 ，减小包的大小。
• 不再上下反复横跳，我们可以把一个功能模块的 methods、data 都放在一起书写，维护更轻松。
• 代码方便复用，可以把一个功能所有的 methods、data 封装在一个独立的函数里，复用代码非常容易。
• Composotion API 新增的 return 等语句，在实际项目中使用

Vue 中用过三种响应式解决方案，分别是 defineProperty API、Proxy 和 value setter。

	<div id="app">
      <h1 @click="add">{{state.count}} * 2 = {{double}</h1>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
      const { reactive, computed } = Vue
      let App = {
        setup() {
          const state = reactive({
            count: 1,
          })
          function add() {
            state.count++
          }
          const double = computed(() => state.count * 2)
          return { state, add, double }
        },
      }
      Vue.createApp(App).mount('#app')
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

新的组件

• Fragment: Vue 3 组件不再要求有一个唯一的根节点，清除了很多无用的占位 div。
• Teleport: 允许组件渲染在别的元素内，主要开发弹窗组件的时候特别有用。
• Suspense: 异步组件，更方便开发有异步请求的组件。

新的工程化工具

Vite，它不在 Vue 3 的代码包内，和 Vue 也不是强绑定。Vite 的竞品是 Webpack，而且按照现在的趋势看，使用率超过 Webpack 是迟早的事。

• Webpack 等工程化工具的原理，是根据你的 import 依赖逻辑，形成一个依赖图，然后调用对应的处理工具，把整个项目打包后，放在内存里再启动调试。由于要预打包，所以复杂项目的开发，启动调试环境需要 3 分钟都很常见。
  
  Webpack 要把所有路由的依赖打包后，才能开始调试。

---

• 现代浏览器已经默认支持了 ES6 的 import 语法，Vite 就是基于这个原理来实现的。即：在调试环境下，不需要全部预打包，只是把你首页依赖的文件，依次通过网络请求去获取，整个开发体验得到巨大提升，做到了复杂项目的秒级调试和热更新。
  
  Vite 一开始就可以准备联调，然后根据首页的依赖模块，再去按需加载，这样启动调试所需要的资源会大大减少。

从零开始

1. 下载安装 Node.js 的过程是傻瓜式的，直接去Node.js 官网下载安装即可（可以选择 LTS 版本，也就是稳定版）

在命令行窗口执行 node -v 指令，出现版本号就算安装完成啦

2. 对于 Vue 2，官方推荐用 Vue-cli 创建项目；而对于 Vue 3，建议使用 Vite 创建项目，因为 vite 能够提供更好更快的调试体验

命令：npm init vite
项目骨架：
.
├── .vscode
│ └── extensions.json
├── public 【资源文件】
│ └── vite.svg
├── src 【源码】
│ ├── assets
│ │ └── vue.svg
│ ├── components
│ │ └── HelloWorld.vue
│ ├── App.vue 【 单文件组件】
│ └── main.js 【入口】
│ └── style.css
├── .gitignore
├── index.html 【入口文件】
├── package.json 【管理项目依赖和配置】
├── README.md
├── vite.config.js 【vite工程化配置文件】

3. 在 first-project 文件夹内执行 npm install 命令，来进行依赖的安装；然后执行 npm run dev 命令来启动项目

4. 在 Chrome 里打开 http://127.0.0.1:5173/ 有页面显示

5. 安装 Vuex 和 vue-router

Vuex 负责管理数据，安装命令：npm install vue-router@4
vue-router 负责管理路由，安装命令：npm install vuex@next --save

6. 规范组织结构

• src 目录的组织结构：

├── src
│ ├── api 【数据请求】
│ ├── assets 【静态资源】
│ ├── components 【组件】
│ ├── pages 【页面】
│ ├── router 【路由配置】
│ ├── store 【vuex数据】
│ └── utils 【工具函数】

• 进入到 router 文件夹中，新建 index.js，写入下面的代码：

import {
  createRouter, // createRouter 函数，用来新建路由实例
  createWebHashHistory, // createWebHashHistory 函数，用来配置我们内部使用 hash 模式的路由
} from 'vue-router'
import Home from '../pages/home.vue'
import About from '../pages/about.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

• 在 pages 下面新建两个文件 about.vue 和 home.vue，分别输入如下内容：

<template>
    <h1>这是about页面</h1>
</template>
1
2
3

<template>
    <h1>这是home页面</h1>
</template>
1
2
3

• 在 main.js 中，加载 router 的配置：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import router from './router/index'

createApp(App).use(router).mount('#app')
1
2
3
4
5
6
7

• 在 App.vue 中，修改：

<template>
  <div>
    <router-link to="/">首页</router-link> |
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>
1
2
3
4
5
6
7

7. 至此，项目的基本骨架已经完成。

css 样式

1. 局部样式scoped