Vue3.0 setup的使用及作用

程序员--韩同学

已于 2023-02-09 15:25:10 修改

阅读量2.1k

点赞数 3

分类专栏： vue3.0 文章标签： javascript 前端 vue.js

于 2023-02-09 10:01:51 首次发布

本文链接：https://blog.csdn.net/m0_60970928/article/details/128947107

版权

本文介绍了Vue3.0中的setup函数，作为组合式API的入口，它取代了beforeCreate生命周期。内容包括setup的使用方法、包含的生命周期函数如onBeforeMount等，以及setup的参数props和context的详细解释。setup特性总结提到其在created之前执行，内部无this，返回的属性和方法才暴露，并不能直接调用生命周期函数。

摘要由CSDN通过智能技术生成

开篇：

从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() {