前端学习笔记—Vue3特性

news2024/11/6 20:40:34

一、 Vue3与Vite构建工具简介

image.png

Vite构建工具（其他的打包工具有webpack，grunt，gulp）

image.png

构建

二、创建Vue3项目

vite在TypeScript结合使用上，直接开箱即用，不需要额外配置。
Vue3语法兼容Vue2语法。Vue3的setup与Vue2的data、methods可以同时存在使用，但是不建议这样操作，优先使用setup组合式返回值。setup是先于beforeCreate、data等钩子执行的，所以在data中可以通过this读取出setup返回值，反之不可。

构建1

构建vue3项目

image.png

实操创建

依赖添加异常，需要检查网络或代理时，尝试使用国内镜像源，这里经常会有小坑，更换为国内镜像源以提高稳定性：

1使用淘宝镜像：

npm config set registry https://registry.npmmirror.com

2.使用腾讯镜像：

npm config set registry https://mirrors.cloud.tencent.com/npm/

3.使用华为镜像：

npm config set registry https://repo.huaweicloud.com/repository/npm/

4.检查当前镜像源：

npm config get registry

三、Vue2与Vue3项目api区别

Vue2使用选项式Api，Vue3使用组合式Api
template内，Vue3可以不需要根节点，Vue2必须包含唯一一个根节点。

vue2

hook组合式封装，发挥了Vue3组件化开发的魅力。

image.png

setup案例

setup简化

image.png

四、ref与reactive响应式

基本类型的响应式数据，只能使用ref

基本类型

对象类型的响应式数据

1.reactive方式，只能定义对象类型。在setup中只需要取出使用即可，如car.price=200触发响应式和赋值。

reactive对象类型

2.ref处理对象类型响应式，底层使用的还是reactive

image.png

ref和reactive区别

分配不同对象时，对于ref只需要car.value=新对象，而对于reactive需要借助Object.assign(被替换对象，新对象1，新对象2...)

image.png

car.value=ref({brand:'五菱',price:50})替换赋值生成一个新对象
Object.assign(car,{brand:'五菱',price:50})对象内属性一一对应覆盖，还是原来的对象

image.png

toRefs与 toRef 使用

作用：将一个响应式对象中的每一个属性，转换为ref 对象
备注:：toRefs与 toRef 功能一致，但 toRefs 可以批量转换整个对象，toRef只能转指定值。结构体name修改，person内对应的属性值也会响应式变化。

image.png

响应式对象取值特殊情况

image.png

五、计算属性

引入import { reactive,ref, toRef, toRefs,computed } from 'vue'
同样使用的时候通过computed 包裹要计算的内容函数

image.png

六、watch属性

image.png

1.监视 ref 定义的【基本类型】数据：直接写数据名即可，监视的是其 value 值的改变。调用这个函数可以终止监听，比如函数名stopwatch()

image.png

2.监视对象：监视ref对象。

不管是ref还是reactive监视一整个对象时而不是某个非对象属性，则只要外围对象没有生成新的对象赋值，则newValue、oldValue都是指向新值。虽然对象内属性改动变化了，但是对象还是那个对象，对象地址值不变。

image.png

3.监视对象：监视reactive对象。

reactive只能定义对象，所以只能监视整个对象，这个模式默认开启深度监视，且无法关闭。深度监视开启后，就可以监视对象内的某个任意属性变化。

image.png

4.侦听对象内的某个特定属性，其他属性不监视

对象子属性：基本类型属性

image.png

对象子属性：对象类型属性。手动开启深度监视。

image.png

5.侦听多个属性，写成数组形式

image.png

七、watchEffect属性

image.png

八、标签节点的ref属性

image.png

九、组件传参：defineProps属性

defineProps接收组件传递的参数。defineXXX都不需要直接引用，是属于宏函数。

image.png

十、Vue3生命周期

setup函数替代了Vue2中beforeCreate、created生命周期。
程序解析到子组件时，子组件的可执行的生命周期全部经历后，才会继续执行父组件剩余生命周期。

image.png

十一、Vue3的Hooks

Hooks的使用替换了Vue2中mixin的使用，是实现组合式API开发的关键。可以在创建的Hooks的useXXX文件函数里面封装你的代码，也可以使用生命周期钩子函数。合理的封装你的功能模块。

useDog.ts

useSum.ts

使用hooks

十二、Vue3的路由

Vue3和Vue2路由使用基本相同。

image.png

路由器工作模式

image.png

路由传参

1.query传参，两种写法方式。字符串写法和对象写法。

image.png

2.params传参，也是有两种写法方式。字符串写法和对象写法。但是注意这时候，只能使用name路由路径写法。注意，这种写法不可以传递对象和数组。

image.png

路由配置props:true，所有路由器接收参数都转换为组件属性

image.png

路由配置props其他写法

image.png

3.编程式路由器userRouter使用，RouterLink标签可以用的api属性userRouter也可以用

image.png

4.重定向路由导航redirect使用。可用于程序初始化页面显示的组件内容。

image.png

十三、Vuex状态管理升级为Vue3的Pinia

下载、安装、初始化

image.png

npm i pinia 安装下载

image.png

存储和读取数据

image.png

image.png

pinia内容值修改的方式。修改就是vuex里的actions+mutations（相当于setters）。

// 数据
let select=ref(1)// 用户选择的数字

// 方法
function xiugai(){
// 第一种对源数据直接修改方式，直接操作三次
countstore.sum += 1
countstore.school= '黑马培训'
countstore.address= '深圳'

// 第二种patch修改方式，一次数据操作
countstore.$patch(
{
sum:888，
school:'尚硅谷，
address:'北京
})

// 第三种actions修改方式，抽离共同修改，复用多
countstore.increment(select.value)
}