Vue3-拉开序幕的setup

Vue3 中的 setup 是一个新的配置项，值是一个函数。

export default {name: 'App',setup: function () {}
}
</script>

和 Vue2 中的 data 一样，我也可以将 setup 简写成为

export default {name: 'App',setup() {}
}

setup函数的使用

与 Vue2 不一样的是，setup 中包含了 data 数据，methods方法，computed计算属性，watch监听器等等一系列的属性，也就是说，在 Vue3 中，我们不会显式的把这些属性配置到 setup 中，而是直接将属性内部的数据或方法直接暴露在 setup 中

ps：本章所讲内容，不涉及响应式，也就是说在 setup 中定义的数据，不是响应式的，如何转为响应式数据，下一章节 ref 会讲到。但是 props 传递的数据是响应式的。

setup() {// 类似于data属性中的数据，不过不用显式的声明data，而是直接设置变量let name = 'al'let age = 18// 类似于methods属性中的方法function hello() {// 因为这是直接在 setup 函数中访问变量，直接访问就行，不用 thisalert(`我的名字是${name},我的年龄是${age}`) }}

setup 的参数

setup 函数接收两个参数，分别是 props 和 上下文 context

props 是响应式的数据，且在传入新的 props 时，会同步更新现有的 props。例如

export default {// 如果这里接收到的 props 改变了props: {title: String},// 那么这里的接使用的props也会同步改变setup(props) {console.log(props.title)}
}

同时需要注意的是，在使用props传递的数据时时，尽量采取 props.xxx的方式进行。

对于传递的 props尽量不要解构，因为解构得出的变量将会丢失响应式。如果确实需要解构，或者将 props中的某一项数据传递的同时保持响应式，可以采用 torefs 和 toref 来进行转化。

import { toRefs, toRef } from 'vue'export default {setup(props) {// 将 `props` 转为一个其中全是 ref 的对象，然后解构const { title } = toRefs(props)// `title` 是一个追踪着 `props.title` 的 refconsole.log(title.value)// 或者，将 `props` 的单个属性转为一个 refconst title = toRef(props, 'title')}
}

第二个参数则是上下文 context ，其中暴露了一些在setup 中可能会用到的值，例如：

export default {setup(props, context) {// 透传 Attributes（非响应式的对象，等价于 $attrs）console.log(context.attrs)// 插槽（非响应式的对象，等价于 $slots）console.log(context.slots)// 触发事件（函数，等价于 $emit）console.log(context.emit)// 暴露公共属性（函数）console.log(context.expose)}
}

这个 context 不是响应式的，可以直接解构，

export default {setup(props, { attrs, slots, emit, expose }) {...}
}

其中 attrs 和 slots 都是有状态的对象，会随着组件自身更新而更新，但是二者都不是响应式数据，所以在使用时，同样避免解构，而是尽量通过 attrs.x 或 slots.x 方式。如果想要基于 attrs 或 slots的改变来执行副作用，那么可以在 onBeforeUpdate 声明周期中编写逻辑。

emit则是用来触发函数，和 Vue2 中作用一致。

expose 的作用则是显式的限制向外暴露的属性。当父组件引用子组件时，只能访问到通过可 expose 暴露特定的方法。当 expose 不传递参数时，代表不暴露任何东西，当传递对象时，则有选择的暴露局部状态。

import { h, ref } from 'vue'export default {setup(props, { expose }) {const count = 0const increment = () => ++count.valueexpose({increment})return () => h('div', count.value)}
}

setup 的返回值

setup 存在两种返回值：

返回一个同步对象，对象中的属性、方法在模板中均可直接使用，例如

export default {name: 'App',setup() {// 类似于data属性中的数据，不过不用显式的声明data，而是直接设置变量let name = 'al'let age = 18// 类似于methods属性中的方法function hello() {alert(`我的名字是${name},我的年龄是${age}`) }return {name,age,hello}}
}

<template><h1>我是app组件</h1><p>姓名：{{ name }}</p><p>年龄：{{ age }}</p><button @click="hello()">个人信息</button>
</template>

返回一个渲染函数，可以自定义渲染内容（

<script>
import { h } from 'vue'
export default {name: 'App',setup() {// 类似于data属性中的数据，不过不用显式的声明data，而是直接设置变量let name = 'al'let age = 18// Vue2 中的 main.js 中，在使用 render 函数时，就使用了 h 这个方法，// 第一个参数是节点，第二个参数是渲染内容// 当使用 返回 render 函数之后，html 模板中的内容都会被忽略，只会执行 h 函数的渲染内容return () => h('div','我改名字了')}
}
</script>

ps：返回一个渲染函数将会阻止我们返回其他东西。对于组件内部来说，这样没有问题，但如果我们想通过模板引用将这个组件的方法暴露给父组件，那就有问题了。因为此时除了渲染函数之外，暴露不了别的数据和方法了，为了解决这一问题，Vue3采用了 expose 来暴露方法或属性，然后返回渲染函数

setup(props,{ expose }) {// 类似于data属性中的数据，不过不用显式的声明data，而是直接设置变量let name = 'al'let age = 18// 类似于methods属性中的方法function hello() {alert(`我的名字是${name},我的年龄是${age}`) }// 通过 expose 暴露方法或属性expose({name,hello})// Vue2 中的 main.js 中，在使用 render 函数时，就使用了 h 这个方法，// 第一个参数是节点，第二个参数是渲染内容// 当使用 返回 render 函数之后，html 模板中的内容都会被忽略，只会执行 h 函数的渲染内容return () => h('div','我改名字了')
}
}

注意事项

1、Vue2 和 Vue3 不要混用。Vue3 是向下兼容的，所以即使是在 Vue3 项目中，也可以使用 Vue2 的语法，但是也会带来一些问题。

兼容性：在 Vue3 项目中也可以使用 Vue2 的写法

<template><p>在Vue3中访问 Vue2 写法下的属性或方法</p><p>姓名：{{ newName }}</p><p>年龄：{{ newAge }}</p><button @click="getVue3Data">点击获取Vue2写法中的数据</button>
</template><script>
export default {name: 'App',data() {return {newName: '汤圆',newAge:1}},methods: { testVue2(){alert(`我的名字是${this.newName},我的年龄是${this.newAge}`)}},
}
</script>

2、Vue2 的配置项( data、methods、computed... )中可以访问 Vue3 中 setup 中的属性、方法

<button @click="testVue3">点击后再Vue2写法中获取Vue3写法中setup的数据</button><script>
export default {name: 'App',methods: { testVue3() {console.log(this.name);console.log(this.age);console.log(this.hello);}},setup() {// 类似于data属性中的数据，不过不用显式的声明data，而是直接设置变量let name = 'al'let age = 18// 类似于methods属性中的方法function hello() {alert(`我的名字是${name},我的年龄是${age}`) }return {name,age,hello}}
}
</script>

点击按钮之后，控制台上打印出了 Vue3 setup 中定义的变量和方法。

3、但是在 Vue3 中的setup 中调用 Vue2 声明的变量或方法时，会无法找到

setup() {// 类似于data属性中的数据，不过不用显式的声明data，而是直接设置变量let name = 'al'let age = 18// 类似于methods属性中的方法function hello() {alert(`我的名字是${name},我的年龄是${age}`) }function testVue4() {console.log(name);console.log(age);console.log(hello);// 因为这些属性或方法不是在 setup 内部定义的，而是按照Vue2 的配置语法定义的，所以按照Vue2的访问模式 通过 this.xxx 访问console.log(this.newName);console.log(this.newAge);console.log(this.testVue2);}return {name,age,hello,testVue4}
}

从这里可以看到，在 Vue3 的 setup 中访问 Vue2 中的方法或属性时，得到的是undefined，这是因为 setup() 自身并不含对组件实例的访问权，即在 setup() 中访问 this 会是 undefined。你可以在选项式 API 中访问组合式 API 暴露的值(在 Vue2 中访问 Vue3的属性或方法)，但反过来则不行。

但是但是这里其实还存在一个问题，如果我直接在 setup 中访问 this，得到的是undefined，但是如果我是在 setup 中定义的函数中访问 this，得到的是一个 Proxy 代理对象

setup() {console.log(this, 'this111');function testVue4() {console.log(this,'this');console.log(this.newName);console.log(this.newAge);console.log(this.testVue2);}return {testVue4}
}

首先说直接在 setup 中访问 this，问什么会是undefined？这是因为setup函数执行时，不依赖于Vue实例，换句话说就是 setup 函数在Vue实例化之前就执行了，所以无法直接访问到this。

然后再说为什么setup 中的方法作为组件模板内容使用时(例如作为事件处理函数被调用时)，那么Vue会将这个方法绑定到Vue实例上。当该函数被调用时，this指向的就是Vue组件实例。

也就是说 Vue3中无法在 setup 内部直接访问到 this，但是通过 return 出去的函数或者绑定到模板的数据时可以访问到this。

4、如果 Vue2 和 Vue3 混用时，数据或方法出现重名情况，以 setup 中的数据优先

<template><p>{{ name }}</p><button @click="hello">点击查看</button>
</template><script>
export default {name: "App",data() {return {name: "aha",};},methods: {hello() {alert(`我的名字是${this.name}`);},},setup() {let name = "al";// 类似于methods属性中的方法function hello() {alert(`我的名字是${name}`) }return {// eslint-disable-next-line vue/no-dupe-keyshello,// eslint-disable-next-line vue/no-dupe-keysname,};},
};
</script>

5、setup() 应该同步地返回一个对象。唯一可以使用 async setup() 的情况是，该组件是 Suspense 组件的后裔。

具体理解就是 setup 在一般情况下，不能使用 async 包裹，因为被 async 包裹之后，即使你返回的还是原来的对象，但是 async 会对象外部包裹一层 Promise，如果想要拿取数据的话，还需要通过.then() 来获取，模板中时无法直接看到并且使用 return 对象中的属性或方法的。而 Vue 是不会自动帮你做这件事的。

但是也存在一直特殊情况，那就是该组件是 Suspense 组件的后裔( 这个后在讲，我现在也没研究到这里来 )。

总结

1、Vue2 和 Vue3 的配置尽量不要混用

2、如果混用了，

Vue2 中的配置 (例如：data、methods、compute、watch等)可以访问到 setup 中的属性和方法
Vue3 中的setup 不能访问到 Vue2 中的配置项
存在重名情况，以 Vue3 setup 中优先

3、setup 一般不用 async，因为 setup 需要同步的返回一个对象，以此来保证模板中数据或方法正常绑定，如果用了 async 那么返回的数据对象会被 Promise 包裹，模板中无法看到对象中的属性，无法绑定。但是当该组件是 Suspense 组件的后裔时，可以使用 async setup()