ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue3底子看这一篇就够了（万字长篇，附实例代码及结果演示） [打印本页]

作者: 渣渣兔 时间: 2024-6-18 19:52
标题: Vue3底子看这一篇就够了（万字长篇，附实例代码及结果演示）
目录
前言
概述
Vue3组合式api VS Vue2选项式api
底子部分
setup
选项式api的风格
组合式api的风格
区别
响应式数据
ref
reactive
shallowReactive 与 shallowRef
盘算属性和监听
computed 函数
watch 函数
watchEffect
生命周期
响应式数据只读
toRaw 返回代理的源
markRaw 标记对象拒旷世理
provide 与 inject 跨组件传值
判断是否为响应式数据
toRef 和 toRefs 解构响应式数据
新组件
Fragment
Teleport
Suspense
组合式函数
全局的api及指令的变动
结语

前言

vue3已经出了好长一段时间了，近来闲来无事简单学习了一下，新增的东西还是挺多的，写一篇文章来记录一下。
  概述

Vue3组合式api VS Vue2选项式api

谈到 vue3，首先想到的就是组合式api，很大程度的解决了vue2选项式api的缺点，那有啥缺点？当文件中的业务代码非常多的时间，阅读修改代码的时间好坏常痛楚的，data,method，watch另有盘算属性之间来回跳转, 我已经准备拔刀了。
  下面这些图被疯转，很形象的展现了vue2和vue3的区别，可以看到组合式api就是将单个功能的状态，方法，盘算属性等等必要用到的东西都组合在一起抽离成一个hook，也就是对应图4的function，终极再统一引入组合到一起。这样做的利益就是单个功能的代码都在一起，方便调式修改。

底子部分

setup

setup是vue3的一个新的配置项，只在初始化的时间实验一次，所有的组合式函数都在此使用。setup可以在选项式api的风格中使用也可以通过组合式api的风格 。通过代码简单对比一下。vue3推荐使用组合式。
选项式api的风格

<script>
import { ref } from 'vue'
export default {
setup() {
const sum = ref(1)
return {
sum,
}
},
}
</script>
<template>
<div>
<h1>v3</h1>
<h3>{{ sum }}</h3>
<button @click="sum++">+1</button>
</div>
</template>
<style scoped></style>

复制代码

组合式api的风格

<script setup>
import { ref } from 'vue'
const sum = ref(1)
</script>
<template>
<div>
<h1>v3</h1>
<h3>{{ sum }}</h3>
<button @click="sum++">+1</button>
</div>
</template>
<style scoped></style>

复制代码

区别

<script setup>中的导入和顶层变量/函数都能够在模板中直接使用, 选项式则必要导出
<script setup>打包出来的体积更小
<script setup>对ts更友好

官网介绍的比较具体，感兴趣可以查看组合式 API 常见问答 | Vue.js
   响应式数据

vue2中 data 函数返回的对象就是响应式的数据，但是在增加删除对象属性时不是响应式的，当然vue2中也有对应的解决方法，this.$set(), this.$delete(), 其实这也能够理解，究竟vue2的响应式式基于 Object.defineProperty 实现的，这个函数只提供了 get 和 set 以及一些描述符 descriptor，并没有提供 add 和 delete 方法。
  vue3中的响应式包含了两种形态, ref（底层还是Object.defineProperty举行数据挟制, 处理简单数据范例），reactive（使用es6的Proxy举行数据挟制，处理复杂数据范例），完全修复了vue2响应式的痛点，vue3的响应式更加的友好。
  ref

ref 接受一个值，返回一个响应式对象，一样平常用来处理简单数据范例的响应式，但如果传入的值是对象 ref 会告急 reactive，返回RefImpl的实例简称ref对象。此时可能会有疑惑，既然ref是一个响应式的对象，为什么模板中能正常剖析。这是由于在剖析templete时碰到ref对象会自动取其value属性，但是如果要在方法中修改ref创建的响应式数据，你的写法应该是这样的 state.value = xxx

<script setup>
import { ref } from 'vue'
const sum = ref(1)
function add() {
sum.value++
}
</script>
<template>
<div>
<h1>v3</h1>
<h3>{{ sum }}</h3>
<button @click="add">+1</button>
</div>
</template>
<style scoped></style>

复制代码

reactive

为对象做深层!!!!响应式代理, 也就是如果对象有多层依旧是响应式的，返回一个Proxy实例，如果传入一个字符串大概数字，它将不是响应式的。Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自界说（如属性查找、赋值、枚举、函数调用等）Proxy - JavaScript | MDN。Vue使用 Proxy 举行数据挟制, Reflect 举行反射修改 Reflect - JavaScript | MDN

<script setup>
import { reactive } from 'vue'
const person = reactive({
name: '张三',
age: 12,
job: {
j1: {
jname: '前端开发',
},
},
})
function add() {
person.hobby = ['唱', '跳', 'rap']
}
function deleteHB() {
delete person.hobby
}
</script>
<template>
<div>
<h1>v3</h1>
<h1>{{ sum }}</h1>
<h3>姓名:{{ person.name }}</h3>
<h3>年龄:{{ person.age }}</h3>
<h3>工作:{{ person.job.j1.jname }}</h3>
<h3 v-if="person.hobby">爱好: {{ person.hobby }}</h3>
<button @click="person.name += '-'">修改姓名</button>
<button @click="person.age++">修改年龄</button>
<button @click="person.job.j1.jname += '!'">修改工作</button>
<button @click="add">增加爱好</button>
<button @click="deleteHB">删除爱好</button>
</div>
</template>
<style scoped></style>

复制代码

shallowReactive 与 shallowRef

shallowRef 直译过来意思是浅层的 ref，shallowRef 传入对象不会告急 reactive，仅仅对ref对象的 value 属性具有响应式。
shallowReactive 只处理对象第一层的响应式, 如果修改了深层的数据页面是不会响应的，但是会在下次页面更新中渲染出来。

<script setup>
import { shallowReactive, shallowRef, ref, reactive } from 'vue'
const shallowRef_jack = shallowRef({ name: 'jack', sex: '女' })
const shallowReactive_ben = shallowReactive({
name: 'ben',
sex: '女',
child: {
son: {
name: '张三',
},
},
})
const ref_jack = ref({ name: 'jack', sex: '女' })
const reactive_ben = reactive({
name: 'ben',
sex: '女',
child: {
son: {
name: '张三',
},
},
})
</script>
<template>
<div>
<h1>v3</h1>
<h3>
shallowRef_jack: {{ shallowRef_jack }}
<button @click="shallowRef_jack = {}">修改整个对象</button>
<button @click="shallowRef_jack.name += '!'">修改对象属性</button>
</h3>
<h3>
ref_jack: {{ ref_jack }}
<button @click="ref_jack = {}">修改整个对象</button>
<button @click="ref_jack.name += '!'">修改对象属性</button>
</h3>
<h3>
shallowReactive_ben: {{ shallowReactive_ben }}
<button @click="shallowReactive_ben.child.son.name = '!'">
修改对象的第三层属性
</button>
<button @click="shallowReactive_ben.name += '!'">
修改对象第一层属性
</button>
</h3>
<h3>
reactive_ben: {{ reactive_ben }}
<button @click="reactive_ben.child.son.name += '!'">
修改对象的第三层属性
</button>
<button @click="reactive_ben.name += '!'">修改对象第一层属性</button>
</h3>
</div>
</template>
<style scoped>
h3 {
font-size: 26px;
border: 1px solid #ccc;
padding: 20px;
margin: 20px;
}
button {
float: right;
padding: 10px;
font-size: 20px;
}
</style>

复制代码

盘算属性和监听

computed 函数

盘算属性有两种写法，作用和vue2一样，通过监听某个值的变化盘算出一个新值

只读的写法：computed(() => xxxxxx)，
可读可写的写法: computed({ get: () => xxxx, set: (val) => { xxxx } })

<script setup>
import { ref, computed } from 'vue'
const count = ref(1)
const num1 = computed(() => count.value + 1)
const num2 = computed({
get() {
return count.value + 1
},
set(val) {
count.value = val + 1
},
})
</script>
<template>
<div>
<h1>v3</h1>
<h2>
ref 定义的 count: {{ count }} <button @click="count++">count++</button>
</h2>
<h2>计算属性 num1: {{ num1 }} <button @click="num1++">num1++</button></h2>
<h2>计算属性 num2: {{ num2 }} <button @click="num2++">num2++</button></h2>
</div>
</template>
<style scoped></style>

复制代码

watch 函数

watch 函数用来监听数据的变化，和vue2大要上都是相同的。
参数列表：

参数1为必要监听的响应式对象（可以是单个对象，也可以是一个数组，也可以是一个getter函数），
参数2为监听对象发生变化时所实验的回调
参数3是一些配置项：immediate是否开启立刻监听，deep是否开启深度监听，flush回调的触发机遇，onTrack / onTrigger用于调试的两个函数

留意点：

直接监听 reactive 界说的响应式对象默认开启了深度监听
通过 getter 形式监听响应式对象默认是浅层监听

<script setup>
import { reactive, ref, watch } from 'vue'
const count = ref(1)
const person = reactive({
name: 'ben',
child: {
son: {
name: 'zs',
},
},
})
// 监听 ref 对象
watch(count, (val, preVal) => {
console.log('count变化了', val, preVal)
})
// 监听 reactive 定义的响应式对象
watch(person, (val, preVal) => {
console.log('person变化了', val, preVal)
})
watch([count, person], (val, preVal) => {
console.log('person变化了或count变化了', val, preVal)
})
</script>
<template>
<div>
<h1>v3</h1>
<h2>
ref 定义的 count: {{ count }} <button @click="count++">count++</button>
</h2>
<h2>
reactive 定义的 person: {{ person }}
<button @click="person.name += '!'">修改姓名</button>
<button @click="person.child.son.name += '___'">修改儿子姓名</button>
</h2>
</div>
</template>
<style scoped></style>

复制代码

watchEffect

watchEffect 函数用于监听传入的函数内访问的所有响应式数据的变化。白话一点就是回调里我用了谁我就监听谁，监听ref界说的响应式数据时，不要忘记 .value ，哥们就是这么智能。
watch 和 watchEffect 都是监听数据变化的函数，和 react 中的 useState 放入依靠项有着异曲同工之妙。
例子：切换下拉框中的 name ，模拟哀求后台接口

<script setup>
import { onMounted, reactive, ref, watchEffect } from 'vue'
const name = ref('jack')
const info = [
{
id: 1,
name: 'jack',
child: {
son: {
name: 'zs',
},
},
},
{
id: 2,
name: 'ben',
child: {
son: {
name: 'zs',
},
},
},
]
let data = ref([])
async function getInfoByName(name) {
const res = await new Promise((reslove) => {
setTimeout(() => {
reslove(info.filter((item) => item.name === name))
}, 500)
})
data.value = res
}
watchEffect(async () => {
getInfoByName(name.value)
})
</script>
<template>
<div>
<h1>v3</h1>
<el-select v-model="name" placeholder="请选择">
<el-option
v-for="item in info"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
<div v-for="item in data" :key="item.id">
{{ item.name }}的个人信息 {{ item }}
</div>
</div>
</template>
<style scoped></style>

复制代码

生命周期

vue3的生命周期稍有变动，增加了 setup 钩子，且销毁前和销毁后的钩子命名更改为 beforeUnmount 和 unmounted，以下代码是验证的一些示例
App.vue

<script setup>
import Demo from './Demo.vue'
import Demo2 from './Demo2.vue'
import { ref } from 'vue'
const isComDestory = ref(true)
const isOptionDestory = ref(true)
</script>
<template>
<div>
<h1>
v3
<button @click="isComDestory = false">引入组合式子组件</button>
<button @click="isComDestory = true">销毁组合式子组件</button>
<button @click="isOptionDestory = false">引入选项式子组件</button>
<button @click="isOptionDestory = true">销毁选项式子组件</button>
</h1>
<Demo v-if="!isComDestory"></Demo>
<Demo2 v-if="!isOptionDestory"></Demo2>
</div>
</template>
<style scoped>
button {
padding: 20px;
font-size: 16px;
}
</style>

复制代码

Demo.vue

<script setup>
import {
onMounted,
onBeforeMount,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
ref,
} from 'vue'
const sum = ref(1)
console.log('子组件1 setup')
onBeforeMount(() => {
console.log('子组件1 onBeforeMount')
})
onMounted(() => {
console.log('子组件1 onMounted')
})
onBeforeUpdate(() => {
console.log('子组件1 onBeforeUpdate')
})
onUpdated(() => {
console.log('子组件1 onUpdated')
})
onBeforeUnmount(() => {
console.log('子组件1 onBeforeUnmount')
})
onUnmounted(() => {
console.log('子组件1 onUnmounted')
})
</script>
<template>
<div>
<h2>我是子组件1</h2>
<h2>{{ sum }} <button @click="sum++">+1</button></h2>
</div>
</template>
<style scoped>
div {
border: 1px solid #ccc;
}
</style>

复制代码

Demo2.vue

<script>
import { ref } from 'vue'
export default {
setup() {
const sum = ref(1)
console.log('子组件2 setup')
return { sum }
},
beforeCreate() {
console.log('子组件2 beforeCreate')
},
created() {
console.log('子组件2 created')
},
beforeMount() {
console.log('子组件2 beforeMount')
},
mounted() {
console.log('子组件2 mounted')
},
beforeUpdate() {
console.log('子组件2 beforeUpdate')
},
updated() {
console.log('子组件2 updated')
},
beforeUnmount() {
console.log('子组件2 beforeUnmount')
},
unmounted() {
console.log('子组件2 unmounted')
},
}
</script>
<template>
<div>
<h2>我是子组件2</h2>
<h2>{{ sum }} <button @click="sum++">+1</button></h2>
</div>
</template>
<style scoped>
div {
border: 1px solid #ccc;
}
</style>

复制代码

由于录频录不了控制台，打印结果看下图

响应式数据只读

vue3提供了两个api，限制响应式数据为只读，不可修改。分别为 readonly（深层只读）和shallowReadonly （浅层只读）

<script setup>
import { ref, reactive, readonly, shallowReadonly } from 'vue'
const sum = readonly(ref(1))
const p1 = readonly(
reactive({
name: 'ben',
child: {
son: {
name: 'jack',
},
},
})
)
const p2 = shallowReadonly(
reactive({
name: 'ben',
child: {
son: {
name: 'jack',
},
},
})
)
function edit() {
sum.value = 2
p1.name += '!'
p1.child.son.name += '&'
}
function editShallow() {
p2.name += '!'
p2.child.son.name += '&'
}
</script>
<template>
<div>
<h1>v3</h1>
<h2>readonly: {{ sum }}</h2>
<h2>readonly: {{ p1 }}</h2>
<h2>shallowReadonly: {{ p2 }}</h2>
<button @click="edit">修改深层只读数据</button>
<button @click="editShallow">修改浅层只读数据</button>
</div>
</template>
<style scoped></style>

复制代码

toRaw 返回代理的源

toRaw的功能官网的表明很清晰，可以返回由 reactive()、readonly()、shallowReactive() 大概 shallowReadonly() 创建的代理对应的原始对象

<script setup>
import {
ref,
reactive,
readonly,
shallowReadonly,
shallowReactive,
toRaw,
} from 'vue'
const p1 = readonly(
reactive({
name: 'a',
child: {
son: {
name: 'as',
},
},
})
)
const p2 = shallowReadonly(
reactive({
name: 'b',
child: {
son: {
name: 'bs',
},
},
})
)
const p3 = reactive({
name: 'c',
child: {
son: {
name: 'cs',
},
},
})
const p4 = shallowReactive({
name: 'd',
child: {
son: {
name: 'ds',
},
},
})
console.log('toRaw p1 readonly', toRaw(p1))
console.log('toRaw p2 shallowReadonly', toRaw(p2))
console.log('toRaw p3 reactive', toRaw(p3))
console.log('toRaw p4 shallowReactive', toRaw(p4))
</script>
<template>
<div></div>
</template>
<style scoped></style>

复制代码

markRaw 标记对象拒旷世理

markRaw（）将对象标记为不可代理，返回其自己。自己上多了一个 __v_skip 属性表示忽略代理。强行代理代理是无效的，返回的还是其自己而不是响应式对象。

<script setup>
import { markRaw, reactive } from 'vue'
const p1 = {
name: 'a',
child: {
son: {
name: 'as',
},
},
}
const noProxy_p1 = markRaw(p1)
console.log('不可代理对象', noProxy_p1)
console.log('reactive 代理不可代理对象', reactive(noProxy_p1))
</script>
<template>
<div></div>
</template>
<style scoped></style>

复制代码

provide 与 inject 跨组件传值

使用 provide 与 inject 举行跨组件传值非常方便。以父子孙为例，父组件 provide ('name',value) 子组件 inject ('name') 即可

父组件

<script setup>
import { reactive, provide } from 'vue'
import Demo from './Demo.vue'
const obj = {
name: 'a',
child: {
son: {
name: 'as',
},
},
}
const person = reactive(obj)
provide('person', person)
</script>
<template>
<div class="father">
<h1>父组件</h1>
<h3>{{ person }}</h3>
<Demo></Demo>
</div>
</template>
<style scoped>
.father {
padding: 10px;
background: orange;
}
</style>

复制代码

子组件

<script setup>
import Demo2 from './Demo2.vue'
</script>
<template>
<div>
<h2>子组件</h2>
<Demo2></Demo2>
</div>
</template>
<style scoped>
div {
padding: 10px;
background: salmon;
border: 1px solid #ccc;
}
</style>

复制代码

孙组件

<script>
import { ref, inject } from 'vue'
export default {
setup() {
const person = inject('person')
return { person }
},
}
</script>
<template>
<div class="sonson">
<h2>孙组件</h2>
<h3>{{ person }}</h3>
</div>
</template>
<style scoped>
.sonson {
background: sandybrown;
border: 1px solid #ccc;
}
</style>

复制代码

判断是否为响应式数据

isRef（data）判断data是否是通过ref创建的响应式数据
isReactive（data）判断data是否是通过reactive创建的响应式数据
isReadonly（data）判断data是否是通过readOnly创建的只读数据
isProxy（data）判断data是否为Proxy代理对象

<script setup>
import {
reactive,
readonly,
ref,
isProxy,
isReactive,
isRef,
isReadonly,
} from 'vue'
const person = reactive({
name: 'a',
child: {
son: {
name: 'as',
},
},
})
const num = ref(1)
const str = readonly(ref('str'))
console.log(isRef(num))
console.log(isReactive(person))
console.log(isReadonly(str))
console.log(isProxy(person), isProxy(str))
</script>
<template></template>
<style scoped></style>

复制代码

toRef 和 toRefs 解构响应式数据

当响应式对象的属性过多且页面用到很多次的时间， toRef 和 toRefs 可以举行响应式解构，解构出来的数据依旧具备响应式的本领。下面的例子是在 <script setup> 中举行演示的，setup（）中的必要显示的返回
toRef