In recent years, the company has been using Vue2.6 for development, using the Mixin method for logic reuse, but with the increase in project size, it has brought some problems, especially: data confusion: the data attributes on the instance change from It cannot be found in the current template file, and the problem will become more difficult to track when there are multiple Mixins; at the same time, the same attribute name may appear in multiple Mixins, resulting in conflicts.
Recently, Vue2.7 has been upgraded in the project. For the upgrade method, you can refer to the official document: Migrate to Vue 2.7
Our principle is: Existing business modules still maintain the Options Api method; all new additions are switched to Composition Api. Based on this principle, the whole migration process is relatively smooth in my opinion.
Recently, Composition Api has also been used to complete the development of some modules. I would like to summarize the differences with the original Options Api and the strengths of Composition Api.
Composition API: Vue 2.7 version introduces a new feature, which is a new way to organize and reuse Vue component logic, and introduces some powerful functions to make the logic of components more clear, flexible and reusable.
This article will dive into some of the key features and benefits of the Vue 2.7 Composition API.
What is Composition API
Composition API is a new component logic reuse method introduced in Vue 2.7. It's very different from Vue's previous Options API.
- Options API: In an object-based way, various options of components, such as data, methods, computed, etc., are organized in one object;
export default {
data () {
},
computed: {
},
methods: {
}
}
- Composition API: Allows us to split the logic of a component into smaller, reusable parts called composition functions.
export default {
setup() {
}
}
or
<script setup></script>
Advantages of the Composition API
In the actual development process, the use of Composition API has brought some significant advantages, making the components more flexible and clear, and the reusability has also been significantly improved.
1. More flexible component logic reuse
The Composition API allows the logic of a component to be split into smaller, reusable composition functions. This allows for more flexible composition and reuse of component logic, rather than just being organized by a component's options. Multiple composition functions can be combined to form more complex logic, thereby achieving a higher degree of component reuse.
<script setup>
import {
ref } from 'vue'
import {
useIdssDialogStartWatchForm, useIdssDialogCloseConfirm } from '@/compositions/closeConfirm.js'
const form = ref({
})
watch(() => props.visible, (val) => {
// 监听form值是否发生变化
val && useIdssDialogStartWatchForm(form)
})
function beforeClose (done) {
// 如form值发生变化，关闭前给出提示
useIdssDialogCloseConfirm(done, $idssFormChange)
}
</script>
Convenience: Similar to pure functions, the entire encapsulation granularity can be smaller, and the reuse scenarios are larger (detached this)
2. More powerful responsiveness
Composition API introduces refand reactiveother new responsive APIs, which can manage the state of components more conveniently.
ref: Used to create a responsive variable that can be used in templatesreactive: You can convert an ordinary JavaScript object into a responsive object
<template>
<div>{
{count}}</div>
</template>
<script setup>
const count = ref(0)
function add () {
count.value++
}
</script>
Convenience: The state of components can be managed more intuitively, and there is no need to use dataoptions
3. Clearer component logic
By using the Composition API, different logic of a component can be split into independent composition functions, so that the logic of the component is clearer and easier to understand. Each composition function can focus on solving a specific problem, making the logic of the component more modular and maintainable.
// closeConfirm.js
export function useIdssDialogStartWatchForm(variableName) {
}
export function useIdssDialogCloseConfirm(done = function () {
}, $idssFormChange) {
}
Convenience: It can be classified and managed in a way similar to tool functions, and can be directly imported when needed
4. Better type checking and editor support
Since the Composition API is a function-based way to organize component logic, this means better type checking and editor support when writing code. The editor can better recognize the parameters and return values of the composition function, and provide relevant code hints and auto-completion, which can improve development efficiency and reduce errors.
Convenience: Typescript is not enabled in our project, but the convenience brought by the function method can already be reflected through the corresponding function support of the editor.
5. Better performance
The Composition API outperforms the Options API in some performance metrics. Since the Composition API uses a more efficient reactive system, it can better handle large-scale component state updates.
At the same time, in order to maximize performance, it also provides related methods of shallow (not recursively converted into responsive) shallowRef()and shallowReactive()etc.
const state = shallowReactive({
foo: 1,
nested: {
bar: 2
}
})
// 更改状态自身的属性是响应式的
state.foo++
// ...但下层嵌套对象不会被转为响应式
isReactive(state.nested) // false
// 不是响应式的
state.nested.bar++
Convenience: For different scenarios, different methods are used in a more targeted manner, which improves the page rendering speed.