Vue3 -- setup函数

setup函数

• setup是组件内使用CompositionAPI的入口；
• setup在created实例被完全初始化之前执行，所以在setup中不使用this；
• setup返回值的数据（方法）模板可以直接使用；
• setup有两个参数，props 和 context
• setup数据不具备响应式

代码演示

模板使用setup数据

定义setup函数，并返回对象{name:‘张三’}.

			setup(){
                return{
                    name:'张三'
                }
            }

在模板中直接使用name

			template:`
            <div>
                {
  {name}}
            </div>`

页面效果：

模板使用setup方法

在模板绑定点击事件，使用setup返回的handleClick方法。

 			setup(){
                return{
                    name:'张三',
                    handleClick(){
                        console.log('法外狂徒');
                    }
                }
            }

触发点击事件后控制台：

尝试在setup中使用this

首先在methods中定义test方法。

 			methods:{
                test(){
                    console.log("test");
                }
            },

在setup中调用test方法。

			setup(){
                this.test();
                return{
                    name:'张三',
                    handleClick(){
                        console.log('法外狂徒');
                    }
                }
            }

控制台并没有按照预期打印出test，而是报错说this.test不是函数。

这是因为setup是在created实例被完全初始化之前就执行的函数，在setup执行时methods还没有挂载到this上，所以在setup中不使用this。

setup里不能执行methods里的代码，那methods里可不可以执行setup里的代码呢？

methods调用setup

在methods里调用setup函数。

 			methods:{
                test(){
                    console.log(this.$options.setup());
                }
            },
            mounted(){
                this.test();
            },

控制台输出符合预期，methods里可以调用setup

setup参数

setup有两个参数，props 和 context。props是组件接收的参数，context里面有三个属性分别是attrs、slot和emit。

attrs 指的是 Non-props属性；

		const app = Vue.createApp({
            template:`
            <div><demo app