Vue3 学习（一）

COLDEHY

已于 2024-09-28 13:52:54 修改

阅读量1.1k

点赞数 8

文章标签：学习

于 2024-05-09 18:06:11 首次发布

本文链接：https://blog.csdn.net/qq_63342197/article/details/138606797

版权

（一）OptionsAPI 和 CompositionsApi

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

编码规范

Vue3 通常和 typescript 结合使用

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

一、Vue3 简介

和 Vue2 相比性能得到提升向下兼容可以兼容 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 中

安装 vue - offical 默认安装好的

这俩合并了

4.项目文件介绍

1° .vscode 文件夹

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

2°public 文件夹

就是网页的图标页签图标

3°src 文件夹

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

main.ts 文件

createApp 是盆创建了 App

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

tips：我们使用 import 引入东西时不用花括号时是默认导出没有规定导出模块的名字而带花括号时不是默认导出是引入被命名的模块花括号里面的内容必须是文件中被命名的模块名

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

App.vue 文件

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

运行能正常显示

4°env.d.ts 文件

引入的内容我觉得这句话说的挺好

刚打开会飘红因为我们的项目文件夹中缺少依赖

我们使用 npm i 下载我们所需要的依赖

然后就不会报错了

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

5°index.html 入口文件

和 vue2 不同不再是 main.js 文件了，我们会发现里面引入了 src 中的 main.ts 文件

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

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

6°package.json 文件

包的管理文件

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

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

7° ts的管理文件

别删就行

8° vite.config.ts 文件

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

总结

三、Vue3 核心语法

vue2 中的 data methods 即是选项也是配置项（选项式API）

（一）OptionsAPI 和 CompositionsApi

vue2 的 api 是选项式的 API

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

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

vue3 的 api 是组合式的 API

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

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

（二）拉开序幕的 setup

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

tips：vue2 中不能出现多个根标签 vue3 能出现

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 语法糖）

通俗来说就是简单的写法

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

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

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

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

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

如下安装

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

名字成功改变了

（三）响应式数据

前提：数据为尊

开发者工具中数据是放在第一位的而方法等其它东西都被放在 other 中了

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 进行包裹对象而且不用 .value

而且只能定义对象类型的响应式数据

数组同理

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

<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>

不管数据的层级有多深只要用 reactive 包裹就是响应式的数据