Vue3 学习 （一）

编码规范

Vue3 通常和 typescript 结合使用

采用 TypeScript + 组合式 api + setup 语法糖 的形式

一、Vue3 简介

和 Vue2 相比 性能得到提升

源码升级 使用 Proxy 代替 definedProperty 实现响应式

重写虚拟 DOM 的实现和Tree-Shaking

可以更好的支持 TypeScript

新的特性：

组合式 API：setup ref与reactive computed 与 watch

新的内置组件

新的声明周期钩子

data 选项始终被声明为一个函数

移除 keyCode 支持作为 v-on 的修饰符

二、创建 Vue3 工程

（一）基于 vue-cli 创建

基于 webpack 大哥级别的工具

（二）基于 vite 创建（推荐）

1.介绍

新的构建工具 和 webpack 等价

官网：https://vitejs.cn

2.特点

轻量快速的热重载 能急速实现服务器的启动 启动比较快

使用 webpack 和 vite 的启动流程 对比 有点像懒加载

typescript jsx（是js 和 结构混着写的语法） css 等开箱即用 不用配置其它东西

3.过程

在桌面上安装环境

设置 项目基本的配置

然后就创建成功了

把项目放到 vscode 中

4.项目文件介绍

1° .vscode 文件夹

里面是一个json 文件 里面记录了我们使用的 Vue 插件 如果我们没安装插件 就会弹出是否安装官方的插件的选项 直接下载即可

2°public 文件夹

就是网页的图标 页签图标

3°src 文件夹

前端工程师所有的工作成果 .js .vue .css

main.ts 文件

createApp 是盆创建了 App

以后的所有的组件都要安装 到根 App 上

最后一句好就是 弄好花和花盆 然后 把花盆放到指定的位置（挂载）

App.vue 文件

和 vue2 组件内容类似 区别是 使用 ts 而不是 js 所以得标注上 lang="ts" 以防报错

运行能正常显示

4°env.d.ts 文件

刚打开会飘红 因为我们的项目文件夹中缺少依赖 我们使用 npm i 下载我们所需要的依赖

然后就不会报错了

这个文件的作用是 本来 ts类型的文件不认识 .jpg .txt 类型的文件 有了这个 ts 文件能让 ts文件认识这些文件

5°index.html 入口文件

和 vue2 不同不再是 main.js 文件了

看 script 标签 是 src 中 的 main.ts 支撑着文件跑起来了

上面那个 div 是放置 app 组件的容器（放花盆的位置）

6°package.json 文件

包的管理文件

里面是我们安装的包 一些常用的命令也在里面

npm run dev 把最后面的单词进行替换就能 使用其它命令

7° ts的管理文件

别删就行

8° vite.config.ts 文件

是整个工程的配置文件，后面要用到

三、Vue3 核心语法

vue2 中的 data methods 即是选项也是配置项

（一）OptionsAPI 和 CompositionsApi

vue2 的 api 是 选项式的 API

name 选项 methods 选项 data 选项都是 选项式的 api

缺点：功能很分散 可能 methods 里面的方法 用到了data 选项中的数据 数据和方法在不同的地方有一个改了 别的也得改

vue3 的 api 是 组合式的 API

组合式的 API 解决了这个问题 使用函数的方式把相关的功更加有序的组合在一起，

一个函数里面又有 数据又有 方法又名字 比较集中

（二）拉开序幕的 setup

setup 中根本没有 this 不能使用 this

1.setup 基本写法

原本的 vue2 的配置 选项式 api（配置式 api）

原本的选项式 api 变成了 组合式的 api

setup 里面可以写 vue2 中的很多选项 并且得 return 我们的数据和方法 才能在模板中使用

而且不是响应式的

setup() {
    // setup 中使用不了 this this 是 undefined，vue3 已经在弱化 this 了
    // 数据
    let name = '张三' //此时的 name 不是响应式的
    let age = 18 //此时的 age 不是响应式的
    let tel = '13888888888' //此时的 tel 不是响应式的
    // 方法
    function changeName() {
      // 不用this 数据就在上面 直接改就行
      name = 'zhang-san' //页面现在不会变化
    }
    function changeAge() {
      age += 1//页面现在不会变化
    }
    function showTel() {
      alert(tel)
    }


    return { name, age, changeName, changeAge, showTel }
  }

2.setup 返回值

不一定非得返回一个对象 也能返回一个函数

    // 将数据方法交出去模板才能使用
    return { name, age, changeName, changeAge, showTel }
    // setup 的返回值也可以是一个渲染函数
    // return () => '哈哈'

3.setup 和传统的配置项的区别

如果我们再写一个 data 配置项

新旧的写法能共存 都能正常使用

data 能读取到 setup 中的信息

setup 读取不到 data 中的数据信息

data() {
    return {
      a: 100,
      //data 能读取到 setup 中的数据
      c:this.age
    }
  },

4.setup 新写法

因为我们如果要使用 setup 中的数据要进行频繁的 return 数据太多我们返回的就更多

直接写在一个 script 标签中 相当于我们 使用了setup 语法

还必须是同一种类型的 script 所以我们 把 lang="ts" 加上

<script lang="ts" setup>
let a = 666
</script>

因为我们单独用了一个 script 标签来写 setup 文件 但是之前的 script 标签我们也不能删除 因为我们的 组件的名字只能定义在之前的 script 标签中 ，但是这样又会很麻烦 ，我们可以安装一个插件来把名字写在我们后面的那个 script 标签中 来简化代码

如下安装

下载完毕后，然后在 vite.config.ts 文件中引入 然后使用插件

名字成功改变了

（三） 响应式数据

vue 2 中 只要把 数据写到 data 中数据就是响应式的

vue 3 中 有两个东西来定义响应式数据 一个是 ref 一个是 reactive

1.ref 创建基本类型的响应数据

ref 不是 vue 2 中的那个标签

我们先引入 ref

import {ref} from 'vue'

然后哪个数据是响应式的就用 ref 把哪个数据包裹上

import {ref} from 'vue'
let name = ref('张三') 
let age = ref(18) 

相当于调用了 ref 函数 里面传入了参数

里面的数据就变成一个对象了

我们用其中不带下划线的 value 使用这个value属性时我们就得 name.value

但是模板不需要 写 name.value 因为模板给我们默认 加上了 .value

正常写即可

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="showTel">展示联系方式</button>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">增加年龄</button>
  </div>
</template>

但是我们 script 中必须用 name.value 的形式

动态的数据就实现了 响应式成功

<script lang="ts" setup name="Person">
import {ref} from 'vue'
let name = ref('张三') //此时的 name 不是响应式的
let age = ref(18) //此时的 age 不是响应式的
let tel = '13888888888' //此时的 tel 不是响应式的
console.log(1,name)
// 方法
function changeName() {
  // 不用this 数据就在上面 直接改就行
  name.value = 'zhang-san' //页面现在不会变化
}
function changeAge() {
  age.value += 1//页面现在不会变化
}
function showTel() {
  alert(tel)
}
</script>

2.reactive 定义对象类型的响应数据

我们对象想变成响应式的对象 就得用 reactive 进行包裹对象

数组同理

查看一下 发现变成代理对象了 说明数据变成响应式的了

<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车,价值{{ car.price }}</h2>
    <button @click="changePrice">修改汽车的价格</button>
  <br>
  <h1>游戏列表：</h1>
  <ul>
    <li v-for="g in games" :key="g.id">{{g.name}}</li>
  </ul>
  <button @click="changeFirstGame"></button>
  </div>
</template>


<script lang="ts" setup name="Person">
import { reactive } from 'vue'
// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games =reactive([
  { id: '01', name: '王者荣耀' },
  { id: '02', name: '原神' },
  { id: '03', name: '三国杀' }
])
// 现在car 是一个代理对象 proxy 原生就有的函数
console.log(car)
// 方法
function changePrice() {
  car.price += 10
}
function changeFirstGame(){
  games[0].name = '流星蝴蝶剑'
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

3.ref 定义对象类型的数据