Vue3.0 setup的使用及作用
目录
- 开篇:
- 1.什么是setup
- 2.setup怎么使用
- 3.setup中包含的生命周期函数
- 3.setup相关参数
- 4.setup特性总结
- 总结
开篇:
从vue2升级 vue3,vue3是可以兼容vue2。所以v3可以采用v2的选项式api,但是v2不能使用v3的组合式api,由于选项式api一个变量存在于多处,如果出现问题,就需要去涵盖多个函数。项目越大,排查的难度也就越大。
1.什么是setup
- setup用来写组合式api,从生命周期的角度,相当于取代了beforeCreate()
2.setup怎么使用
1.setup() / {} 内部的属性和方法,必须使用return暴露出来。将属性挂载到实例上,否则没有办法使用。
2.语法糖:写在script开始标签中,内部的属性和方法,无需return暴露;无法和选项式api混用
3. 钩子函数可以和setup并列存在, setup不能调用生命周期相关的函数。
生命周期相关函数可以调用setup相关的属性和方法,可以使用this或者嵌套存在。
3.setup中包含的生命周期函数
onBeforeMount——挂载开始前调用
onMounted——挂载后调用
onBeforeUpdate——当响应数据改变,且重新渲染前调用
onUpdated——重新渲染后调用
onBeforeUnmount——Vue实例销毁前调用
onUnmounted——实例销毁后调用
onActivated——当keep-alive组件被激活时调用
onDeactivated——当keep-alive组件取消激活时调用
onErrorCaptured——从子组件中捕获错误时调用
相关代码:
//选项式写法
<script>
export default{props: ['subtitle'],data: () => ({age: 30}),methods: {showMessage() {console.log('函数 HELLO'); }},// 组件实例话之前// 可以访问 props 的数据的// 不能访问组件的实例 this 中的数据源和函数等// 不能访问组件中的视图DOM元素beforeCreate() {console.log('----------------------------')console.log('beforeCreate 组件实例话之前')console.log(this.$props.subtitle)console.log('不能访问组件的实例 this 中的数据源和函数等');console.log('不能访问组件中的视图DOM元素');// console.log(this.age)// this.showMessage()// console.log(document.getElementById('title').innerHTML)},// 组件实例话之后// 可以访问组件中的数据,函数,自定义的属性等// 不能访问组件中的视图DOM元素created() {console.log('----------------------------')console.log('created 组件实例话之后')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log('不能访问组件中的视图DOM元素');// console.log(document.getElementById('title').innerHTML)},// 组件视图渲染之前// 可以访问组件中的数据,函数,自定义的属性等// 不能访问组件中的视图DOM元素beforeMount() {console.log('----------------------------')console.log('beforeMount 组件视图渲染之前')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log('不能访问组件中的视图DOM元素');// console.log(document.getElementById('title').innerHTML)},// 组件视图渲染之后// 可以访问组件中的数据,函数,自定义的属性等// 不能访问组件中的视图DOM元素mounted() {console.log('----------------------------')console.log('mounted 组件视图渲染之后')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(document.getElementById('title').innerHTML)},// 数据源发生改变,视图重新渲染前// 可以访问组件中的数据,函数,自定义的属性等// 可访问重新渲染的 DOM 元素之前的状态beforeUpdate() {console.log('----------------------------')console.log('beforeUpdate 数据源发生改变,视图重新渲染前')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(document.getElementById('title').innerHTML)},// 数据源发生改变,视图重新渲染后// 可以访问组件中的数据,函数,自定义的属性等// 可访问重新渲染的 DOM 元素之后的状态updated() {console.log('----------------------------')console.log('updated 数据源发生改变,视图重新渲染后')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(document.getElementById('title').innerHTML)},// 组件在卸载之前// 可以访问组件中的数据,函数,自定义的属性等// 可访组件视图的 DOM 元素beforeUnmount() {console.log('----------------------------')console.log('beforeUnmount 组件在卸载之前')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(document.getElementById('title').innerHTML)},// 组件已卸载// 可以访问组件中的数据,函数,自定义的属性等// 不可访组件视图的 DOM 元素unmounted(){console.log('----------------------------')console.log('unmounted 组件已卸载')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log('不能访问组件中的视图DOM元素');// console.log(document.getElementById('title').innerHTML)}
}
</script><template><h3 id="title"><i>年龄:{{ age }}</i></h3><button @click="(age = 70)">年龄改成 70</button><button @click="(age = 30)">年龄改成 30</button>
</template>
// 组合式写法
<script setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';let age = ref(30)function showMessage() {console.log('HELLO')
}// 组件视图渲染之前
// 能访问组件实例的东西(数据源、函数等)
// 但是不能访问组件视图中的 DOM 元素
onBeforeMount(() => {console.log('------------------------')console.log('onBeforeMount 组件视图渲染之前(生命周期钩子)')console.log(age.value)showMessage()console.log('不能访问组件视图中的 DOM 元素');// console.log(document.getElementById('title').innerHTML)
})// 组件视图渲染之后
// 能访问组件实例的东西(数据源、函数等)
// 可以访问组件视图中的 DOM 元素
onMounted(() => {console.log('------------------------')console.log('onMounted 组件视图渲染之后(生命周期钩子)')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
})// 数据源发生变化,组件视图重新渲染之前
// 能访问组件实例的东西(数据源、函数等)
// 能访问组件视图渲染之前的 DOM 元素
onBeforeUpdate(() => {console.log('------------------------')console.log('onBeforeUpdate 数据源发生变化,组件视图重新渲染之前(生命周期钩子)')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
})// 数据源发生变化,组件视图重新渲染之后
// 能访问组件实例的东西(数据源、函数等)
// 能访问组件视图渲染之后的 DOM 元素
onUpdated(() => {console.log('------------------------')console.log('onUpdated 数据源发生变化,组件视图重新渲染之后(生命周期钩子)')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
})// 组件卸载之前
// 能访问组件实例的东西(数据源、函数等)
// 能访问组件视图 DOM 元素
onBeforeUnmount(() => {console.log('------------------------')console.log('onBeforeUnmount 组件卸载之前(生命周期钩子)')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
}) // 组件卸载之后
// 能访问组件实例的东西(数据源、函数等)
// 不能访问组件视图 DOM 元素
onUnmounted(() => {console.log('------------------------')console.log('onUnmounted 组件卸载之后(生命周期钩子)')console.log(age.value)showMessage()console.log('不能访问组件视图中的 DOM 元素');// console.log(document.getElementById('title').innerHTML)
}) </script><template><h3 id="title"><i>年龄:{{ age }}</i></h3><button @click="(age = 70)">年龄改成 70</button><button @click="(age = 30)">年龄改成 30</button>
</template>
3.setup相关参数
- 使用setup时,她讲接受两个参数:props和context
- props:
1. 表示父组件给子组件传的数据;
2. props是响应式的,当数据发送改变时,自动更新
3. 因为props是响应式的,不能使用es6的解构,会消除响应式特性(使用toRefs) - context:
- context 上下文环境。其中包括了属性,插槽,自定义事件三部分
- attrs:是一个非响应式对象,只要接受no-props属性。经常用来传递一些样式/标签特有属性
- solts:是一个Proxy对象,其中slots.default()获取到一个数组。数组长度表示插槽的数量,
数组中的元素时插槽的内容。 - emit:因为setup没有this,所以使用emit开替换之前的this.$emit。用于子传父时,自定义事件的触发 示例:emit(“自定义事件名”,传递的值)
- props:
4.setup特性总结
1. 这个函数会在created之前执行
2. setup内部没有this,不能挂载相关的东西
3. setup内部的属性和方法,必须return暴露出来。(语法糖不需要)
4. setup内部的属性都不是响应式的
5. setup不能调用生命周期相关函数,但生命周期相关函数可以调用setup
总结
以上就是Vue3.0 setup的使用及作用。希望本篇文章能够帮助到你,不懂得可以评论区或者私信问我,我也会一 一解答。谢谢观看!
我的其他文章:https://blog.csdn.net/m0_60970928?type=blog
Vue3.0 setup的使用及作用相关推荐
- vue3.0中setup使用(两种用法)
这篇文章主要介绍了vue3.0中setup使用,本文通过两种用法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 一.setup函数的特性以及作用 可以确定的是 V ...
- vue3.0的写法以及setup的用法
vue3.0的写法 一.setup的特性 二.vue2.0与vue3.0用法的区别 三.setup用法 一.setup的特性 1.setup函数是处于生命周期函数beforeCreate 和 Crea ...
- 关于 vue3.0 实战项目 setup、 props、 reactive、ref
关于 vue3.0 实战项目中遇到的问题 介绍vue3.0的特性: 亿点小知识 1.diff算法的优化 增加了静态标记PatchFlag 2.按需编译,体积比Vue2.x更小(Tree shaking ...
- Vue3.0如何在setup中获取定义的全局方法
有些情况下我们需要定义全局方法 然而在vue3.0中我们定义全局方法需要在globalProperties上面定义大部分情况下还是可以定义在main.js中的 我们这里就以定义在main.js中为例 ...
- onmounted vue3_基于项目时间阐述vue3.0新型状态管理和逻辑复用方式
作者:Mingle 转发链接:https://mp.weixin.qq.com/s/iOq-eeyToDXJ6lvwnC12DQ 前言 背景:2019年2月6号,React 发布 「16.8.0」 版 ...
- vue3.0和vue2的区别
一.默认进行懒观察(lazy observation) 在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者.当数据很大时,这可能会在页面载入时造成明显的性能压力.3.x 版本,只会对「被用 ...
- Vue3.0笔记(B站天禹老师)
Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多.2600+次提交.30+个RFC.600+次PR.99位贡献者 g ...
- 【Vue系列】Vue3.0知识点汇总整理
目录 一.Vue3简介 1.Vue3带来了什么? 二.创建Vue3工程 1.使用vue-cli创建 2.使用vite创建 补充:分析Vue3的工程结构 三.常用Composition API 1.初识 ...
- TypeScript及TypeScript在vue3.0项目中的基本使用
一. TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持.它是JavaScript的一个超集,扩展了JavaScript的 语 ...
最新文章
- 万年历java课程设计报告_java万年历课程设计报告2010
- mysql int 默认值 为ull_mysql的 约束 数据库设计 数据库 存储 触发器 mysql 权限问题...
- 什么样的域名利于网站SEO优化?
- python2和python3中的range区别
- Java EE(五)
- 信贷风控知识问答库(持续更新)
- Redis的简单实践
- 全球及中国甲基丙烯酸烷基酯行业深度研究与未来投资潜力分析报告2022版
- 监督学习——通用线性模型
- puppet 安装mysql_Puppet安装dashboard
- Spring@Schedule定时任务源码解析
- 鸿蒙轻内核M核的故障管家:Fault异常处理
- 软件中打开其他软件的方式
- Nginx——配置负载均衡
- AI在中国,还没到抢切蛋糕的时候
- 一拖再拖忍无可忍,谷歌披露影响开发人员的 GitHub 高危0day漏洞
- jQuery Mobile中翻转拨动开关slider的data-*选项
- java 表格添加监听_关于Oracle用java实时监听oracle对表的DML操作【技术贴】
- oralce insert 时,出现的两个错误,以及解决方法
- ubuntu /dev/sda1 contains a file system error …… (initramfs)的问题