当前位置： 首页 > news >正文

常用 Composition API【VUE3】

news 2025/8/18 16:19:12

二、常用 Composition API

7. 计算属性与监视

7.1 computed函数

  • 与Vue2.x中computed配置功能一致
  • 写法
<template><h1>一个人的信息</h1>姓：<input type="text" v-model="person.firstName"><br><br>名：<input type="text" v-model="person.lastName"><br><br><span>全名：{{ person.fullName }}</span><br>全名：<input type="text" v-model="person.fullName"></template><script>import {reactive, computed} from 'vue'export default {name: 'Demo',/* computed: {fullName(){return this.person.firstName + '-' + this.person.lastName}}, *///数据setup(){//数据let person = reactive({firstName: '张',lastName: '三',})//计算属性——简写（没有考虑计算属性被修改的情况）/* person.fullName = computed(() => {return person.firstName + '-' + person.lastName}) *///计算属性——完整写法（考虑读和写）person.fullName = computed({get(){return person.firstName + '-' + person.lastName},set(value){const newArr = value.split('-')person.firstName = newArr[0]person.lastName = newArr[1]}})//返回一个对象（常用）return {person,}}}</script>

7.2 watch函数

  • 与Vue2.x中watch配置功能一致
  • 两个小“坑”：
    • 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
    • 监视reactive定义的响应式数据中某个属性时：deep配置有效。
<template><h2>当前求和为：{{ sum }}</h2><button @click="sum++">点我+1</button><hr><h2>当前的信息为：{{ msg }}</h2><button @click="msg+='!'">修改信息</button><hr><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>薪资：{{ person.job.j1.salary }}</h2><button @click="person.name += '~'">修改姓名</button><button @click="person.age++ ">增长年龄</button><button @click="person.job.j1.salary++">涨薪</button></template><script>import {ref, reactive ,watch} from 'vue'export default {name: 'Demo',//Vue2//watch: {//简写/* sum(newValue, oldValue){console.log('sum的值变化了！', newValue, oldValue);} *///完整/* sum: {immediate: true,deep: true,handler(newValue, oldValue){console.log('sum的值变化了！', newValue, oldValue);}} *///},//数据setup(){//数据let sum = ref(0)let msg = ref('你好啊')let person = reactive({name: '张三',age: 18,job: {j1: {salary: 20}}})//情况一：监视ref所定义的响应式数据watch(sum, (newValue, oldValue) => {console.log('sum变了',newValue, oldValue);}, {immediate: true})//情况二：监视ref所定义的多个响应式数据watch([sum, msg], (newValue, oldValue) => {console.log('sum或msg变了', newValue, oldValue);},{immediate: true})/* 情况三：监视reactive所定义的一个响应式数据的全部属性1. 注意：此处无法正确的获取oldValue 2. 注意：强制开启了深度监视（deep配置无效）*/watch(person, (newValue, oldValue) => {console.log('person变化了', newValue, oldValue);})//情况四：监视reactive所定义的一个响应式数据中的某个属性watch(() => person.age, (newValue, oldValue) => {console.log('person年龄变化了', newValue, oldValue);})//情况五：监视reactive所定义的一个响应式数据中的某些属性watch([() => person.age, () => person.name], (newValue, oldValue) => {console.log('person年龄或姓名变化了', newValue, oldValue);})//特殊情况watch(() => person.job, (newValue, oldValue) => {console.log('person的job变化了', newValue, oldValue);}, {deep: true}) //此处由于监视的是reactive定义的对象中的某个属性，所以deep配置有效//返回一个对象（常用）return {sum,msg,person,}}}</script>

7.3 watchEffect函数

  • watch的套路是：既要指明监视的属性，也要指明监视的回调。
  • watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
  • watchEffect有点像computed：
    • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
    • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。
//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。watchEffect(() => {const x1 = sum.valueconst x2 = person.job.j1.salaryconsole.log('watchEffect所指定的回调执行了');})

8. 生命周期

在这里插入图片描述

  • Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
    • beforeDestroy改名为 beforeUnmount
    • destroyed改名为 unmounted
  • Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
    • beforeCreate===>setup()
    • created=======>setup()
    • beforeMount ===>onBeforeMount
    • mounted=======>onMounted
    • beforeUpdate===>onBeforeUpdate
    • updated =======>onUpdated
    • beforeUnmount ==>onBeforeUnmount
    • unmounted =====>onUnmounted
<template><h2>当前求和为：{{ sum }}</h2><button @click="sum++">点我+1</button></template><script>import {onBeforeMount, ref, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'export default {name: 'Demo',//通过配置项的形式使用生命周期钩子beforeCreate(){console.log('---beforeCreate---');},created(){console.log('---created---');},beforeMount(){console.log('---beforeMount---');},mounted(){console.log('---mounted---');},beforeUpdate(){console.log('---beforeUpdate---');},updated(){console.log('---updated---');},beforeUnmount() {console.log('---beforeUnmount---');},unmounted(){console.log('---unmounted---');},//数据setup(){console.log('---setup---');//数据let sum = ref(0)//通过组合式API的形式去使用生命周期钩子onBeforeMount(() => {console.log('---onBeforeMount---');})onMounted(() => {console.log('---onMounted---');})onBeforeUpdate(() => {console.log('---onBeforeUpdate---');})onUpdated(() => {console.log('---onUpdated---');})onBeforeUnmount(() => {console.log('---onBeforeUnmount---');})onUnmounted(() => {console.log('---onUnmounted---');})//返回一个对象（常用）return {sum,}}}</script>

9. 自定义hook函数

  • 什么是hook？
    ——本质是一个函数，把setup函数中使用的Composition API进行了封装。
  • 类似于vue2.x中的mixin。
  • 自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂。

usePoint.js

import { reactive, onMounted, onBeforeUnmount } from 'vue'export default function (){//实现鼠标打点的相关数据let point = reactive({x: 0,y: 0})//实现鼠标打点的方法function savePoint(e){point.x = e.pageXpoint.y = e.pageYconsole.log(e.pageX, e.pageY);}//实现鼠标打点的相关的生命周期钩子onMounted(() => {window.addEventListener('click', savePoint)})onBeforeUnmount(() => {window.removeEventListener('click', savePoint)})return point}

App.vue

<template><button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button><Demo v-if="isShowDemo"></Demo><hr><Test></Test>
</template><script>
import {ref} from 'vue'
import Demo from './components/Demo.vue'
import Test from './components/Test.vue'
export default {name: 'App',components: {Demo, Test},setup(){let isShowDemo = ref(true)return {isShowDemo}}
}
</script>

components/Demo.vue

<template><h2>当前求和为：{{ sum }}</h2><button @click="sum++">点我+1</button><hr><h2>当前点击时鼠标的坐标为: x: {{point.x}}, y: {{point.y}}</h2></template><script>import { ref } from 'vue'import usePoint from '../hooks/usePoint'export default {name: 'Demo',//数据setup(){//数据let sum = ref(0)let point = usePoint()//返回一个对象（常用）return {sum,point}}}</script>

10. toRef

  • 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

  • 语法：const name = toRef(person,'name')

  • 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

  • 扩展：toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

APP.vue

<template><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h2>薪资：{{ job.j1.salary }}</h2><button @click="name += '~'">修改姓名</button><button @click="age++ ">增长年龄</button><button @click="job.j1.salary++">涨薪</button>
</template><script>
import {ref, reactive, toRef, toRefs} from 'vue'
export default {name: 'Demo',//数据setup(){//数据let person = reactive({name: '张三',age: 18,job: {j1: {salary: 20}}})// const name1 = person.name// console.log('%%%', name1);// const name2 = toRef(person, 'name')// console.log('###', name2);const x = toRefs(person)console.log('@@@', x);//返回一个对象（常用）return {// name: toRef(person, 'name'),// age: toRef(person, 'age'),// salary: toRef(person.job.j1, 'salary')...toRefs(person)}}
}
</script>
http://www.lryc.cn/news/63998.html

相关文章：

  • --商业模式--
  • JavaWeb《HTML基础标签》
  • ChatGpt 能取代人类吗？
  • PHP内存溢出Allowed memory size of 解决办法
  • 重回代码，学习总结
  • 【Leetcode -86.分隔链表 -92.反转链表Ⅱ】
  • 算法记录 | 48 动态规划
  • CRM部署Always on 后 CRM报无法更新数据库，数据库只读,且读写分离不正常
  • 麓言信息设计创意思维，打开设计师思路
  • POJ3704 括号匹配问题 递归方法
  • leetcode — JavaScript专题（三）：完全相等的 JSON 字符串、复合函数、 分组、柯里化、将对象转换为 JSON 字符串
  • OGNL 的表达式
  • JAVA面试中遇到的那些坑，80%的人都种过招
  • 【测试开发】单元测试、基准测试和性能分析（以 Go testing 为例）
  • linux中一条命令查询当前端口的进程，然后拿到进程pid，作为另一条杀死进程的参数
  • 程序员找工作难吗？我用亲身经历来告诉大家
  • 【Web服务】HTTP和DNS重要知识
  • 【C++】-关于类和对象的默认成员函数（中）-拷贝构造函数和赋值运算符重载函数
  • c++11上篇
  • 异构无线传感器网络路由算法研究（Matlab代码实现）
  • MySQL数据库——MySQL TRUNCATE：清空表记录
  • 财报解读：连续三年逆势增长的背后，欧派家居到底靠的是什么？
  • 希望计算机专业同学都知道这些宝藏博主
  • 1694_week1_MIT使用Python编程学习手记1
  • 第二十一章 光源
  • CVPR 2023 超分辨率（super-resolution）方向上接收论文总结
  • Python 基于 Django 的学生成绩管理系统，可视化界面（附源码，教程）
  • 第二弹进阶吴恩达 ChatGPT Prompt 技巧
  • 约瑟夫环问题
  • JavaScript中的异步编程