学习 vue3 第一天 vue3简介，创建vue3项目 Composition Api 初识

前言：

从今天开始来和大家一起学习 vue3 相信大家都不陌生，已经火了一段时间了，但是还是有不少人没有学习，那就跟着六扇老师来简单的入个门

废话不多说，来开始今天的学习

Vue3 简介：

2020年，9月，18日，Vue.js发布3.0版本，耗时两年多，2600+次提交，99位贡献值

github 上的 tags 地址：https://github.com/vuejs/core/releases/tag/v3.0.0

Vue3 带来了什么：

性能的提升，更快，更小，打包大小减少，初次渲染，更新渲染更快，内存减小
源码的升级，使用 Proxy 代替 defineProperty 实现响应式，重新写了虚拟 DOM 的实现 - 让虚拟DO M 更快了和 Tree-Shaking - 术语干掉了没有使用的代码，让打包体积更小
拥抱了 TS ，vue3 更好的支持 TypeScript
增加了新特性

Composltlon API （组合 API）

setup 配置
ref 、 reactive
watch 、watchEffect
provide 、 inject

新的内置组件

Fragment
Teleport
Suspense

其他

新的生命周期钩子

data 不再是对象，始终是一个函数

......

上边的东西只是一个了解，混一个脸熟，不会，看不懂也没有关系，后边我们会一个个讲，看一遍就会的，尤其是有 vue2 基础的

说了怎么，不如上手写写一遍，下面我们就开始创建我们的 vue3

vue3 的创建：

创建 vue3 项目有两种方式，一种是 vue 传统的创建方式一种是 vite 创建

使用 vue-cli 创建

vue create vue3项目的name

使用 vite 创建

当然这里插一个题外话，什么是 vite ----- 下一代前端构建工具差不多也是新一代了，现一代是webpack

vite 官网：https://cn.vitejs.dev/

vite 有什么优势呢？

开发环境中，无需打包操作，快速的冷启动
热重载（HMR）更轻量，快（局部刷新）
按需编译，不用再等待整个应用的编译

vite 优势也差不多就是特点

传统的构建相信用过 webpack 都知道，他是通过入口文件然后分析路由，再去分析模块，都分析完了进行打包，然后告诉你服务器准备好了

vite 构建的工作模式，一上来就给用户准备好服务器，然后等待用户请求，假如你发起了一个请求，然后 vite 会根据你的路径进入入口文件然后找到你的路由，分析该路由的模块，然后给你（动态的引入和代码分割）

用 vite 创建 vue3

npm init vite-app vue3项目的name

当然 vite 创建是没有依赖的，需要进入项目自己在 npm i

而且 vite 自配置的启动是 npm run dev

vite 会更快，不信你就都下载然后对比一下，实践出真理

分析工程结构图：

接下来让我们分析一下 vue3 的工程结构看看和 vue2 到底有什么区别，我们以 vue-cli 下载好的 vue3 项目为例

打开文件，我们发现 vue3 的目录结构和摆放位置都和 vue2 一样没什么区别

只不过 vue3 文件里面的一些语法和 vue2 不同

接下来我们来分析吧，如何分析？

main.js

首先我们打开项目的入口文件 main.js，一共写了三行代码，和 vue2 不同了吧

import { createApp } from 'vue'

import App from './App.vue'

createApp(App).mount('#app')

其中 import App from './App.vue' 我们见过在 vue2 中也有意思是引入所有组件的外壳组件，也就是所有组件的父亲

import { createApp } from 'vue' 引入的不再是 Vue 构造函数了是有一个 createApp 应用的实例对象，工厂函数

vue2 里面我们是 new 一个 vue 是一个构造函数

vue3 createApp 直接是一个工厂函数，可以直接调用

有什么不同呢？

来我们先回忆一下 vue2 中的写法，

new Vue({

render:(h)=>{

return h(app)

}

}).$mount('#app')

我们拆解一下

const vm = new vue({render:h => h(app)})

vm.$mount('#app')

这是之前的写法，接下来我们再把 createApp(App).mount('#app') 拆解

const app = createApp(App)

app.mount('#app')

这样一对比是不是明白了

const app = createApp(App) 其实就是创建实例应用对象（和 vue2 里面的 vm 类似但 app 更轻）

app本质就是一个对象，里面好多东西，vm里面很多需要的不需要的都放在里面，但 app 更精，减少了不需要的东西，所以“轻”了

App.vue

入口文件分析完了，我们按照代码执行的方式，接下来分析 App.vue

进入 App.vue 和 vue2 一样 template script style 没区别

但是有一个地方发生变化了，那就是 template 里边没有 div 了

vue3 组件中的模板结构可以没有根标签了（可以有，可以没有）写不写都行了

Composition Api 初识：

composition 组合式 API 这概念有点长，有点多，不太好理解，先不讲，暂时知道 composition 是组合式 AIP 就行

setup：

想玩 vue3 最好就是先学 setup，因为 setup 是所有组合式API（comosition）的大舞台

setup是什么？

是 vue3 中一个新的配置项，一个函数，新增

页面中需要的数据，也就是组件中所应用的数据，方法，生命周期，计算属性等等等，都要配置写在 setup 中

那怎么配置呢，直接上手，写代码

export default {

name: 'App',

setup(){

let name = '六扇老师'

let age = '18'

// 方法

function sayHello(){ alert(`你们好，我是${name},今年${age}`) }

}

和 vue2 不一样了，我们 vue3 需要数据不用 data 了直接写就行了

setup 的返回值

写完问题也就来了，诶六扇老师，我光写完数据和方法了，我在组件中怎么使用呢？

这里就要说 setup 的返回值了，它有两种一种是返回对象，一种是渲染函数

若 setup 返回的是一个对象，则对象中的属性，方法，直接就可以在模板中使用，和 vue2 一样（主要的内容）

setup(){

let name = '六扇老师'

let age = '18'

function sayHello(){ alert(`你们好，我是${name},今年${age}`) }

return { name, age, sayHello, }

我们直接在 setup 最后加一个 return 返回我们的数据

然后再模板中和 vue2 一样去引用，启动项目

接下来我们再看 setup 的另一种返回值

返回一个渲染函数，可以自定义渲染内容（了解就行，不常用）

可以看到我们上边写的也不生效了，setup 返回的渲染函数为主了

当然返回的渲染函数前提需要引入 h ，渲染函数

题外话：vue3 是向下兼容的，你可以在 vue3 中写 vue2 语法的代码，如果都写一起得话，在 vue2 的方法中能获取到 vue3 里面 setup 的值

但是在 vue3 中不能获取到 vue2 中 data 的值，而且如果有同名的，setup 优先

不建议与 vue2 配置混用，因为不知道什么时候就不兼容了，要不还学 vue3 干嘛

setup 不能是一个 async 函数，因为返回值不再是 return 的对象，而是 promise，模板看不到 retuen 里面的数据对象

ref 函数

ref初识

我们在 vue2 的时候学过 ref ，是一个标签属性，给一个元素打标识，方便我们拿到，然后使用

但 vue3 里面多了一个名为 ref 的函数

在学习 ref 函数之前我们先思考一个问题，上边我们已经写了数据，那如何修改呢？

老师我知道，直接写一个函数，然后调用，让 name 等于别的就修改了

我们可以看到，这样写了之后，数据是修改了，但是页面却没有修改，也就是 vue 没有发现

vue 不认识，也就是说你这样定义的数据它只是普通的数据，根本不是响应式数据

那如何把普通的数据变成 vue 可以监测到的响应式数据呢，这就用到了 ref 函数

首先我们要先引入我们的 ref 函数

import {ref} from 'vue'

export default {

setup(){

let name = ref('六扇老师')

let age = ref('18')

function changeInfo(){

console.log(name,age)

}

return {
name,
age,
changeInfo,
}

}

我们看用 ref 函数更改完的数据，它是一个 RefImpl 的实例对象，那什么是 RefImpl 对象？

我们拆开来看，Ref ---> reference 引用，Impl implement 实现

那 RefImpl 标准的称呼就是"引用实现的实例对象"，简称引用对象

然后我们看里面，其他的值我们不看，就看一个 value 和原型对象里面的 set 和 get

熟悉吧，和 vue2 一样，拿到你的数据，然后通过 set 和 get 修改，然后页面等等等

那怎么修改呢，直接在你要修改的值后边加上 .value 就修改完成了

小知识：template 组件里面的发现 ref 对象会自动获取到 value 值，所以直接写就能获取到值

ref 复杂对象

弄完基本类型数据，我们用 ref 写一个对象类型

数据有了，那我们怎么更改呢，其实也简单，看图我也经把 job.value 打印出来了

直接 job.value.type = 什么值，就可以更改了

那问题来了 ref 加工之后不是都 RefImpl 对象吗，为什么 job.value 变成 Proxy 对象了呢，带着这个问题，往下看 reactive 函数

总结：

ref 的作用，定义了一个响应式数据。创建了一个包含响应式数据的引用对象（reference对象，简称 ref 对象）

接受的数据可以是：基本类型，也可以是：对象类型

基本类型的数据：和 vue2 一样响应式依然是靠 Object.defineProperty() 的 get 与 set 完成的

对象类型的数据：内部求助了 vue3 中的一个新函数 reactive 函数

题外话：vue3 接受到对象类型的数据，底层就是用 ES6 新语法 Proxy 来处理的，但是在 vue3 中并没有直接使用，而是被封装到 reactive 函数里面

reactive 函数

reactive 只能定义对象类型和数组的响应式数据（基本类型用 ref ），之所以 ref 可以是因为 ref 内部求助了 reactive

用完 reactive 之后就和正常使用一样了，直接点就行

当然数组也是同理，直接放在里面写就行了，对象怎么用他怎么用，而且还能直接通过索引去改，这是 vue2 办不到的

let arr = reactive(["学习","喝酒","烫头"])

function changeInfo(){

arr[0] = "抽烟"

}

reactive 的语法：

const 代理对象 = reactive（原对象），接受到一个对象或数组，返回一个代理对象（Proxy的实例对象）

reactive 定义的响应式数据是更深层次的，不管有多深都能点出来

内部是通过 ES6 的 Proxy 实现，通过代理对象操作原对内部数据进行操作，并且这种操作是可以被 vue 所捕获到的，也就是我们说的数据劫持

题外话：

学到这里有同学该问了，那老师这样写太墨迹了，一会 ref . vaule 一会 reactive 不点咋解决呢

还是那句话，代码是死的人是活的，就像我们这几个数据，你可以直接这样去写

这样是不是语法语义都正确了，而且还省事了，但是我还是觉得有点麻烦，不想点来点去的，别急留一个问题，我们下章再讲