VUE3函数的声明和使用举例
更新时间：2023年07月03日 15:32:49 作者：前端不加班
这篇文章主要给大家介绍了关于VUE3函数的声明和使用的相关资料, Vue3是一种流行的JavaScript框架,它允许开发人员构建现代化的Web应用程序,需要的朋友可以参考下
在了解了响应式数据如何使用之后，接下来就要开始了解函数了。
在 Vue 2 ，函数通常是作为当前组件实例上的方法在 methods 里声明，然后再在 mounted 等生命周期里调用，或者是在模板里通过 Click 等行为触发，由于组件内部经常需要使用 this 获取组件实例，因此不能使用箭头函数。
export default {
data: () => {
return {
num: 0,
}
},
mounted: function () {
this.add()
},
methods: {
// 不可以使用 `add: () => this.num++`
add: function () {
this.num++
},
},
}在 Vue 3 则灵活了很多，可以使用普通函数、 Class 类、箭头函数、匿名函数等等进行声明，可以将其写在 setup 里直接使用，也可以抽离在独立的 .js / .ts 文件里再导入使用。
需要在组件创建时自动执行的函数，其执行时机需要遵循 Vue 3 的生命周期，需要在模板里通过 @click、@change 等行为触发，和变量一样，需要把函数名在 setup 里进行 return 出去。
下面是一个简单的例子，方便开发者更直观地了解：
<template>
<p>{{ msg }}</p>
<!-- 在这里点击执行 `return` 出来的方法 -->
<button @click="updateMsg">修改MSG</button>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
setup() {
const msg = ref<string>('Hello World!')
// 这个要暴露给模板使用，必须 `return` 才可以使用
function updateMsg() {
msg.value = 'Hi World!'
}
// 这个要在页面载入时执行，无需 `return` 出去
const init = () => {
console.log('init')
}
onMounted(() => {
init()
})
return {
msg,
changeMsg,
}
},
})
</script>总结
到此这篇关于VUE3函数的声明和使用的文章就介绍到这了,更多相关VUE3函数声明使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue中出现首屏白屏的六种解决方法,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下2025-02-02
本文将结合实例代码，介绍vue3+electron12+dll客户端配置,对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-06-06
这篇文章主要介绍了使用vant-uploader上传照片无法删除的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue 框架之键盘事件、健值修饰符、双向数据绑定问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
Lambda函数,也称为匿名函数,是Vue3中的一种函数类型,绑定匿名方法和绑定普通方法主要是写法上的区别,其他的区别并不是很大,本文主要介绍了Vue3中使用匿名函数的方法实现,感兴趣的可以了解一下2023-12-12
图文详解Element-UI中自定义修改el-table样式
elementUI提供的组件间距、样式都比较大,如果直接套用,在页面显示可能就会显得很大,就比如表格,表头、行宽如果不修改的话,遇到列较多的时候,会显得整个页面就不好看,下面这篇文章主要给大家介绍了关于Element-UI中自定义修改el-table样式的相关资料,需要的朋友可以参考下2022-08-08
我们最近的项目中需要使用谷歌机器人验证，所以就动手实现一下，本文就来详细的介绍一下vue Google Recaptcha验证，感兴趣的可以了解一下2021-08-08
众所周知keep-alive是Vue提供的一个抽象组件，主要是用来对组件进行缓存，从而做到节省性能，这篇文章主要给大家介绍了关于vue中keep-alive组件用法的相关资料,需要的朋友可以参考下2021-05-05
这篇文章主要介绍了vue中格式化element表格中的时间为指定格式,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了Vue页面路由参数的传递和获取方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2026-03-03
最新评论