Ref, Reactive reference usage and principle
Principle: Encapsulate data through proxy. When data changes, the template and other contents are triggered to update.
Function: Make non-responsive data into responsive;
Dynamically change the properties defined in Setup
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>hello vue</title>
<! Vue library -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// We imagine that after 2s, the value of name used here will become "big brother Liu Bei".
template: `
name: {{name}}
`.setup(props, context){
// Define a variable name
let name = "zibo";
// change the content after 2s
setTimeout(() = > {
name = "Brother Liu Bei";
}, 2000);
return{
name
}
}
});
const vm = app.mount('#root');
</script>
</html>
Copy the codeThe results
Using ref changes the primitive data type to reactive
Ref (xx) — >reactive({value: xx})
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>hello vue</title>
<! Vue library -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// We imagine that after 2s, the value of name used here will become "big brother Liu Bei".
// Time: 18:18:16, June 15, 2021
// In theory you should use name.value, but vue does it for you by default
template: `
name: {{name}}
`.setup(props, context){
// import ref from vue
const { ref } = Vue;
// Define a variable name
// proxy, ref will change "zibo" to a responsive reference like proxy({value: 'zibo'})
let name = ref("zibo");
// change the content after 2s
setTimeout(() = > {
name.value = "Brother Liu Bei";
}, 2000);
return{
name
}
}
});
const vm = app.mount('#root');
</script>
</html>
Copy the codeThe results
In fact, a REF can also handle data of non-basic types
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>hello vue</title>
<! Vue library -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// Vue will automatically replace person with person.value
// When you understand the principle, it is not difficult to do something about it, but since you have Reactive, you usually use reactive
template: `
name: {{person.name}} age: {{person.age}}
`.setup(props, context){
// import ref from vue
const { ref } = Vue;
// Define a variable name
// proxy, ref changes "{name: 'zibo', age: 25}" to a reactive reference like proxy({value: {name: 'zibo', age: 25}})
let person = ref({name: 'zibo'.age: 25});
// change the content after 2s
setTimeout(() = > {
person.value.name = "Brother Liu Bei";
person.value.age = 42;
}, 2000);
return{
person
}
}
});
const vm = app.mount('#root');
</script>
</html>
Copy the codeThe results
Use Reactive to make non-basic data types reactive
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>hello vue</title>
<! Vue library -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// We imagine that after 2s, the value of name used here will become "big brother Liu Bei".
template: `
name: {{nameObj.name}}
`.setup(props, context){
// Add Reactive from vue
const { reactive } = Vue;
// Define a variable nameObj object
let nameObj = reactive({name: 'zibo'});
// change the content after 2s
setTimeout(() = > {
nameObj.name = "Brother Liu Bei";
}, 2000);
return{
nameObj
}
}
});
const vm = app.mount('#root');
</script>
</html>
Copy the codeThe results
summary
Replace data with ref and Reactive;
Readonly Makes the defined property read-only
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>hello vue</title>
<! Vue library -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// We imagine that after 2s, the value of name used here will become "big brother Liu Bei".
template: `
name: {{nameObj.name}}
`.setup(props, context){
// Add Reactive from vue
const { reactive, readonly } = Vue;
// Define a variable nameObj object
let nameObj = reactive({name: 'zibo'});
let nameObjReadOnly = readonly(nameObj);
// change the content after 2s
setTimeout(() = > {
nameObj.name = "Brother Liu Bei";
nameObjReadOnly.name = "Brother Liu Bei";
}, 2000);
return{
nameObj
}
}
});
const vm = app.mount('#root');
</script>
</html>
Copy the codeThe results
Deconstructing an object’s properties is not reactive
Objects are responsive, but properties that are deconstructed from objects are not
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>hello vue</title>
<! Vue library -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// We imagine that after 2s, the value of name used here will become "big brother Liu Bei".
template: `
name: {{name}}
`.setup(props, context){
// Add Reactive from vue
const { reactive } = Vue;
// Define a variable nameObj object
let nameObj = reactive({name: 'zibo'});
// change the content after 2s
setTimeout(() = > {
nameObj.name = "Brother Liu Bei";
}, 2000);
const { name } = nameObj;
return{
name
}
}
});
const vm = app.mount('#root');
</script>
</html>
Copy the codeThe results
ToRefs makes the properties of deconstructed objects responsive as well
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>hello vue</title>
<! Vue library -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// We imagine that after 2s, the value of name used here will become "big brother Liu Bei".
template: `
name: {{name}}
`.setup(props, context){
// Add Reactive from vue
const { reactive, toRefs } = Vue;
// Define a variable nameObj object
let nameObj = reactive({name: 'zibo'});
// change the content after 2s
setTimeout(() = > {
nameObj.name = "Brother Liu Bei";
}, 2000);
// A single attribute
// toRefs makes proxy({name: 'zibo'}) become proxy(name: proxy({value: 'zibo'}))
// Multiple attributes
// toRefs makes proxy({name: 'zibo', age: 25}) become
/ / {
// proxy(name: proxy({value: 'zibo'})),
// proxy(age: proxy({value: 25})),
// }
const { name } = toRefs(nameObj);
return{
name
}
}
});
const vm = app.mount('#root');
</script>
</html>
Copy the code