How to write this.$set in vue3?
In vue2, we often encounter problems such as the data view has been changed but not updated in real time.
Give an example
<el-input v-model="" placeholder="Please enter content"></el-input>
data() {
return{
input:{
text:'1'
}
}
}
mounted () {
= '2'; // The view layer has not changed}At this time, vue2 provides a method which is $set
this.$set(, 'text', '3');
The reason is that the data responsiveness in Vue2 is implemented using (), and it cannot deeply monitor the changes in data.
Vue3 uses ES6 proxy to responsively perform a data proxy. This is amazing, combined with Vue3's composition API.
- Reactivity API in Vue3:
- reactive
- readonly
- ref
- computed
- If you want to make an object responsive data, you can use reactive or ref
setup() {
const state = reactive({
input:{
text:"1"
}
});
return {
state // Export responsive array }
},
mounted() {
(state); // is a proxy = '2'; // View update}The concept of $set is abandoned in Vue3
This is the article about how to write this.$set in vue3? This is all about this article. For more related vue3 this.$set content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!