I am curious that how Vue make it? And what technique it uses?
Vue uses proxy (provided by modern JavaScript) to implement its Reactivity System.
Take the below example to simulate how to update 'displayMessage' in template once there is a change from the 'inputText' of input box.
Ex:
const data = {
inputText: "",
displayMessage: "",
}
const handler = {
set(target, key, value) {
if (key == "inputText") {
// If inputText has been assigned a new value, copy that value to displayMessage
target.displayMessage = value
}
}
}
const proxy = new Proxy(data, handler)
// Simulate that if there is a change from input element
proxy.inputText = "Good Morning!"
// Log the value of displayMessage to see if it get changed or not
console.log("displayMessage", proxy.displayMessage);
We can watch all props in handler and setup some logic to update other properties (like computed in component).
Virtual DOM
Refer to this:
In short, touching DOM is expansive comparing with performing updates in JavaScript.
Therefore, in order to have the better performance, Vue will create and keep a Virtual DOM which is the JS version copy from the real DOM.
Once there is a change request, then Vue can change Virtual DOM quickly and compare the difference between the real DOM.
After that, Vue will only update some part of UI in real DOM if it is needed.
Template Refs
Below is the normal way we bind data to properties and update relating view.
Ex:
// index.html
<section id="app">
<input
type="text"
v-model="inputTextValue"
>
<button v-on:click="onUpdateBtnClicked">Update</button>
<p>{{ displayMessage }}</p>
</section>
// app.js
const app = Vue.createApp({
data() {
return {
inputTextValue: "",
displayMessage: "Hello World!",
};
},
methods: {
onUpdateBtnClicked() {
this.displayMessage = this.inputTextValue;
},
},
});
app.mount("#app");
Vue provided another way called 'Template Refs' to accees template directly.
Ex:
// index.html
<section id="app">
<input
type="text"
ref="inputText"
>
<button v-on:click="onUpdateBtnClicked">Update</button>
<p>{{ displayMessage }}</p>
</section>
// app.js
const app = Vue.createApp({
data() {
return {
inputTextValue: "",
displayMessage: "Hello World!",
};
},
methods: {
onUpdateBtnClicked() {
this.displayMessage = this.$refs.inputText.value;
},
},
});
app.mount("#app");
Vue Lifecycle
Vue provides Lifecyle Hooks to let us able to add some logic during different stages.
For example, your app need to fetch some data from web api during initial stage.
Or you might need to perform some general business logic for each update.
No comments:
Post a Comment