Vue组合式API

您所在的位置：网站首页 › vue里面的计算属性 › Vue组合式API

Vue组合式API

2024-07-17 22:54| 来源: 网络整理| 查看: 265

一、setup中的computed(计算属性)

对于任何包含响应式数据的复杂逻辑，都应该使用计算属性。

在前面的Options API（选项式API）中，是使用computed选项来完成计算属性的定义。

在Composition API(组合式API)中，我们可以在setup函数中使用computed方法来编写一个计算属性。

setup中如何使用computed：

1）基本写法

接收一个getter函数，并为getter函数返回的值，返回一个不变的ref对象。

{{ fullname }} 设置fullname // 1. 引入computed import { reactive, computed, ref } from 'vue' export default { setup() { // 定义本地data数据 const names = reactive({ firstName: "jack", lastName: "bryant" }) // 2. 使用基本写法定义计算属性 const fullname = computed(() => { return names.firstName + " " + names.lastName }) console.log(fullname) return {names, fullname, setFullname} } }

可以看到注意点有两个：

一定要先引入computed才能够在setup函数中使用给计算属性赋值时需要使用.value属性，因为它是一个ref对象 2）监听多个计算属性 {{ bottomInfo.content }} // 1.导入computed import { computed } from 'vue'; // 2.定义计算属性 // const titleText = computed(() => { // return props.itemData.verify_info.messages.join(" ") // }) // const titleColor = computed(() => { // return props.itemData.verify_info.text_color // }) // 挨个写多个计算属性会有些麻烦，有着组合关系的一些计算属性可以写到一起 const bottomInfo = computed(() => { return { content: props.itemData.bottom_info.content, style: { color: props.itemData.bottom_info.content_color, fontSize: props.itemData.bottom_info.font_size + "px" } } }) 3）完整语法

接收一个具有get和set的对象，返回一个可变的（可读写）ref对象。

{{ fullname }} 设置fullname // 1. 引入computed import { reactive, computed, ref } from 'vue' export default { setup() { // 定义本地data数据 const names = reactive({ firstName: "jack", lastName: "bryant" }) // 2. 使用完整写法定义计算属性 const fullname = computed({ set: function(newValue) { const tempNames = newValue.split(" ") names.firstName = tempNames[0] names.lastName = tempNames[1] }, get: function() { return names.firstName + " " + names.lastName } }) console.log(fullname) // 3. 给计算属性赋值、此时会调用set方法去给names的firstName和lastName赋值 function setFullname() { fullname.value = "lucy" console.log(names) } return {names, fullname, setFullname} } } 二、setup中如何使用监听器

在组合式API中，可以使用watchEffect和watch来完成响应式数据的侦听：

watchEffect：用于自动收集响应式数据的依赖

watch：需要手动指定侦听的数据源，数据变化时执行其回调函数

默认情况下它是惰性的，只有当被侦听的源发生变化时才会执行回调

2.1 watch 1）监听一个数据源 const info = reactive({ name: "why", age: 18, friend: { name: "kobe" } }) watch(info, (newValue, oldValue) => { console.log(newValue, oldValue) }) 2）监听多个数据源 const info = reactive({ name: "why", age: 18, friend: { name: "kobe" } }) const message = ref("Hello watch"); watch([info, message], (newValue, oldValue) => { console.log(newValue, oldValue) }) 3）关于深度监听和立即执行

默认情况下，组合式API中的watch函数就已经帮我们进行深度监听了。

当然也可以选择传入deep显式指定。

而立即执行则需要传入immediate显式指定。

const info = reactive({ name: "why", age: 18, friend: { name: "kobe" } }) watch(info, (newValue, oldValue) => { console.log(newValue, oldValue) },{ immediate: true, deep: true }) 2.2 watchEffect 1）基本使用

当监听到某些响应式数据变化时，我们希望执行某些操作，这个时候可以使用watchEffect。

import { watchEffect, watch, ref } from 'vue' export default { setup() { const counter = ref(0) const name = ref("张三") // 1.watchEffect传入的函数默认会直接被执行 // 2.在执行的过程中, 会自动的收集依赖(依赖哪些响应式的数据) // 比如箭头函数中用到的counter和name，一旦发生变化，回调函数就会直接执行 const stopWatch = watchEffect(() => { console.log("watchEffect", counter.value, name.value) }) return {counter, name} } }

首先，watchEffect传入的函数会被立即执行一次，并且在执行的过程中会收集依赖；  其次，只有收集的依赖发生变化时，watchEffect传入的函数才会再次执行

2）停止监听

有时希望可以让watchEffect停止侦听。此时可以获取watchEffect的返回值函数，调用该函数即可。

import { watchEffect, watch, ref } from 'vue' export default { setup() { const counter = ref(0) const name = ref("张三") // 只要调用watchEffect的返回值，就可以停止监听 const stopWatch = watchEffect(() => { console.log("watchEffect", counter.value, name.value) // counter.value > 10 时停止继续监听 if (counter.value >= 10) { stopWatch() } }) return {counter, name} } } 2.3 watch/watchEffect区别 watch必须制定数据源, watchEffect自动收集依赖watch监听到改变, 可以拿到改变前后value，watchEffect只能拿到变化后的watchEffect默认直接执行一次，watch在不设置immediate第一次是不执行三、setup中如何使用ref获取元素或者组件

上一篇已经说过了如何使用ref函数去定义响应式数据。

而Vue2.x中的有一个通过ref属性去获取DOM元素或者组件。这在Vue3.x的setup函数中又是怎么做到的呢？

setup函数中的方式是定义一个ref对象，绑定到元素或者组件的ref属性上即可。

按钮获取元素 import { ref, onMounted } from 'vue' import ShowInfo from './ShowInfo.vue' export default { components: { ShowInfo }, setup() { // 定义一个ref对象 const btnRef = ref() const showInfoRef = ref() // mounted的生命周期函数中就可以拿到相应的ref数据了 onMounted(() => { // 完成之后btnRef就相当于之前的this.$refs.btnRef console.log(btnRef.value) console.log(showInfoRef.value) }) function getElements() { console.log(titleRef.value) } return {btnRef, showInfoRef, getElements} } } 四、setup中如何使用生命周期钩子 4.1 使用示例 // 1.引入函数onMounted import { onMounted } from 'vue' export default { setup() { // 2.注册生命周期函数 onMounted(() => { console.log("onmounted") }) } }

使用起来就是先引入，然后在setup函数中进行使用，需要接收一个函数对象，一般就要箭头函数。

4.2 选项式API和组合式API的对应关系选项式APIsetup中对应的组合式APIbeforecreateNot needed*createdNot needed*beforeMountonBeforeMountmountedonMountedbeforeupdateonBeforeupdateupdatedonupdatedbeforeunmountonBeforeunmountunmountedonUnmountedactivatedonActivateddeactivatedonDeactivated 4.3 为什么没有beforecreate和created对应的组合式API

因为setup是围绕beforecreate和created生命周期钩子运行的，所以不需要显式地定义它们。

因此在这些钩子中编写的任何代码都可以直接在setup函数中编写。

五、setup中如何使用依赖注入 5.1 Provide函数

provide函数可以传入两个参数：

name：提供的属性名称；

value：提供的属性值

const name = ref("张三") provide("name", name) provide("age", 18)

为了增加 provide值和 inject 值之间的响应性，我们可以在provide值时使用ref和reactive。

就想这里的age就不具备响应式。

5.2 Inject函数

在后代组件中可以通过inject函数来注入需要的属性和对应的值.

Inject函数可以传入两个参数(可以只传其一)：

要注入的属性的名称；

注入属性不存在时的默认值；

const name = inject("name") const age = inject("age", 0)

对于复杂数据的传共享，都会使用Vuex或者pinia去共享数据。大部分情况不会去使用依赖注入的方式

六、setup语法糖 6.1 语法的优势

当打算把所有的内容都写在setup函数中时，可以使用语法。

是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。

当同时使用SFC与组合式API时则推荐该语法，他有如下特点：

更少的样板内容，更简洁的代码

能够使用纯 Typescript 声明 prop和抛出事件

更好的运行时性能

更好的IDE类型推断性能

6.2 基础语法示例 AppContent: {{ message }} 修改message // 1.所有编写在顶层中的代码, 都是默认暴露给template可以使用 import { ref, onMounted } from 'vue' import ShowInfo from './ShowInfo.vue' // 2.定义响应式数据 const message = ref("Hello World") console.log(message.value) // 3.定义绑定的函数 function changeMessage() { message.value = "你好啊, 李银河!" } function infoBtnClick(payload) { console.log("监听到showInfo内部的点击:", payload) } // 4.获取组件实例 const showInfoRef = ref() onMounted(() => { showInfoRef.value.foo() })

注意点：

如何使用？

将 setup属性添加到标签上。里面的代码会被编译成组件 setup() 函数的内容。

这意味着与普通的

6.3 如何定义props的值

使用setup语法糖时，提供了defineProps()函数去定义props。

ShowInfo: {{ name }}-{{ age }} // 定义props const props = defineProps({ name: { type: String, default: "默认值" }, age: { type: Number, default: 0 } })

defineProps()函数的返回值是一个只读属性，只能使用，不能修改。

6.4 如何发出事件

使用setup语法糖时，提供了defineEmits()函数去发出事件，从而给父元素传递一些信息。

showInfoButton // 绑定函数, 并且发出事件 const emits = defineEmits(["infoBtnClick"]) function showInfoBtnClick() { emits("infoBtnClick", "showInfo内部发生了点击") } 6.4 如何暴露方法或者属性

使用的组件内容是不公开的。

意思就是在父组件中的模板ref或者$parent链获取到的组件的公开实例。

不会暴露任何在中声明的属性或者方法。

通过defineExpose编译器宏来显式指定在组件中要暴露出去的属性或者方法。

子组件：

// 定义foo的函数 function foo() { console.log("foo function") } // 把foo函数暴露出去 defineExpose({ foo })

父组件：

// 导入内置函数和ShowInfo组件 import { ref, onMounted } from 'vue' import ShowInfo from './ShowInfo.vue' // 获取组件实例（只能使用组件中暴露出来的属性和方法） const showInfoRef = ref() onMounted(() => { showInfoRef.value.foo() })

【本文地址】

Vue组合式API

Vue组合式API

今日新闻

推荐新闻