Vue3.0与2.0对比

vue项目构建

vue是渐进式的框架，意思是你可以用script脚本引入，可以npm安装vue也可以利用官方构建工具构建一个vue工程。但是现在大部分项目都是构建工程。vue3构建方式有两种：

vue官方脚手架：

vue-cli是官方提供的项目构建脚手架，可以构架vue2和vue3，并且在构建之初可以选择自己想要的配置，非常好用。

npm install -g @vue/cli
vue create hello-world
1
2

在控制台中可以选择项目的配置，包括vue版本，是否使用ts，vuex等。非常方便。

vite：

vite是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。
npm init vite-app
vite不可以在项目创建之初为我们提供配置，只是一个单页面，需要自己后面去构建。

二、vue目录介绍

vue.config.js简介：

https://cli.vuejs.org/zh/config/

三、vue3.0新特性

组合式API：setup

以往的vue中，代码是根据组件选项分区的。比如数据全部要定义在data下，方法全部要写在method下。
这样分区造成一个问题，如果页面功能多，会将单个逻辑分布到文件的各个地方，不方便代码阅读，而且容易造成单个文件很大，不好拆分。
vue3.0的组合式API解决了两个问题：

1. 代码根据逻辑分区，
2. 大文件的拆分。举个栗子，下图是vue2的代码分区，同样的颜色代码表他们是实现一个功能的。
   

vue3新增了setup选项。把新增两个字重点标出来是说，vue2的所有选项在vue3里是可以使用的。就是在vue3中完全使用vue2的那套写法，语法上没有任何问题。

setup选项如何工作

setup的生命周期：
新的 setup 组件选项在创建组件之前执行，一旦 props 被解析，并充当合成 API 的入口点。
读到这会有一个疑惑，因为我们知道vue2中，是要在created之后，才能操作data和method。在setup这个时间节点，应该是没有this的。那我们怎么去调用vuex做网络请求呢？
直接用是不行的，但是可以使用vuex的useStore方法获取store。所以我们完全可以在setup中做网络请求和数据初始化，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

setup的输入和输出：

setup输入的是props，也就是父组件传进来的值。return的是一个对象，这个对象里面的值可以在页面的任何地方直接使用。

setup中可以做哪些操作：

vue3没有放弃之前的生命周期函数，在setup中我们依然可以调用vue2中的那些生命周期，在特定的周期做特定的事情。

为了使setup中返回的对象是响应式的，所以一般使用ref函数定义这些变量。
举个栗子：

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

model1：

import {ref, onMounted, computed} from 'vue'
export default function model1 () {
  const var1 = ref(1)
  const f1 = async () => {
    var1.value = 2
    console.log('do f1')
  }
  const var1Value = computed(() => {
    return var1.value + 3
  })
  onMounted(f1)
  return {
    var1,
    var1Value
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

响应性实现的变化

什么是响应性：响应式即对外界的变化做出的反应的一种形式
vue2使用对象的原型链实现响应性，通过实现对象的set和get方法，在对象变化时可以进行页面刷新。局限是无法监听数组元素的变化。
vue3使用proxy代理实现响应性，用proxy对象把变量包裹，并且使 Vue 能够在 property 的值被访问或修改的情况下进行依赖跟踪和变更通知。

Teleport、片段、css变量等

teleport可以实现更改dom结构。比如把一个dom从原来的位置移到body下。作用就是可以脱离原本的dom。

      

        

          I'm a teleported modal! 
          (My parent is "body")
          
            Close
          
        
      

1
2
3
4
5
6
7
8
9
10
11

其他变化

vue2中，一个vue文件只能有一个根。所有的元素都要在这个根下。导致项目的嵌套会增多，比如我们的管理系统。vue3如果不想，可以不用这样做了。
vue3的css中可以使用js的变量：

1
2
3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15