Vue3.0 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：
    1. context 上下文环境。其中包括了属性，插槽，自定义事件三部分
    2. attrs：是一个非响应式对象，只要接受no-props属性。经常用来传递一些样式/标签特有属性
    3. solts：是一个Proxy对象，其中slots.default()获取到一个数组。数组长度表示插槽的数量，
       数组中的元素时插槽的内容。
    4. emit：因为setup没有this，所以使用emit开替换之前的this.$emit。用于子传父时，自定义事件的触发 示例：emit(“自定义事件名”，传递的值)

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