组合式API

setup()

11

响应式API

  1. ref

ref 用于创建响应式数据(通常用来定义 基本类型数据

在JavaScript代码中,需要使用 .value 来操作数据

let count = ref(1)
console.log(count.value) // 1 count.value++
console.log(count.value) // 2

在Template模板中不需要


<script setup>
import { ref } from 'vue' const count = ref(1)
</script> <template>
<button>{{ count }}</button>
</template>
  1. reactive

reactive 用于创建一个响应式对象 (通常用来定义 引用类型数据

let obj = reactive({ count: 1 })

obj.count++ // 2
  1. 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 可以接收一个带有 getset 函数的对象来创建一个 可写 的计算属性

let count = ref(1)
let getCount = computed({
get: () => count.value,
set: (val) => {
count.value = val + 1
}
})
console.log(getCount.value) // 1 getCount.value = 1
console.log(getCount.value) // 3
  1. watch

作用:用于监听响应式数据的变化,初始化的时候不执行

  • 监听 ref
let count = ref(1)
watch(
count,
(newVal, oldVal) => {
console.log(newVal, oldVal) // 2, 1
}
)
count.value++
  • 监听 reactive

当监听一个响应式对象时,会自动启用深度监听模式

let data = reactive({ count: 1 })
watch(
data,
(newValue, oldValue) => {
console.log(newValue, oldValue) // 2 1
}
) data.count++
  • 监听 reactive 中的某个属性
let data = reactive({ count: 1 })
watch(
() => data.count,
(newVal, oldVal) => {
console.log(newVal, oldVal) // 2 1
}
)
data.count++
  • 停用监听器
let stop1 = watch(source, callback)

// 停用
stop1()
  1. watchEffect

watchEffect 不需要指定监听的数据源

它是自动跟踪函数内部使用的所有响应式数据源,当任何一个数据发生变化时,都会重新执行这个函数

let count = ref(1)

watchEffect(() => console.log(count.value))
// 输出:2 count.value++
  • 属性设置 flush: 'post'

默认情况下,监听器是在组件渲染之前执行

设置flush: 'post' 将会使监听器延迟到组件渲染之后再执行

  • 属性设置 flush: 'sync'

在某些情况下,可能有必要在响应式依赖发生改变时立即触发监听器。可以通过设置 flush: 'sync'来实现

需要注意:当如果有多个属性同时更新,可能会导致性能和数据一致性的问题

  1. watchPostEffect()

相当于 watchEffect 使用 flush: 'post' 的别名

  1. watchSyncEffect()

相当于 watchEffect 使用 flush: 'sync' 的别名

工具函数

  1. 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 基于响应式对象创建的属性,与其源属性保持同步。改变源属性的值,也会更新这个新创建的属性

  1. toRefs

toRefstoRef 的区别就是多了个 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.setVue.deleteVue.observableVue.filterVue.mixin

组件

新增组件

  1. Fragment

在 Vue2 中只能有一个根节点,Vue3 中可以支持多个根节点

其实在 Vue3 中每个组件还是一个根节点,只不过是使用 Fragment 组件将多根节点组件包裹起来了, fragmentkeep-alive 一样,是一个抽象组件,不会被渲染出来。


<template>
<div>测试1</div>
<div>测试2</div>
</template>
  1. Teleport

teleport 组件允许将插槽内容渲染到任意位置,没有父子组件的限制


<Teleport to="#test">
<h1>测试内容</h1>
</Teleport>

Props

interface TeleportProps {
/**
* 必填项。指定目标容器。
* 可以是选择器或实际元素。
*/
to: string | HTMLElement
/**
* 当值为 `true` 时,内容将保留在其原始位置
* 而不是移动到目标容器中。
* 可以动态更改。
*/
disabled?: boolean
}

访问子组件实例

父组件定义一个变量 childRef 来引用子组件,定义的变量名称和子组件标签定义的 ref 需要一样


<script setup>
import { ref } from 'vue'
import Child from 'Child.vue' const childRef = ref(null)
console.log(childRef.value)
</script>
<template>
<Child ref="childRef"></Child>
</template>

父子组件通信

  1. 父传子

在 vue2 中我们使用 v-bind + props 的方式向子组件传值

在 vue3 中是使用 v-model + defineProps 的方式向子组件传值。并且支持写多个 v-model

<!--父组件-->
<script setup>
import Child from './Child.vue'
import { ref } from 'vue' const name = ref('时光凉忆')
const age = ref(26)
</script>
<template>
<Child v-model:name="name" v-model:age="age"/>
</template> <!--子组件-->
<script setup>
const props = defineProps({
name: String,
age: Number
})
</script>
<template>
<p>名字:{{name}}</p>
<p>年龄:{{age}}</p>
</template>
  1. 子传父

在 vue2 中使用 $emit 向父组件传值

在 vue3 中使用 defineEmits 向父组件传值

<!--父组件-->
<script setup>
import Child from './Child.vue'
import { ref } from 'vue' const count = ref(1) function addCount(e) {
count.value += e
} function resetCount() {
count.value = 1
}
</script>
<template>
<Child @addCount="addCount" @resetCount="resetCount"/>
</template> <!--子组件-->
<script setup>
const emit = defineEmits(['addCount', 'resetCount']) function addCount() {
emit('addCount', 1)
} function resetCount() {
emit('resetCount')
}
</script>
<template>
<button @click="addCount">点击累加</button>
<button @click="resetCount">重置</button>
</template>
  1. 子组件直接修改父组件传过来的数据

在 vue2 中:子组件如果想直接修改父组件传过来数据,需要指定 v-model.sync

在 vue3 中,.sync 被移除了。通过定义一个 emit 事件,指定 update:count 来进行修改数据

<!--父组件-->
<script setup>
import Child from './Child.vue'
import { ref } from 'vue' const count = ref(1)
</script>
<template>
<Child v-model:count="count"/>
</template> <!--子组件-->
<script setup>
const props = defineProps({
count: Number
}) const emit = defineEmits(['update:count']) function updateCount() {
emit('update:count', 100)
}
</script>
<template>
<button @click="updateCount">更新父组件数据</button>
</template>
  1. 父组件获取子组件的属性或调用子组件的方法

默认情况下,父组件是不可以获取到子组件的属性。如果想这么做的话,我们可以在子组件使用 defineExpose 指定暴露出去的属性

defineExpose 可以指定那些属性、方法被其父组件访问和使用

<!--子组件-->
<script setup>
import { ref } from 'vue' const content = ref('无形装逼,最为致命')
const testFunc = () => {
console.log(content.value)
} defineExpose({
content,
testFunc
})
</script> <!--父组件-->
<script setup>
import Child from './Child.vue' // 这里声明的变量应该和子组件标签定义的ref保持一致
const child = ref(null)
console.log(child.value.content) // 无形装逼,最为致命
child.value.testFunc() // 这里会执行子组件的testFunc函数
</script>
<template>
<Child ref="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'

vue2 vue3
beforeCreate
created
setup()
beforeMount
Mounted
onBeforeMount
onMounted
beforeUpdate
updated
onBeforeUpdate
onUpdated
beforeDestroy
destroyed
obBeforeUnmount
onUnmounted

CSS

css 样式穿透

在 Vue2 中修改子组件或者组件库的样式,都会使用样式穿透 /deep/ .class{}

在 Vue3 中样式穿透的语法变成了 :deep(.class)


<style scoped>
:deep(.el-form) {
.el-input {
width: 200px;
}
}
</style>

css 的v-bind

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


<script setup>
import { ref } from 'vue' const color = ref('red')
</script> <style>
.text {
color: v-bind('color');
}
</style>

注意:<script setup> 中使用 v-bind,里面的变量需要引号包裹起来,特别注意。在 setup() 中不需要

高级函数

逻辑复用 hooks

在 vue2 中我们想要实现逻辑复用一般用 mixins,但是有一些弊端

在 vue3 中保留了 mixins, 但更推荐使用Hooks模式。通过自定义组合式函数,这些函数包含状态、生命周期函数等,可以在多个组件中实现复用。

下面以官方鼠标跟踪器示例举例进行讲解,封装函数:

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue' // 按照惯例,组合式函数名以“use”开头
export function useMouse() {
// 被组合式函数封装和管理的状态
const x = ref(0)
const y = ref(0) // 组合式函数可以随时更改其状态。
function update(event) {
x.value = event.pageX
y.value = event.pageY
} // 一个组合式函数也可以挂靠在所属组件的生命周期上
// 来启动和卸载副作用
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update)) // 通过返回值暴露所管理的状态
return { x, y }
}

下面是在组件中使用的方式:


<script setup>
import { useMouse } from './mouse.js' const { x, y } = useMouse()
</script> <template>Mouse position is at: {{ x }}, {{ y }}</template>
<!--Mouse position is at: 0, 0-->

我们通过上面代码发现,在自定义hooks函数中,我们依然可以使用响应式API、生命周期钩子等,可以实现 mixins 想要的效果

全局API转移

在 vue2 全局API 都是挂载在 Vue.prototype

在 vue3 改成了 app.config.globalProperties

const app = createApp(App)

app.config.globalProperties.$myGlobalMethod = function () {
// ...
}

调用的话:

this.$myGlobalMethod()

插槽

  1. 默认插槽

子组件写上 <slot></slot>,父组件在引入子组件标签内部写入内容,就会自动填充到子组件上面

比如我们有一个如下的子组件:


<template>
<header>头部</header>
<main>
<slot></slot>
</main>
<footer>尾部</footer>
</template>

父组件调用子组件:


<template>
<child>
<p>中间的主要内容</p>
</child>
</template>
  1. 具名插槽

具名插槽适用:当一个组件需要多个插槽,指定某个位置的内容

使用 <slot name="header"></slot> 定义一个插槽,使用 <template v-slot:header></template> 去指定插入的内容

比如我们有一个公共弹窗组件Dialog:


<template>
<div id="dialog">
<slot name="header"></slot>
<slot name="footer"></slot>
</div>
</template>

调用这个弹窗组件:


<template>
<Dialog>
<template v-slot:header>
<p>弹窗组件头部</p>
</template>
<template v-slot:footer>
<p>弹窗组件底部</p>
</template>
</Dialog>
</template>

具名插槽的缩写:

v-onv-bind 一样,v-slot 也有缩写。比如 v-slot:header 可以简写成 #header,所以我们可以将上面调用代码改成如下:


<template>
<Dialog>
<template #header>
<p>弹窗组件头部</p>
</template>
<template #footer>
<p>弹窗组件底部</p>
</template>
</Dialog>
</template>
  1. 作用域插槽

子组件可以通过动态绑定的方式,将子组件的值通过插槽传递给父组件

如下一个子组件:


<template>
<header>头部</header>
<main>
<slot name="main" title="演示作用域插槽"></slot>
</main>
</template>

父组件:


<template>
<Child #main="{title}">
<p>子组件传递过来的值:{{title}}</p>
</Child>
</template>
  1. 动态插槽

根据条件动态的去匹配,不同名称的插槽位置

举例如下,有一个如下的子组件:


<template>
<header>
头部:
<slot name="header"></slot>
</header>
<main>
主体:
<slot name="main"></slot>
</main>
<footer>
底部:
<slot name="footer"></slot>
</footer>
</template>

父组件:


<script setup>
import { ref } from 'vue'
import Child from 'Child.vue' const slotName = ref('')
</script> <template>
<button @click="slotName = 'header'">切换到头部</button>
<button @click="slotName = 'main'">切换到主体</button>
<button @click="slotName = 'footer'">切换到底部</button> <Child>
<template v-slot:[slotName]>测试内容</template>
</Child>
</template>

vue3 学习笔记(不断更新中...)(2024.11.13)的更多相关文章

  1. 保姆级尚硅谷SpringCloud学习笔记(更新中)

    目录 前言 正文内容 001_课程说明 002_零基础微服务架构理论入门 微服务优缺点[^1] SpringCloud与微服务的关系 SpringCloud技术栈 003_第二季Boot和Cloud版 ...

  2. AIX学习笔记(更新中)

    AIX操作系统基本命令 系统的进入和退出login: 输入用户名(例如:user01)password: 输入用户口令若用户名及口令均正确,则用户将登陆成功.此时系统会出现命令提示符 $或#,即表示可 ...

  3. KISSY学习笔记(更新中)

    序:身为一个JAVA开发工程师,前端代码我尽量是使用原生的JS来写的,或是使用一些JQ的开源组件(但是也只是使用,没有好好去研究过JQ这个框架).目前由于工作需要,必须要使用KISSY,打算借此机会, ...

  4. ubuntu学习笔记--不断更新中

    1.rpm软件包相关: rpm软件包安装命令: rpm -ivh linuxqq-v1.0.2-beta1.i386.rpm rpm软件默认安装路径查询: rpm -ql *.rpm ubuntu如何 ...

  5. GOF 的23种JAVA常用设计模式 学习笔记 持续更新中。。。。

    前言: 设计模式,前人总结下留给后人更好的设计程序,为我们的程序代码提供一种思想与认知,如何去更好的写出优雅的代码,23种设计模式,是时候需要掌握它了. 1.工厂模式 大白话:比如你需要一辆汽车,你无 ...

  6. 并发编程学习笔记(4)----jdk5中提供的原子类及Lock使用及原理

    (1)jdk中原子类的使用: jdk5中提供了很多原子类,它会使变量的操作变成原子性的. 原子性:原子性指的是一个操作是不可中断的,即使是在多个线程一起操作的情况下,一个操作一旦开始,就不会被其他线程 ...

  7. amazeui学习笔记--css(常用组件11)--分页Pagination

    amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...

  8. [学习笔记] 在Eclipse中导入项目

    参考前文:[学习笔记] 在Eclips 中导出项目 选择已经导出的文件: 导入之后,项目结构如下: 至此,完成.

  9. CockroachDB学习笔记——[译]CockroachDB中的SQL:映射表中数据到键值存储

    CockroachDB学习笔记--[译]CockroachDB中的SQL:映射表中数据到键值存储 原文标题:SQL in CockroachDB: Mapping Table Data to Key- ...

  10. [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar中的类解压后放在运行jar中

    前文: [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar打在jar包中 使用7z打开压缩包,查看所有依赖的jar都被解压以包名及class的方式存储在了运行jar中,此时jar的 ...

随机推荐

  1. [namespace hdk] diff.h

    Example cth.txt 12345 54321 114514 hdk.txt 12345 54321 114514 #include"diff.h" using names ...

  2. 一次基于AST的大规模代码迁移实践

    作者:来自 vivo 互联网大前端团队- Wei Xing 在研发项目过程中,我们经常会遇到技术架构迭代更新的需求,通过技术的迭代更新,让项目从新的技术特性中受益,但由于很多新的技术迭代版本并不能完全 ...

  3. 为 AntdUI 扩展一个 MessageBox 方法

    AntdUI是个很不错的开源 WinFrom 界面组件,使用中感觉消息对话框调用有点麻烦,于是按照 MessageBox.Show 的使用习惯,增加了一个扩展方法来调用,废话不多说,直接上代码. 1 ...

  4. Android内存分析命令

    一.内存指标 Item 全称 含义 等价 USS Unique Set Size 物理内存 进程独占的内存 PSS Proportional Set Size 物理内存 PSS= USS+ 按比例包含 ...

  5. 小程序按住选中 text

    <text selectable>按住选中可以赋值的</text>

  6. 大模型存储选型 & JuiceFS 在关键环节性能详解

    从去年开始,LLM大语言模型领域发展迅速.如 LLaMA.ChatGLM.Baichuan.Qwen 和 yi-model 等基础模型(Foundation Models)的数量显著增加.众多企业也开 ...

  7. docker镜像&容器管理

    1.拉取镜像 docker pull 拉取 MySQL8.0 和 tomcat 拉取MySQL8.0镜像 [root@localhost ~]# docker pull mysql:8.0 拉取tom ...

  8. 使用nacos上传配置文件报错

    1.使用nacos导入配置文件报错:未读取到合法数据,请检查导入的数据文件. 对比在naocs server中导出的文件,发现是少了一级目录.需要创建一个文件夹,名称为组的名称.因为在nacos上传文 ...

  9. Tarjan缩点题单 刷题题解

    Tarjan缩点可以将一个图的每个强连通分量缩成一个点,然后构建新图,该图就会变成一个有向无环图.变成有向无环图之后就能结合最短路,拓扑......解决相应题目 洛谷题单分享: https://www ...

  10. 五分钟一百行代码,手写一个vue项目全局通用的toast提示组件

    前言: 我们已经分享过如何快速实现自己需要的全局弹框组件: 在开发 Vue 项目时,特别是H5页面的项目,还有一个组件是我们非常常用的,它相对弹框来说没有那么大,并且不需要手动关闭在需要更简洁的提示用 ...