Vue setup()函数的用法

Vue setup() 函数是一个新的组件选项，它是组件内部使用组合 API 的入口点。新的 setup 组件选项在创建组件之前执行，一旦 props 被解析，就充当合成 API 的入口点。对于组件的生命周期钩子，setup() 函数在 beforeCreate 钩子之前调用。

setup() 是一个接受 props 和 context 的函数，而且接受的 props 对象是响应式的，在组件外部传入新的 prop 值时，props 对象会更新，可以调用相应的方法监听该对象并对修改做出相应。

setup() 函数的用法如下。

<div id="app">
    <post-item :post-content="content"></post-item>
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
                data(){
                    return {
                        content: '月浅灯深，梦里云归何处寻。'
                    }
                }
    });
    vm.component('PostItem', {
                //声明props
                props: ['postContent'],
                setup(props){
                    Vue.watchEffect(() => {
                        console.log(props.postContent);
                    })
                },
                template: '<h3>{{ postContent }}</h3>'
            });
    //在指定的DOM元素上装载应用程序实例的根组件
    vm.mount('#app');
</script>

在 Chrome 浏览器中运行程序，效果如下图所示。


注意，由于在执行 setup() 函数时尚未创建组件实例，因此在 setup() 函数中没有 this。这意味着除了 props 之外，用户将无法访问组件中声明的任何属性——本地状态、计算属性或方法。