前端vue3 setup使用教程
vue3 中新增了 setup，它的出现是为了解决组件内容庞大后，理解和维护组件变得困难的问题。即 vue 中 data、computed、methods、watch 等内容非常多以后，同一业务逻辑的 data 中的数据和 methods 中的方法在 vue 文件中“相隔甚远”，看代码时，经常需要根据 data 中的数据去搜索找到对应的 methods 方法，上下跳跃查看代码，非常不方便。而在 setup 中，则可以把 data 中的数据和 methods 方法写在相临的位置，方便查看和维护。
1、简单使用
先简单写一下看看效果
笔者这里使用新建的 vue3 项目，直接在 App.vue 上进行修改
<template>
<div>{{name}}</div>
</template>
<script>
export default {
setup() {
return {
name: "泪眼问花花不语，乱红飞过秋千去"
}
}
}
</script>原来写在 data 中的 name，在 setup 中需要 return 返回
运行效果
2、修改 setup 中的变量值
先看下面代码，再说在 setup 中如何修改
<template>
<div>
{{name}}
<button @click="change">修改</button>
</div>
</template>
<script>
export default {
setup() {
let name = "泪眼问花花不语，乱红飞过秋千去"
function change() {
name = "人生自是有情痴，此恨不关风与月"
}
return {
name,
change
}
}
}
</script>按照常规逻辑，修改 setup 中的 name，会自然地写出上面的代码
但是这段代码是不能完成 name 值的修改的，看运行效果
为什么 name 值没有改变呢？因为上面代码中 name 是非响应式的
如果想要修改 name 值，就需要把它改成响应式的，代码如下
<template>
<div>
{{name}}
<button @click="change">修改</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
let name = ref("泪眼问花花不语，乱红飞过秋千去")
function change() {
name.value = "人生自是有情痴，此恨不关风与月"
}
return {
name,
change
}
}
}
</script>使用 ref 对 name 进行包装
修改时使用 变量名.value 的语法
运行效果
除了使用 ref 外还可以使用 reactive ，二者都可以将原始数据类型转换成一个带有响应式特性的数据类型
ref 和 reactive 有什么区别，ref 一般处理基本类型；reactive 处理复杂的数据类型
reactive 使用代码
<template>
<div>
{{nameObj.name}}
<button @click="change">修改</button>
</div>
</template>
<script>
import {reactive} from 'vue'
export default {
setup() {
let nameObj = reactive({name: '今年花胜去年红。可惜明年花更好，知与谁同'})
function change() {
nameObj.name = "离愁渐远渐无穷，迢迢不断如春水"
}
return {
nameObj,
change
}
}
}
</script>运行效果
3、setup 形式下的父子组件通信
代码写成 setup 形式，如何实现父子组件通信，下面介绍
3.1、父传子
在 components 目录下新建 Article.vue 作为子组件
Article.vue 内容
<template>
<div>
{{msg}}
{{info}}
</div>
</template>
<script>
export default {
props:['msg'],
setup(props) {
console.log(props.msg)
return {
info:props.msg
}
}
}
</script>在 setup 方法内使用 props 来接收父组件传过来的数据
App.vue 为父组件
在 App.vue 中引入 Article.vue
<template>
<div>
<Article :msg="name"></Article>
</div>
</template>
<script>
import Article from '@/components/Article.vue'
export default {
components: {
Article
},
setup() {
return {
name: '渐行渐远渐无书，水阔鱼沉何处问'
}
}
}
</script>运行效果
3.2、子传父
3.2.1、子组件调用父组件方法
Article.vue 内容
<template>
<div>
{{msg}}
<button @click="sendToParent">子组件向父组件传递数据</button>
</div>
</template>
<script>
export default {
props:['msg'],
setup(props, content) {
console.log(props.msg)
function sendToParent() {
content.emit('change')
}
return {
sendToParent
}
}
}
</script>使用 setup 方法中 content 参数中的 emit
App.vue 内容
<template>
<div>
<Article :msg="name" @change="changeName"></Article>
</div>
</template>
<script>
import Article from '@/components/Article.vue'
export default {
components: {
Article
},
setup() {
function changeName() {
alert('父组件事件被调用')
}
return {
name: '渐行渐远渐无书，水阔鱼沉何处问',
changeName
}
}
}
</script>运行效果
3.2.2、子组件向父组件传递数据
子组件向父组件传递数据，父组件修改数据
Article.vue 内容
<template>
<div>
{{msg}}
<button @click="sendToParent">子组件向父组件传递数据</button>
</div>
</template>
<script>
export default {
props:['msg'],
setup(props, content) {
console.log(props.msg)
let newName = '群芳过后西湖好，狼籍残红。飞絮濛濛。垂柳阑干尽日风'
function sendToParent() {
content.emit('change', newName)
}
return {
sendToParent
}
}
}
</script>App.vue 内容
<template>
<div>
<Article :msg="name" @change="changeName"></Article>
</div>
</template>
<script>
import Article from '@/components/Article.vue'
import {ref} from 'vue'
export default {
components: {
Article
},
setup() {
let name = ref('渐行渐远渐无书，水阔鱼沉何处问')
function changeName(msg) {
name.value = msg
}
return {
name,
changeName
}
}
}
</script>App.vue 中的 name 要修改，所以使用 ref 包装
运行效果
4、setup 中使用生命周期函数
在 setup 里，生命周期钩子前面加上 “on” 来访问组件的生命周期钩子
setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们
setup 内部调用生命周期钩子
代码示例
<template>
<div></div>
</template>
<script>
import { onBeforeMount, onMounted } from "vue"
export default {
setup() {
onBeforeMount(()=>{
console.log('onBeforeMount')
})
onMounted(()=>{
console.log('mouted')
})
return {}
}
}
</script>运行效果
以上就是前端vue3架构setup使用教程的详细内容，更多关于vue3 setup教程的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了手写 Vue3 响应式系统(核心就一个数据结构),响应式就是被观察的数据变化的时候做一系列联动处理。就像一个社会热点事件，当它有消息更新的时候，各方媒体都会跟进做相关报道。这里社会热点事件就是被观察的目标2022-06-06
原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等类型的值，在 JavaScript 中，原始值是按值传递的，引用类型是按引用传递的，这意味着，如果一个函数接收了一个原始值作为参数，那么形参和实参之间是没有引用关系的，它们是完全独立的两个值2023-01-01
这篇文章主要介绍了Vue.js 应用性能优化分析以及解决方案，VueJS 是开发网站最受欢迎、最稳定的 JavaScript 框架，但与其他框架一样，如果您忽略它，性能就会受到影响，下面我们就一起来看看怎么才能让性能提升吧2021-12-12
这篇文章主要给大家介绍了关于VUE3安装element ui失败的原因以及解决的相关资料,很多朋友升级使用Vue3了,但在安装element ui失败出错了,这里给大家总结下,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了关于vuex状态刷新网页时数据被清空问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
v-model绑定的变量无论是对象还是数组都是绑定的value值,下面这篇文章主要给大家介绍了关于vue中v-model如何绑定多循环表达式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
Vue+ElementUI创建一个带有进度显示的文件下载和打包组件功能
如何使用 Vue 创建一个带有进度显示和打包功能的文件下载组件,我们探讨了如何导入必要的包,构建组件的基础结构,实现文件下载与进度显示,以及如何将文件打包为 ZIP 格式供用户下载2024-08-08
这篇文章主要介绍了Vue项目组件化工程开发实践方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-01-01
实现暗黑主题的方式有很多种,也有很多成型的框架可以直接使用,下面这篇文章主要给大家介绍了关于基于vue3&element-plus的暗黑模式的相关资料,需要的朋友可以参考下2022-12-12
Vue 实例在建立的时候会运行一系列的初始化操作，而在这些初始化操作里面，和数据绑定关联最大的是 initState。这篇文章主要介绍了vue数据初始化--initState,需要的朋友可以参考下2019-04-04
最新评论