【Vue3】setup函数的注意事项以及watch监视属性的六种情况
一. setup须知
1.1setup的执行时间
1.setup的执行时间要比beforCreate执行要早
export default { name: "Demo", beforeCreate(){ console.log('beforeCreate已执行'); }, setup() { console.log('setup已执行'); let person = reactive({ name: "小明", age: 20, }); return { person, }; }, };
1.2.steup参数
setup的参数
1.props: 值为对象,包含: 组件外部传递过来,且组件内部声明接收了的属性
2.context:上下文对象
①attrs:值为对象,包含: 组件外部传递过来,但没有在props配置中声明的属性,相当于
this.$attrs
export default { name: "Demo", props:['msg','age'], setup(props) { console.log(props); let person = reactive({ name: "小明", age: 20, }); return { person, }; }, };
②slots: 收到的插槽内容,相当于
this.$slots
在App中定义插槽
<template v-slot:qwe> <span>123</span> </template> <template v-slot:ewq> <span>321</span> </template>
在子组件中获取到插槽
console.log(context.slots); // 得到插槽
③emit: 分发自定义事件的函数,相当于
this.$emit
在App中写一个自定义事件并且传给组件
<Demo @hi="Hello" msg="山鱼" age=10> </Demo>
setup() { function Hello(){ console.log('你好!'); } return { Hello } }
然后去到子组件使用context.comit获取到自定义事件
function point(){ context.emit('hi',666) } 5TgxPT2v-1681788304084)] ```js function point(){ context.emit('hi',666) }
与Vue2中的computed配置功能一致
import { reactive,computed} from "vue"; export default { name: "Demo", 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 arr = value.split('-') person.firstName = arr[0] person.lastName = arr[1] } }) return { person, }; }, };
二. watch监视属性
有两种watch,分别是单个属性数据监视,和多个属性数据监视
watch中的三个参数分别为,监视的对象,监视的函数,监视属性的配置
监视ref所定义的数据
①监视属性监视ref的一个响应式的值
watch(sum, (newvalue, oldvalue) => { console.log('当前值为'+newvalue, '以前值为'+oldvalue); });
②监视ref所定义的多个响应式数据
watch([sum,msg], (newvalue, oldvalue) => { console.log('当前值为'+newvalue, '以前值为'+oldvalue); });
监视reactive所定义的数据
①监视reactive定义的数据的变化
使用reactive定义的数据无法使用watch正确的获取newValue
并且会强制开启深度监视
watch(person,(newValue, oldValue) => { console.log('person变化了',newValue,oldValue) })
②监视reactive所定义的响应式数据的某个属性
watch(()=>person.name,(newValue,oldValue)=>{ console.log('person.name发生了变化',newValue,oldValue) })
③监视reactive所定义的响应式数据的某些属性
watch([()=>{person.age},()=>{person.name}],(newValue,oldValue)=>{ console.log('person.name发生了变化',newValue,oldValue) })
④特殊形况
注:该情况监视的是recative所定义的对象中的某个属性,所以deep可以开启
watch(()=>person.job,(newValue,oldValue)=>{ console.log('person.name发生了变化',newValue,oldValue) }, {deep: true})
Vue3
web前端
网站开发
小程序开发
阅读排行
-
1. 几行代码就能实现Html大转盘抽奖
大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。
查看详情 -
2. 浙江省同区域公司地址变更详细流程
提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)
查看详情 -
3. 微信支付商户申请接入流程
微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。
查看详情 -
4. 阿里云域名ICP网络备案流程
根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。
查看详情 -
5. 微信小程序申请注册流程
微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。
查看详情