If you have a small partner who wants to experience the new version from scratch, you can use this method to install it. Since our project relies on third-party libraries, if you install it globally, the third-party UI library of the entire project cannot run! So we still choose to install `@vue/composition-api` to experience, so as to slowly transition to the latest version of vue3## Vue 3.0 Composition-API Basic Features Experience ### setup function The `setup()` function is a new attribute specially provided for components in vue3, which is equivalent to the `created` function in the 2.x version. The component logic options of the previous version are now handled in this function. It provides a unified entry point for us to use the new features of vue3 `Composition API`. The **setup** function will be executed after **beforeCreate** and before **created** relative to 2.x ! For details, please refer to the following: | vue2.x | vue3 | | :--------------: | :-------------: | | ~~beforeCreate~~ | setup(replace) | | ~~created~~ | setup(replace) | | beforeMount | onBeforeMount | | mounted | onMounted | | beforeUpdate | onBeforeUpdate | | updated | onUpdated | | beforeDestroy | onBeforeUnmount | | destroyed | onUnmounted | | errorCaptured | onErrorCaptured | ### New hook In addition to the 2.x life cycle equivalent, the Composition API also provides the following debugging hooks: -`onRenderTracked` -`onRenderTriggered` Both hooks received the options of `DebuggerEvent` and `onTrack` and `onTrigger` observers: ```javascript export default { onRenderTriggered(e){ Debugger //Check which dependency caused the component to re-render } } ``` ### Dependency Injection `provider` and `inject` enable dependency injection similar to the 2.x `provide/inject` option. Both can only be called during the current active instance of `setup()`. ```javascript 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` accepts an optional default value as the second parameter. If no default value is provided, and the property cannot be found in the Provide context, then `inject` returns `undefined`. **Inject responsive data** In order to maintain the responsiveness between the provided value and the injected value, you can use `ref` ```javascript // in the parent component const themeRef = ref('dark') provide(ThemeSymbol, themeRef) // in the component const theme = inject(ThemeSymbol, ref('light')) watchEffect(() => { console.log(`theme set to: ${theme.value}`) }) ``` 1. Because the `setup` function receives 2 formal parameters, the first is `initProps`, which is the value passed by the parent component! , The second parameter is a **context object** `setupContext`, the main attributes of this object are: ```javascript attrs: Object // equivalent to this.$attrs in vue 2.x emit: ƒ () // equivalent to this.$emit() isServer: false // Is it server-side rendering listeners: Object // equivalent to this.$listeners in vue2.x parent: VueComponent // equivalent to this.$parent in vue2.x refs: Object // equivalent to this.$refs in vue2.x root: Vue // This root is the globally unique instance object returned when we use newVue() in main.js. Be careful not to confuse this with this in the single file assembly slots: {} // equivalent to this.$slots in vue2.x ssrContext:{} // server-side rendering related ``` ⚠️**Note**: The `this` cannot be accessed in the `setup()` function, regardless of whether this `this` refers to the global vue object (ie: the global generated by using new in main.js The vue instance object), still refers to the object of the single file component. But what if we want to access the instance object of the current component? We can introduce the api of `getCurrentInstance`, and the return value is the instance of the current component! ```javascript import { computed, getCurrentInstance } from "@vue/composition-api"; export default { name: "svg-icon", props: { iconClass: { type: String, required: true }, className: { type: String } }, setup(initProps,setupContext) { 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 }; } }; ``` ### Ref automatically expand (unwrap) The `ref()` function is used to create a **reactive** **data object** according to the given value. The return value of the `ref()` function call is a wrapped object (RefImpl), There is only one `.value` property on this object. If we want to access the value of the object in the `setup` function, we can get it through `.value`, but if it is in the ``** template **, just visit directly, no need for `.value`! ```javascript import {ref} from'@vue/composition-api' setup() { const active = ref(""); const timeData = ref(36000000); console.log('output ===>',timeData.value) return { active, timeData } } ``` ```html
Activity status: {{active}}
Activity time: {{timeData}}
``` ⚠️Note: Do not put `Array` in `ref`, the array index property cannot be expanded automatically, and **do not use `Array` to directly access the `ref` object: ```javascript const state = reactive({ list: [ref(0)], }); // will not be expanded automatically, you must use `.value` state.list[0].value === 0; // true state.list.push(ref(1)); // will not be expanded automatically, you must use `.value` state.list[1].value === 1; // true ``` When we need to manipulate the DOM, such as when we use `swiper` in a project to get the DOM, then we can still do this 👇! ```javascript