社区 › 业界 › vue3 学习笔记（不断更新中...）(2024.11.13)

晾棋砷 发表于 前天 17:01

vue3 学习笔记（不断更新中...）(2024.11.13)

组合式API

setup()

11
响应式API


[*]ref
ref 用于创建响应式数据（通常用来定义 基本类型数据）
在JavaScript代码中，需要使用 .value 来操作数据
let count = ref(1)
console.log(count.value) // 1

count.value++
console.log(count.value) // 2在Template模板中不需要
<template>
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><button>{{ count }}</button>
</template>
[*]reactive
reactive 用于创建一个响应式对象 （通常用来定义 引用类型数据）
let obj = reactive({ count: 1 })

obj.count++ // 2
[*]computed
使用 computed 创建一个计算属性，通过 .valule 暴露返回值

[*]创建一个只读的计算属性
默认情况下，创建的计算属性是只读的，如果修改会报错
let count = ref(1)
let getCount = computed(() => count.value)
console.log(getCount.value) // 1

getCount.value++ //error：Write operation failed: computed value is readonly

[*]创建一个可写的计算属性
computed 可以接收一个带有 get 和 set 函数的对象来创建一个 可写 的计算属性
let count = ref(1)
let getCount = computed({
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>get: () => count.value,
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>set: (val) => {
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>count.value = val + 1
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>}
})
console.log(getCount.value) // 1

getCount.value = 1
console.log(getCount.value) // 3
[*]watch
作用：用于监听响应式数据的变化，初始化的时候不执行

[*]监听 ref
let count = ref(1)
watch(
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>count,
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>(newVal, oldVal) => {
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>console.log(newVal, oldVal) // 2, 1
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>}
)
count.value++

[*]监听 reactive
当监听一个响应式对象时，会自动启用深度监听模式
let data = reactive({ count: 1 })
watch(
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>data,
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>(newValue, oldValue) => {
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>console.log(newValue, oldValue) // 2<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>1
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>}
)

data.count++

[*]监听 reactive 中的某个属性
let data = reactive({ count: 1 })
watch(
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>() => data.count,
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>(newVal, oldVal) => {
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>console.log(newVal, oldVal) // 2<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>1
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>}
)
data.count++

[*]停用监听器
let stop1 = watch(source, callback)

// 停用
stop1()
[*]watchEffect
watchEffect 不需要指定监听的数据源
它是自动跟踪函数内部使用的所有响应式数据源，当任何一个数据发生变化时，都会重新执行这个函数
let count = ref(1)

watchEffect(() => console.log(count.value))
// 输出：2

count.value++

[*]属性设置 flush: 'post'
默认情况下，监听器是在组件渲染之前执行
设置flush: 'post' 将会使监听器延迟到组件渲染之后再执行

[*]属性设置 flush: 'sync'
在某些情况下，可能有必要在响应式依赖发生改变时立即触发监听器。可以通过设置 flush: 'sync'来实现
需要注意：当如果有多个属性同时更新，可能会导致性能和数据一致性的问题

[*]watchPostEffect()
相当于 watchEffect 使用 flush: 'post' 的别名

[*]watchSyncEffect()
相当于 watchEffect 使用 flush: 'sync' 的别名
工具函数


[*]toRef
在获取一个响应式对象的子属性的时候，会丢失其响应式，如下面：
let form = reactive({ count: 1 })
let count = form.count

count++
console.log(form.count, count) // 1, 2为了对响应式对象解构的时候，延续数据的响应式，需要使用 toRef：
let form = reactive({ count: 1 })
let count = toRef(form, 'count')

count.value++
console.log(form.count) // 2

form.count++
console.log(count.value) // 3使用 toRef 基于响应式对象创建的属性，与其源属性保持同步。改变源属性的值，也会更新这个新创建的属性

[*]toRefs
toRefs 和 toRef 的区别就是多了个 s，一个是复数一个是单数的区别。
使用 toRefs 可以将整个响应式对象都解构出来，不再是针对其中单个属性，如下：
let form = reactive({ count: 1 })
let formRefs = toRefs(form)

form.count++
console.log(formRefs.count.value) // 2

formRefs.count.value++
console.log(form.count) // 3移除的API

Vue.set、Vue.delete 、 Vue.observable、Vue.filter、Vue.mixin
组件

新增组件


[*]Fragment
在 Vue2 中只能有一个根节点，Vue3 中可以支持多个根节点
其实在 Vue3 中每个组件还是一个根节点，只不过是使用 Fragment 组件将多根节点组件包裹起来了， fragment 和 keep-alive 一样，是一个抽象组件，不会被渲染出来。
<template>
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>测试1
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>测试2
</template>
[*]Teleport
teleport 组件允许将插槽内容渲染到任意位置，没有父子组件的限制
<Teleport to="#test">
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><h1>测试内容</h1>
</Teleport>Props
interface TeleportProps {
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>/**
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template> * 必填项。指定目标容器。
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template> * 可以是选择器或实际元素。
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template> */
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>to: string | HTMLElement
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>/**
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template> * 当值为 `true` 时，内容将保留在其原始位置
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template> * 而不是移动到目标容器中。
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template> * 可以动态更改。
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template> */
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>disabled?: boolean
}访问子组件实例

父组件定义一个变量 childRef 来引用子组件，定义的变量名称和子组件标签定义的 ref 需要一样
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>父子组件通信


[*]父传子
在 vue2 中我们使用 v-bind + props 的方式向子组件传值
在 vue3 中是使用 v-model + defineProps 的方式向子组件传值。并且支持写多个 v-model
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>名字：{{name}}
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>年龄：{{age}}

[*]子传父
在 vue2 中使用 $emit 向父组件传值
在 vue3 中使用 defineEmits 向父组件传值
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>点击累加<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>重置
[*]子组件直接修改父组件传过来的数据
在 vue2 中：子组件如果想直接修改父组件传过来数据，需要指定 v-model.sync
在 vue3 中，.sync 被移除了。通过定义一个 emit 事件，指定 update:count 来进行修改数据
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>更新父组件数据
[*]父组件获取子组件的属性或调用子组件的方法
默认情况下，父组件是不可以获取到子组件的属性。如果想这么做的话，我们可以在子组件使用 defineExpose 指定暴露出去的属性
defineExpose 可以指定那些属性、方法被其父组件访问和使用
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>异步加载组件


[*]vue2
const MyComponent = () => import('./MyComponent.vue')

[*]vue3
import { defineAsyncComponent } from 'vue'

// 会为MyComponent.vue 及其依赖创建一个单独的一个快
// 它只会按需加载 （及改异步组件在页面中被渲染时）
const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'))生命周期


[*]vue3 中移除了 beforeCreate 和 created，添加了 setup 函数
[*]所有钩子函数添加一个前缀on
[*]引用方式，因为 vue3 都是模块化，如import {onMounted} from 'vue'
vue2vue3beforeCreate
createdsetup()beforeMount
MountedonBeforeMount
onMountedbeforeUpdate
updatedonBeforeUpdate
onUpdatedbeforeDestroy
destroyedobBeforeUnmount
onUnmountedCSS

css 样式穿透

在 Vue2 中修改子组件或者组件库的样式，都会使用样式穿透 /deep/ .class{}
在 Vue3 中样式穿透的语法变成了 :deep(.class)
css 的v-bind

在css中使用js的变量来动态写样式

注意： 在 Mouse position is at: {{ x }}, {{ y }}我们通过上面代码发现，在自定义hooks函数中，我们依然可以使用响应式API、生命周期钩子等，可以实现 mixins 想要的效果
全局API转移

在 vue2 全局API 都是挂载在 Vue.prototype 上
在 vue3 改成了 app.config.globalProperties
const app = createApp(App)app.config.globalProperties.$myGlobalMethod = function () {<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>// ...}调用的话：
this.$myGlobalMethod()插槽


[*]默认插槽
子组件写上 ，父组件在引入子组件标签内部写入内容，就会自动填充到子组件上面
比如我们有一个如下的子组件：
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>头部<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>尾部父组件调用子组件：
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>中间的主要内容
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>
[*]具名插槽
具名插槽适用：当一个组件需要多个插槽，指定某个位置的内容
使用<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>定义一个插槽，使用<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>去指定插入的内容
比如我们有一个公共弹窗组件Dialog：
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>调用这个弹窗组件：
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>弹窗组件头部
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>弹窗组件底部
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>具名插槽的缩写：
跟 v-on 和 v-bind 一样，v-slot 也有缩写。比如 v-slot:header 可以简写成 #header，所以我们可以将上面调用代码改成如下：
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>弹窗组件头部
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>弹窗组件底部
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>
[*]作用域插槽
子组件可以通过动态绑定的方式，将子组件的值通过插槽传递给父组件
如下一个子组件：
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>头部<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>父组件：
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>子组件传递过来的值：{{title}}
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>
[*]动态插槽
根据条件动态的去匹配，不同名称的插槽位置
举例如下，有一个如下的子组件：
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>头部：<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>主体：<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>底部：<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>父组件：
<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>切换到头部<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>切换到主体<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>切换到底部<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template><template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>测试内容<template>
<template>
<Child ref="child"/>
</template><Child ref="childRef"></Child>
</template>
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

查看完整版本: vue3 学习笔记（不断更新中...）(2024.11.13)