Overview
There are two ways to implement responsive monitoring of data in Vue3: ref and reactive
They are both different and connected.
ref()
ref data responsive listening. The ref function passes in a value as a parameter, generally passes in the basic data type, and returns a responsive Ref object based on the value. Once the value in the object is changed and accessed, it will be tracked. Just like the sample code after we rewritten, the modified value can be triggered to re-render the template and display the latest value
reactive()
reactive
reactive is a method provided in Vue3 to implement responsive data.
Responsive data in Vue2 is implemented through defineProperty, and in Vue3 is implemented through ES6 Proxy. For specific reference,.
reactive parameters must be objects (json / arr)
Essence: It is to wrap the incoming data into a Proxy object
If another object is passed to reactive (such as a Date object)
By default, modifying objects cannot implement data binding updates to the interface.
If updates are required, reassignment is required. (That is, it is not allowed to operate the data directly, and a new data needs to be placed instead of the original data)
Use basic type parameters in reactive
Basic types (numbers, strings, booleans) cannot be created as proxy objects in reactive, and listening cannot be implemented. Unable to implement responsiveness
<template>
<div>
<p>{{msg}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
let msg = reactive(0)
function c() {
(msg);
msg ++;
}
return {
msg,
c
};
}
}
</script>
Click on button and the result we expect is that the number changes from 0 to 1, but in fact, the numbers on the interface have not changed anything.
Check the console and its output is like this (I clicked 3 times)
A prompt appears
value cannot be made reactive: 0
The output value did change, but this change was not fed back to the interface, which means that two-way data binding was not implemented. Of course, if it is ref, it does not exist
Such a problem. And if we want to use reactive, we need to convert the parameters from primitive types to objects.
<template>
<div>
<p>{{}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
let msg = reactive({
num: 0
})
function c() {
(msg);
++;
}
return {
msg,
c
};
}
}
</script>
Replace the parameter with the object {num: 0}, and at this time, the button interface will change (I clicked 3 times).
Print message on console
It can be seen that msg was successfully created as a proxy object. It realizes the two-way data binding of the object by hijacking the object's get and set methods.
Deep changes in the object can also be detected (note the inner in the code below)
<template>
<div>
<p>{{}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
let msg = reactive({
num: {
inner: 0
}
})
function c() {
(msg);
++;
}
return {
msg,
c
};
}
}
</script>
Array changes are no problem.
<template>
<div>
<p>{{msg}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
let msg = reactive([1, 2, 3])
function c() {
(msg);
msg[0] += 1;
msg[1] = 5;
}
return {
msg,
c
};
}
}
</script>
Use the Date parameter in reactive
If the parameters are not arrays or objects, but slightly strange data types, such as Date, then the trouble is coming.
<template>
<div>
<p>{{msg}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
let msg = reactive(new Date())
function c() {
(msg);
(() + 1);
(msg);
}
return {
msg,
c
};
}
}
</script>
I first printed msg twice, and I can see that when I clicked button once, the data of msg has changed, but the interface has not changed. At the same time, we found that it is in the console
⾥, msg is not recognized as proxy.
Even if we put Date in the object, it's like this
<template>
<div>
<p>{{}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
let msg = reactive({
date: new Date()
});
function c() {
(msg);
(() + 1);
(msg);
}
return {
msg,
c
};
}
}
</script>
Still no effect.
Obviously, for this data type, we need to do special processing.
This special treatment is to reassign the value (rather than directly modifying the original value).
<template>
<div>
<p>{{}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
let msg = reactive({
date: new Date()
});
function c() {
(msg);
((() + 1));
= new Date();
(msg);
}
return {
msg,
c
};
}
}
</script>
I used the copy scheme to reassign the value, and the interface successfully changed (date + 1).
Change the value of the array in vue3
let arr = reactive([{id:1},{id:2}])
Not feasible: arr=[], arr = reactive([])
Feasible: (0,)
= 0
Reason: The former creates a new object, but the original object rendered by the page has not changed; the latter changes the original page object
Summarize
This is the end of this article about Vue3’s initial exploration of ref, reactive and changing array values. For more related contents of Vue3 ref, reactive and changing array values, please search for my previous articles or continue to browse the related articles below. I hope everyone will support me in the future!