三、vue3--生命周期、Hook函数、 toRef和toRefs、其他的组合式API
1.生命周期
vue2中的写法,在vue3中依然可以这么写。
注意beforeDestroy在vue3变成了beforeUnmount,destroyed变成了unmounted
export default {/*data() {return {count: 1,};},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');},*/
}
在组合式api(setup)中使用生命周期
setup可以当成:beforeCreate 和 created,所以setup本身也可以当成一个生命周期函数,并且
setup的执行时机在 beforeCreate 之前。
注意:如果即写了组合式API生命周期函数,又写了传统的生命周期函数,那么组合式API生命周
期函数会先执行。
setup() {onBeforeMount(()=>{console.log('onBeforeMount');})onMounted(()=>{console.log('onMounted');})onBeforeUpdate(()=>{console.log('onBeforeUpdate');})onUpdated(()=>{console.log('onUpdated');})onBeforeUnmount(()=>{console.log('onBeforeUnmount');})onUnmounted(()=>{console.log('onUnmounted');})}
2.Hook函数
vue3的hook函数有点类似vue2的mixin,两者都能提高代码的可复用性,让我们不需要一种业务重复
写很多次,但是vue3的hook是函数,能够让我们在想要的组件中使用时可以直接引入并使用,代
码来源更加清晰,修改起来也更加方便。
这是许多业务代码写在一起,虽然比起vue2一个业务被拆分成许多块不同,它的业务可以写在一
起,方便修改,但是却显得很臃肿。
import {computed, ref} from 'vue'
export default {setup() {//手机相关业务const phoneName = ref('小米')const phonePrice = ref(8000)const phoneZkPrice = computed(()=>{return (phonePrice.value*0.8).toFixed(2)})const updatePhoneName = ()=>{phoneName.value = '华为'}const updatePhonePrice = ()=>{phonePrice.value = 6000}//汽车相关业务const carName = ref('宝马')const carPrice = ref(30)const carZkPrice = computed(()=>{return (carPrice.value*0.8).toFixed(2)})const updateCarName = ()=>{carName.value = '奔驰'}const updateCarPrice = ()=>{carPrice.value = 40}//飞机相关业务const planeName = ref('F747')const planePrice = ref(300)const planeZkPrice = computed(()=>{return (planePrice.value*0.8).toFixed(2)})const updatePlaneName = ()=>{planeName.value = 'F404'}const updatePlanePrice = ()=>{planePrice.value = 400}return {phoneName,phonePrice,phoneZkPrice,updatePhoneName,updatePhonePrice,carName,carPrice,carZkPrice,updateCarName,updateCarPrice,planeName,planePrice,planeZkPrice,updatePlaneName,updatePlanePrice}}
}
这是用hook函数写的,很明显结构很清晰,后期也很好维护。
car模块
import {ref,computed} from 'vue'
export default function(){//汽车相关业务const carName = ref('宝马')const carPrice = ref(30)const carZkPrice = computed(()=>{return (carPrice.value*0.8).toFixed(2)})const updateCarName = ()=>{carName.value = '奔驰'}const updateCarPrice = ()=>{carPrice.value = 40}return {carName,carPrice,carZkPrice,updateCarName,updateCarPrice}
}
phone模块
import {ref,computed} from 'vue'
export default function(){//手机相关业务const phoneName = ref('小米')const phonePrice = ref(8000)const phoneZkPrice = computed(()=>{return (phonePrice.value*0.8).toFixed(2)})const updatePhoneName = ()=>{phoneName.value = '华为'}const updatePhonePrice = ()=>{phonePrice.value = 6000}return {phoneName,phonePrice,phoneZkPrice,updatePhoneName,updatePhonePrice}
}
plane模块
import {ref,computed} from 'vue'
export default function(){//飞机相关业务const planeName = ref('F747')const planePrice = ref(300)const planeZkPrice = computed(()=>{return (planePrice.value*0.8).toFixed(2)})const updatePlaneName = ()=>{planeName.value = 'F404'}const updatePlanePrice = ()=>{planePrice.value = 400}return {planeName,planePrice,planeZkPrice,updatePlaneName,updatePlanePrice}
}
导入hook函数并使用
// 导入相关业务的hook函数
import useCar from "@/use/useCar"
import usePhone from "@/use/usePhone"
import usePlane from "@/use/usePlane"
export default {setup() {return {// 展开usePhone函数返回的对象...usePhone(),...useCar(),...usePlane()}}
3.toRef和toRefs
import { reactive,toRef,toRefs } from 'vue'
export default {setup() {// 定义数据let stuData = reactive({name:'张三',age:20,car:{name:'大众',price:'20W'}})return{// toRef()函数,可以用来为一个 reactive 对象的属性创建一个 ref// 这样做的好处是,简化了模板中的表达式。// toRef()函数,需要传两个参数:1.reactive 对象,2.具体的属性名// name:toRef(stuData,'name'),// age:toRef(stuData,'age'),// car:toRef(stuData,'car')// 假如 reactive 对象中,有100个属性,上面的操作要写100次,所以,一般都直接用toRefs函数// toRefs函数,把一个响应式对象转换成普通对象,该普通对象的每个 属性 都是一个 ref ...toRefs(stuData)}}
}
4.其他的组合式API
readonly函数:用于定义只读的代理对象, 注意:只读是深层次的,对象本身不能改,对象里面的
属性也不能改。
const car = readonly({no:'1001',name:'大众',color:'白色',price:30,type:{name:'SUV',level:'中级'}})
shallowRef函数:用于定义一个浅响应式的ref对象。 shallowRef() 返回的对象 value 属性值是
object对象(普通对象),不再具备任何响应式了。
const stu2 = shallowRef({name:'小明',age:20})const updateStu2 = ()=>{// 直接修改value是具备响应式的stu2.value = {name:'小芳',age:30}}const updateStu2Name = ()=>{// 修改value里面的具体属性值是不具备响应式stu2.value.name = '小红'}
shallowReactive函数:返回一个浅层的响应式代理,只对对象的第一层属性创建响应式
const stu2 = shallowReactive({name:'小米',age:22,friend:{name:'BY2',age:20,car:{name:'奔驰',price:20}}})
shallowReadonly函数: 用于定义浅只读对象,不能修改对象的第一层属性,可以修改对象的深层
次属性,注意:修改深层次属性后不会报错,但是不具备响应式效果
const stu3 = shallowReadonly({name:'李四',age:22,friend:{name:'王五',age:23}})
isRef函数:判断一个对象是否是ref对象
isReactive函数:检查一个对象是否是由 reactive 创建的响应式代理
isReadonly函数:检查一个对象是否是由 readonly 创建的只读代理
isProxy函数 :检查一个对象是否是由 reactive 或者 readonly 方法创建的代理
toRaw函数:将代理对象转为一个普通对象返回
// obj是一个普通对象let obj = {name: "张三",age: 20,};// 通过reactive方法,给obj返回一个代理对象const stu1 = reactive(obj);// toRaw方法,将一个代理对象转为一个普通对象// 这个普通对象,就是被代理的对象const stu2 = toRaw(stu1);
markRaw函数:包装过后的对象,再也不能成为响应式对象,原理是:markRaw方法,会给源对
象添加一个 __v_skip: true属性
三、vue3--生命周期、Hook函数、 toRef和toRefs、其他的组合式API相关推荐
- Vue3 生命周期钩子函数
一.Vue3生命周期钩子 setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method onBeforeMount() : 组 ...
- vue3生命周期钩子函数
vue2生命周期钩子函数视图 vue3生命周期钩子函数视图 代码 // 通过配置项 beforeCreate () { console.log('beforeCreate'); }, created ...
- Vue3 生命周期Hooks函数与调度器Scheduler的原理
大厂技术 高级前端 Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 写在最前:本文章的目标 Vue3的生命周期的实现原理是比较简单的,但要理解整个Vue3的生命 ...
- Vue3 - 生命周期钩子函数(组合式 API)
前言 Vue 是组件化编程,从一个组件诞生到消亡会经历很多过程,这些过程就叫做生命周期.而伴随着生命周期,给用户使用的函数,就叫钩子函数,实际为操控生命周期. 本文主要对比 Vue2 生命周期,引出并 ...
- 详解Vue八大生命周期钩子函数
摘要:Vue为生命周期中的每个状态都设置了钩子函数(监听函数) .每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用. 本文分享自华为云社区<一文带你弄懂Vue八大生命周期钩子函数&g ...
- 不来看看这些 VUE 的生命周期钩子函数? | 原力计划
作者 | huangfuyk 责编 | 王晓曼 出品 | CSDN 博客 VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化.可以分为:创建.挂载.更新.销毁四 ...
- vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录 组件结构 组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
- Vue的生命周期钩子函数介绍
感谢内容提供者:金牛区吴迪软件开发工作室 Vue的生命周期钩子函数介绍 vue生命周期共分为四个阶段 一:实例创建 二:DOM渲染 三:数据更新 四:销毁实例 共有八个基本钩子函数 1.beforeC ...
- 介绍一下Spring Boot启动流程以及生命周期勾子函数?
代码那些事儿 2020-02-22 16:10:15 上篇文章介绍了Spring Boot自动配置的原理,但是对于Spring Boot应用的整个启动流程还是一头雾水,虽然Spring Boot大大简 ...
- React生命周期函数-生命周期回调函数
面试的时候问到了如何运用,这里再回顾一下. 也叫生命周期钩子函数(生命周期钩子) 生命周期大概分成三个阶段:初始化阶段,更新阶段,卸载 将组件放入页面的过程中,React会在合适的时间进行函数的调用. ...
最新文章
- 关于Redux的一些总结(一):Action 中间件 异步
- 若所有的参数皆需要类型转换——请为此采用non-member函数
- golang相关在线学习文档
- LeetCode 编程 二
- dotty编译器语法特性之一交叉类型,联合类型和文本单例类型
- 笔记本安装centos7.6网络的配置_可以放入口袋里面的笔记本电脑:国产黑科技,户外工程师必备利器...
- ceres-solver库使用示例
- php : 匿名函数(闭包) [一]
- 林锐高质量编程中的几道面试题
- 树莓派-迅雷远程下载
- 路由器、交换机、集线器的区别
- Android集成腾讯云通信IM
- 百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
- 音频采集 via Media Foundation
- 小程序 canvas画图片
- 我的世界android启动器,我的世界手机版启动器 安卓方块启动器教程
- 做html5抽奖程序xu,用jQuery实现抽奖程序
- u-boot 详细介绍
- linux ruby 删除文件,ruby 删除文件夹(包括文件夹中的文件夹和文件)
- PDF文件页面如何提取
热门文章
- 360惊天后门曝光:“盗梦盒子”重现江湖
- VScommunity2019 0x00007FFCCA14B7EC (ucrtbased.dll) (Project1.exe 中)处有未经处理的异常: 将一个无效参数传递给了将无效参数视为严重错误
- 电力施工作业现场安全综合管控平台项目解决方案
- 75道程序员逻辑思维面试题答案
- Java中static、this、super、final用法
- layui 借助 parseData 回调函数解析table 组件所规定的数据格式
- android minui fb显示相关函数
- 之前总结的今天给大分享一下iOS
- 架构测试:HAproxy实现负载均衡,前端为nginx+php,数据库实现读写分离和高可用...
- 2010年软件业十大新闻事件