ps：感谢评论区小伙伴提出的疑问：如果你的项目是在vue2.x的基础上，再安装Composition API 来开发的，那么， setup 函数，会在 beforeCreate 之后created 之前执行！如果你是直接通过vue add vue-next安装最新的 vue3.0.x beta,那么setup会在beforeCreate和created之前执行!
新钩子
除了2.x生命周期等效项之外，Composition API还提供了以下debug hooks：
onRenderTracked
onRenderTriggered
两个钩子都收到DebuggerEvent类似于onTrack和onTrigger观察者的选项：
export default { onRenderTriggered(e) { debugger // inspect which dependency is causing the component to re-render } }
依赖注入
provide和inject启用类似于2.x provide/inject选项的依赖项注入。两者都只能在setup()当前活动实例期间调用。
import { provide, inject } from '@vue/composition-api' const ThemeSymbol = Symbol() const Ancestor = { setup() { provide(ThemeSymbol, 'dark') } } const Descendent = { setup() { const theme = inject(ThemeSymbol, 'light' /* optional default value */) return { theme } } }
inject接受可选的默认值作为第二个参数。如果未提供默认值，并且在Provide上下文中找不到该属性，则inject返回undefined。
注入响应式数据
为了保持提供的值和注入的值之间的响应式，可以使用ref
// 在父组建中 const themeRef = ref('dark') provide(ThemeSymbol, themeRef) // 组件中 const theme = inject(ThemeSymbol, ref('light')) watchEffect(() => { console.log(`theme set to: ${theme.value}`) })
因为setup函数接收2个形参，第一个是initProps，即父组建传送过来的值！，第二个形参是一个上下文对象
setupContext，这个对象的主要属性有 ：
attrs: Object // 等同 vue 2.x中的 this.$attrs emit: ƒ () // 等同 this.$emit() isServer: false // 是否是服务端渲染 listeners: Object // 等同 vue2.x中的this.$listeners parent: VueComponent // 等同 vue2.x中的this.$parent refs: Object // 等同 vue2.x中的this.$refs root: Vue // 这个root是我们在main.js中，使用newVue()的时候，返回的全局唯一的实例对象，注意别和单文件组建中的this混淆了 slots: {} // 等同 vue2.x中的this.$slots ssrContext:{} // 服务端渲染相关
⚠️注意：在 setup() 函数中无法访问到 this的，不管这个this指的是全局的的vue对象(即：在main.js 中使用new生成的那个全局的vue实例对象)，还是指单文件组建的对象。
但是，如果我们想要访问当前组件的实例对象，那该怎么办呢？我们可以引入getCurrentInstance这个api,返回值就是当前组建的实例！
import { computed, getCurrentInstance } from "@vue/composition-api"; export default { name: "svg-icon", props: { iconClass: { type: String, required: true }, className: { type: String } }, setup(initProps,setupContext) { // ⚠️注意，如果是通过vue add vue-next添加的这个地方需要结构出ctx const ctx = getCurrentInstance(); const iconName = computed(() => { return `#icon-${initProps.iconClass}`; }); const svgClass = computed(() => { if (initProps.className) { return "svg-icon " + initProps.className; } else { return "svg-icon"; } }); return { iconName, svgClass }; } }; </script>
Ref自动展开（unwrap）
ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个被包装后的对象（RefImpl），这个对象上只有一个 .value 属性，如果我们在setup函数中，想要访问的对象的值，可以通过.value来获取，但是如果是在<template>模版中，直接访问即可，不需要.value！
import { ref } from '@vue/composition-api' setup() { const active = ref(""); const timeData = ref(36000000); console.log('输出===>',timeData.value) return { active, timeData } }
<template> <p>活动状态：{{active}}</p> <p>活动时间：{{timeData}}</p> </template>
⚠️注意：不要将Array放入ref中，数组索引属性无法进行自动展开，也不要使用 Array 直接存取 ref 对象: