vue3 setup使用

setup函数是 Composition APIvue2中在一个组件中会有datamethodscomputed等多个属性当组件越来越大则会增加复杂度以及维护难度，setup则是将这些内容全部合并在实例初始化之前create之前组合api两个参数propscontext需要使用的值或函数，必须return出去setup中不能写this ，因为是在create实例之前还未创建，所以拿不到实例se

前端-小鑫

1211人浏览 · 2021-07-27 14:15:36

前端-小鑫 · 2021-07-27 14:15:36 发布

setup函数是 Composition API
vue2中在一个组件中会有data methods computed等多个属性当组件越来越大则会增加复杂度以及维护难度， setup 则是将这些内容全部合并
执行时间在beforecreate与create之间
两个参数 props（父组件传递的值） context （attrs, slots, emit）
需要使用的值或函数，必须return出去
setup中不能写this ，因为是在create实例之前还未创建，所以拿不到实例setup函数中，不能调用外部的函数，例如methods mounted 等
methds 可以调用setup里面的函数
默认定义的变量，页面引用后修改将不会自动重新渲染需要借助 ref /reactive

例子如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        setup(props, context) {
            console.log(this)
            return {
                content: 'aa',
                handClick: () => {
                    alert(2)
                }
            }
        },
        mounted() {
            // this.test()
            this.$options.setup().handClick() //调用setup中的函数
        },
        methods: {
            test() {
                console.log(this.$options)
            }
        },
        template: '<div @click=handClick()>{{content}}</div>'
    }).mount('#root')
</script>

</html>

context 相关参数 attrs, slots, emit

attrs 父组件键传过来的值 None-props，不用props接收则会在这里显示，如果被props接收则不会显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    let app = Vue.createApp({
        template: '<child value="aa" >虚拟</child>',
    })
    app.component('child', {
        template: '<div>child</div>',
        // props: ['value'], //原本获取父组件的值
        setup(props, context) {
            const { attrs, slots, emit } = context
            console.log(attrs.value) 
            return { handleClick }
        },
    })
    app.mount('#root')
</script>
</html>

slots

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    let app = Vue.createApp({
        template: '<child>虚拟</child>',
    })
    app.component('child', {
        template: '<div></div>',
         mounted() {
            //原本方法获取slots
            console.log(this.$slots)
        },
        setup(props, context) {
            const { h } = Vue
            const { slots } = context
           return () => h('div', {}, slots.default())
        },
    })
    app.mount('#root')
</script>
</html>

emit

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    let app = Vue.createApp({
        template: '<child value="aa" @change=handleChange>虚拟</child>',
        methods: {
            handleChange() {
                alert(2)
            }
        }
    })
    app.component('child', {
        template: '<div @click=handleClick>child</div>',
        mounted() {
            //原本方法获取父组件方法
            this.$emit('change')
        },
        setup(props, context) {
            const { emit } = context
            function handleClick() {
                emit('change')
            }
            return { handleClick }
        },
    })
    app.mount('#root')
</script>
</html>