vue3之setup的使用理解
1、vue3中的setup有什么用
setup的设计是为了使用组合式api
2、为什么不用之前的组件的选项
data、computed、methods、watch 组织逻辑在大多数情况下都有效。然而,当我们的组件变得更大时,逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解,尤其是对于那些一开始就没有编写这些组件的人来说。而通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑了.
3、setup的在vue生命周期的位置
setup位于created 和beforeCreated之前,用于代替created 和beforeCreated,但是在setup函数里不能访问到this,另外setup内可以通过以下hook操作整个生命周期
onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered
4、setup可以接收哪些参数
setup可接受props,context
,其中props
由于是响应式数据,不能直接解构赋值,context
不是响应式数据,可以直接解构赋值;setup必须返回一个对象,一旦return,就可以像vue2.x的方式使用该属性
props:['test']
setup(props,context){
//const {test} = props //错
const {test} = toRefs(props) //对
const { attrs, slots, emit }= context //对return {test}
}
5、优先级,如果data,props,setup都有一个同名属性,setup返回的该属性优先级最高,以执行以下代码为例,将显示:test from son's setup
//father.vue
...
<custField :test="test" />
setup(){const test = ref('test from father')return{test}
}
...//son.vue
<template><div class="custField">优先级测试<h1>{{ test }}</h1></div>
</template><script>
import { toRefs } from "vue";
export default {props: ["test"],data() {return {test: "test from son's data",};},setup(props) {let test = toRefs(props);test = "test from son's setup";return { test };},
};
</script>
6、如上代码所示,若要在setup内执行ref,toRefs,toRef,computed,watch,watchEffect等函数,需先引入
import { toRefs, ref, onMounted, nextTick } from "vue";
7、如何在setup中拿到ref对应的子组件,并执行其的函数,场景如下:使用antd的form表单的验证,在vue2.x方案时可以在methods中通过this时需要使用this.$refs.ruleForm.validate()
,而在setup中拿不到this,应该从{ref}入手,看下面代码
//...<a-formref="ruleForm":model="form":rules="rules"><a-form-item ref="name" label="Activity name" name="name"><a-input v-model:value="form.name" /></a-form-item><a-form-item :wrapper-col="{ span: 14, offset: 4 }"><a-button type="primary" @click="onSubmit"> 验证</a-button><a-button style="margin-left: 10px" @click="resetForm"> 重置</a-button></a-form-item>
</a-form>
//...vue2.xmethods: {onSubmit() {this.$refs.ruleForm.validate().then(() => {console.log('values', this.form);}).catch(error => {console.log('error', error);});},resetForm() {this.$refs.ruleForm.resetFields();},},//..vue3
setup(){//1.设置一个 <a-form// ref="ruleForm"// :model="form"// :rules="rules"//> ref同名属性,并使用ref(null)包装const ruleForm=ref(null)//通过ref或reactive包裹起来让其成为响应式数据//2.一旦后面return {ruleForm},vue3会自动绑定ref="ruleForm"的组件//设定方法,但是要通过ruleForm.value才能拿到组件const onSubmit=()=>{ruleForm.value//通过ref包裹的数据需要使用.value来取得相应的值.validate()//,而reactive包裹的数据不需要通过.value来取得相应的值.then(() => {console.log("values", form);}).catch((error) => {console.log("error", error);});}const resetForm = () => {console.log("resetForm");ruleForm.value.resetFields();};//3.setup必须返回一个对象,把vue在生命周期需要调用的方法,属性暴露出去return {ruleForm,//Q:为什么上面要用.value的形式,A:这里会自动解绑onSubmit,resetForm }
}
8、如何调用子组件内setup内的方法
- 子组件在setup写好方法
method
,并通过return
暴露出去 - 父组件调用子组件时为其添加
ref
属性 - 父组件setup内拿到子组件添加的
ref
属性property
,再通过property.value.method()
调用
子组件
<template>// 渲染从父级接受到的值<div>Son: {{ valueRef }}</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({name: 'Son',setup() {const valueRef = ref('') // 该函数可以接受父级传递一个参数,并修改valueRef的值const acceptValue = (value: string) => (valueRef.value = value)return {acceptValue,valueRef}}
})
</script>
父组件
<template><div>sonRef</div><button @click="sendValue">send</button>// 这里ref接受的字符串,要setup返回的ref类型的变量同名<Son ref="sonRef" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Son from '@/components/Son.vue'
export default defineComponent({name: 'Demo',components: {Son},setup() {// 如果ref初始值是一个空,可以用于接受一个实例// vue3中获取实例的方式和vue2略有不同const sonRef = ref()const sendValue = () => {// 可以拿到son组件实例,并调用其setup返回的所有信息console.log(sonRef.value) // 通过调用son组件实例的方法,向其传递数据sonRef.value.acceptValue('123456')}return {sonRef,sendValue}}
})
</script>
9、vue3如何setup函数如何实现多属性监听,如何实现深度监听
引入
watch
,watch最后返回unwatch方法,在调用该方法将停止监听watch传入数组,注意,监听的是普通类型可直接输入,若是引用类型,则需要输入函数返回的值,例如要想同时监听
data.form.c.c1
属性和ddd
属性对于watch第三个传参
deep
和immediate
都不陌生,而flush
的作用是决定callback的执行时机,有三个选项,pre
(默认),post
,sync
,分别对应watch在组件更新前,后,时执行callback.const ddd = ref(“wwww”);
const data = reactive({
form: {
a: 1,
b: 2,
c: {
c1: “c1”,
c2: “c2”,
},
},
haha: “haha”,
});
const unwatch = watch(
[ddd, () => data.form.c.c1],//传入数组
(newValue, oldValue) => {//结构的也是数组,
//也可以写成([nowddd,nowC1],[preddd,preC1])=>{…}
console.log(new--->${newValue}
);
console.log(old--->${oldValue}
);
console.log(newValue[0]);
console.log(newValue);
},
{ deep: true }//第三个参数传入deep,immediate,flush属性
);
setTimeout(() => {
ddd.value = “eee”;
}, 1000);
setTimeout(() => {
data.form.c.c1 = “2222”;
setTimeout(() => {
unwatch();//这里异步使用unwatch方法,后面的ddd.value = "ffff"将不被监听
});
}, 2000);
setTimeout(() => {
ddd.value = “ffff”;
}, 3000);
10、vue3的watchEffect有什么用
它是一个与侦听器,作用和watch差不多,但是不能拿到
newValue
和oldValue
,下面是它的定义,传参effect函数
和option对象
,effect函数
又可传入onInvalidate函数
,option对象
可传入flush,onTrack,onTrigger
,flush
与watch的flush相同,onTrack,onTrigger
又可传入DebuggerEvent 函数
用于开发调试,返回与watch相同返回一个停止侦听的函数function watchEffect(effect: (onInvalidate: InvalidateCbRegistrator) => void,options?: WatchEffectOptions ): StopHandle; interface WatchEffectOptions {flush?: "pre" | "post" | "sync";onTrack?: (event: DebuggerEvent) => void;onTrigger?: (event: DebuggerEvent) => void; } interface DebuggerEvent {effect: ReactiveEffect;target: any;type: OperationTypes;key: string | symbol | undefined; } type InvalidateCbRegistrator = (invalidate: () => void) => void; type StopHandle = () => void;
传参的
effect函数
会在组件beforeCreate
之前就执行一次,若该函数里使用到了某些数据,将监听该数据,当监听的数据发生变化时就会(若watchEffect
传入了onInvalidate函数
,则会先执行onInvalidate函数
后)再次执行effect函数
.<template><div class="about"><h1>This is an about page</h1><h4>{{ count }}</h4><h4>{{ test }}</h4><button @click="jump">jump</button></div> </template> <script lang='ts'> import { onMounted, ref, watchEffect, onBeforeMount } from "vue"; import { useRoute, useRouter } from "vue-router"; const fetchData = () => {return new Promise((resolve) => {setTimeout(() => {resolve("success");}, 1000);}); }; export default {setup() {const test = ref("test");const route = useRoute();const router = useRouter();const count = ref(0);const effect = async (onInvalidate) => {console.log('监听route'+route.query);onInvalidate(() => {console.log("执行onInvalidate");});const res = await fetchData();console.log(res);test.value = res;};onBeforeMount(() => {console.log("onBeforeMount");});onMounted(() => {console.log("onmounted");});const unWachEffect = watchEffect(effect);useRoute();setTimeout(() => {console.log("5秒时间后注销WachEffect");unWachEffect();}, 5000);setInterval(() => count.value++, 1000);//每一秒count自加1,因为watchEffect带有该参数,所以改变时会自动触发const jump = () => {router.push(`?time=${new Date().getTime()}`);};return { count, jump, test };},beforeCreate() {console.log("beforeCreate");}, }; </script>
onInvalidate函数
的执行时机
(1). effect里的值改变时,会先于内部函数执行
(2). 侦听器被停止(组件unMounted也会关闭侦听器)
vue3之setup的使用理解相关推荐
- vue3中setup()函数的使用二
vue3的使用 <template><div id="one"><img src="http://127.0.0.1:9000/upload ...
- vue3中setup()函数的使用一
<template><div id="one"><img src="http://127.0.0.1:9000/upload/001.png ...
- vue3 script setup写法
公司代码扫描要求一个函数不能超过50行,那么一般vue3写法setup函数肯定超了,又懒得写到hooks,同事介绍了去年vue3出的新的语法糖,研究了下,写篇博客 简单的将,去掉了exprot def ...
- vue3使用setup代替created
vue2中的created可使用vue3中的setup()来代替. setup() :开始创建组件之前,在beforeCreate和created之前执行.创建的是data和method. 如果想要在 ...
- 便利贴--43{vue3+ts+setup+ArcoDesign 表格和表单 单页模板(整合)} --舍弃--不删--不更新
便利贴--43{vue3+ts+setup+ArcoDesign 表格和表单 单页模板(整合)} --舍弃--不删--不更新 前言 tableOnce.vue affuxFormModal.vue 前 ...
- Vue3在setup语法糖下的父子组件传值
文章目录 前言 一.前期准备 二.初始化项目 1.父组件传值给子组件 2.子组件传值给父组件 3.完整代码 总结 前言 vue版本大于>3.2 使用setup语法糖 一.前期准备 setup介绍 ...
- Vue3.0 setup的使用及作用
目录 开篇: 1.什么是setup 2.setup怎么使用 3.setup中包含的生命周期函数 3.setup相关参数 4.setup特性总结 总结 开篇: 从vue2升级 vue3,vue3是可以兼 ...
- vue3的setup的使用和原理解析
1.前言 最近在做vue3相关的项目,用到了组合式api,对于vue3的语法的改进也是大为赞赏,用起来十分方便.对于已经熟悉vue2写法的同学也说,上手还是需要一定的学习成本,有可能目前停留在会写会用 ...
- 剖析Vue3中setup()的用法(持续更新中)
一.setup的特性及作用 可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是不建议这样写. Vue3 的一大 ...
最新文章
- 《强化学习周刊》第35期:强化学习在智能交通中的最新应用
- ubuntu下,py2,py3共存,/usr/bin/python: No module named virtualenvwrapper错误解决方法
- 网络爬虫:采用“负载均衡”策略来优化网络爬虫
- Sublime Text 3 python和Package Control配置方法
- 端口复用(解决C/S模型的BUG)
- 省常中模拟 Test4
- ole db 错误 通讯链接失败_西门子PLC1200的S7通讯(同一项目下)--GET接收指令
- try catch finally的执行顺序到底是怎样的?
- sql 两表数据合并_多表查询SQL语句
- javascript基础修炼(13)——记一道有趣的JS脑洞练习题
- Python:int,float,str之间的转换
- 关于foreven与node.js的使用
- Transfrom在64bit服务下面无法运行
- Diamond软件的使用(6)--Lattice原语基本概念
- 实施白盒测试的几个误区
- c盘扩容提示簇被标记_电脑C盘爆满飘红?系统卡?试试这两种解决办法
- win7首次使用计算机,首次安装win7系统如何进行硬盘分区
- android脚本 附近的人,安卓引流脚本好用吗,附近的人引流脚本的功能你知道几个?...
- 捕鱼达人(unity实现)
- 鸿蒙系统推送表,【前沿】华为P40首发鸿蒙系统?| 附EMUI 10正式版推送时间表