Vue3 monitors data changes and composition Api
Data monitoring in Vue2
In Vue2, you can use the watch option or the $watch method to monitor data changes.
watch options
In the component options of Vue2, there is a watch option to monitor data changes. The specific syntax is as follows:
export default {
data() {
return {
count: 0
}
},
watch: {
count(newValue, oldValue) {
console.log(`count值从${
oldValue}变为${
newValue}`)
}
}
}
In the above code, we define a watch option in the component options to monitor the change of count. When the value of count changes, the callback function will be executed, and the value before and after the change will be passed as parameters to the callback function.
$watch method
In Vue2, you can also use the $watch method to monitor data changes. The specific syntax is as follows:
export default {
data() {
return {
count: 0
}
},
mounted() {
this.$watch('count', (newValue, oldValue) => {
console.log(`count值从${
oldValue}变为${
newValue}`)
})
}
}
In the above code, we use the $watch method in the mounted hook function of the component to monitor the change of count. When the value of count changes, the callback function will be executed, and the value before and after the change will be passed as parameters to the callback function.
Data monitoring in Vue3
In Vue3, you can use the watch function to monitor data changes.
watch function
In Vue3, you can use the watch function to monitor data changes. The specific syntax is as follows:
import {
watch, ref } from 'vue'
export default {
setup() {
const count = ref(0)
watch(count, (newValue, oldValue) => {
console.log(`count值从${
oldValue}变为${
newValue}`)
})
return {
count
}
}
}
In the above code, we use the watch function to monitor the change of count. When the value of count changes, the callback function will be executed, and the value before and after the change will be passed as parameters to the callback function.
Why watch is just an accessory of Proxy
In Vue3, when using watch to monitor data changes, a responsive object is automatically created, and Proxy is used to monitor the changes of the object. In fact, the responsive system in Vue3 is implemented based on Proxy, and the watch function is just an accessory of the responsive system, which is used to monitor data changes and execute corresponding callback functions, which can be understood as the encapsulation of Proxy.
Different from the data monitoring method in Vue2, the watch function in Vue3 can monitor changes in any responsive data, including responsive objects, responsive arrays, computed properties, etc. This makes the data monitoring in Vue3 more flexible and convenient, and you can choose different monitoring methods according to the actual situation.
In general, the data monitoring method in Vue3 is more flexible and convenient. The watch function can be used to monitor any change of responsive data and execute the corresponding callback function. The watch function is just an accessory of the Vue3 responsive system, which is used to encapsulate the function of Proxy, making data monitoring more convenient and efficient.
Options API 和 Composition API
Options API is the API style used in Vue2 . It is an option-based API, that is, we define some options in the Vue instance, such as data, methods, computed, watch, etc. The advantage of the Options API is that it is easy to understand and use, but when the component logic becomes complex, the code structure will become confusing and difficult to maintain.
Composition API is a new API style in Vue3 . It is a function-based API, that is, we can split the logic of the component into multiple functions, each function only focuses on specific functions, and then combine these functions into a component. The advantage of the Composition API is that it can better organize the code, it is easy to reuse and test, and it can better support TypeScript.
Composition API provides some commonly used functions, such as reactive, ref, computed, watchEffect, etc., which can help us manage the state and behavior of components more conveniently.
The following are some commonly used Composition API functions:
reactive: convert an ordinary object into a reactive object
ref: convert a normal variable into a reactive variable
computed: Create a computed property
watchEffect: create a reactive side effect
watch: create a responsive listener
onMounted: the function executed when the component is mounted
onUpdated: function executed when the component is updated
onUnmounted: the function executed when the component is unmounted
In short, the Composition API is an important feature in Vue3, which can help us better organize the code and improve the readability and maintainability of the code.
⭐⭐Taking reactivefunctions as an example, its syntax is as follows:
import {
reactive } from 'vue'
const state = reactive({
count: 0
})
This function takes a plain JavaScript object as a parameter and returns a reactive object. We can state.countget or set its value by accessing the property. When the value of the property changes, the related components will be updated automatically.
⭐⭐ Another commonly used function is refthat its syntax is as follows:
import {
ref } from 'vue'
const count = ref(0)
This function takes a plain JavaScript value as an argument and returns a reactive variable. We can get or set its value by accessing the count.value property. When the value of the variable changes, the related components will be automatically updated.
Let’s briefly list two examples. For other usages, please refer to the official documentation, Portal: Official Documentation