Vue3 setup快速使用体验

作者：温新

时间：2021-08-21

hi，我是温新，一名PHPer

• 1、setup函数在beforeCreate和Created之前执行；
• 2、执行setup时，组件实例没有被创建，因此无法在setup内部使用this；
• 3、setup 选项是一个接收 props 和 context 的函数；
• 4、与模板组合数据使用时，必须return一个对象将数据暴露给外部使用；

<div id="app">
    <button @click="testClick">{{ webName }}</button>
</div>

<script>
        const app = Vue.createApp({
            setup(props, context) {
                // return 一个对象
                return {
                    webName: '自如初',
                    testClick: () => {
                        alert('方法在setup中')
                    }
                }
            }
        });

app.mount('#app');
</script>

我是温新

每天进步一点，就一点点