Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use $forceUpdate () in Vue". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use $forceUpdate () in Vue.

Use of $forceUpdate ()

It is noted in the Vue official documentation that $forceUpdate has the effect of forcing refreshes.

In the vue framework, if there is a variable in data: age, modify it, and the page will be updated automatically.

But if the variable in data is an array or object, we directly add properties to an object or array, which is not recognized by the page.

{{userInfo.name}}

Modify userInfo data () {return {userInfo: {name:' Xiaoming'}}, methods: {updateName () {this.userInfo.name=' Xiao Hong'}}

In the updateName function, we try to change the value of the userInfo object and find that the page has not actually changed

There are two solutions: methods: {updateName () {this.userInfo.name=' Xiao Hong'/ / at this point, the userInfo object has indeed been modified to complete console.log (this.userInfo.name); / / output result: Xiao Hong this.$forceUpdate () / / here, after the forced refresh, the result of the page becomes' Xiao Hong'} method 2 methods: {updateName () {this.$set ('userInfo',name,' Xiao Hong');}} some understanding of $forceUpdate

There is only one sentence in the official document.

Forces the Vue instance to re-render. Note that it affects only the instance itself and the subcomponents that insert the contents of the slot, not all subcomponents.

My understanding is that the so-called re-rendering only refers to re-rendering DOM and doing code diff with the original DOM. For those with changes, render to the page. Combined with the official explanation, it can be confirmed that two points will not happen:

Lifecycle hook functions, such as mounted, will not be triggered again

Updates to the subcomponent are not rendered, even if the props of the subcomponent changes.

In that case, in what scenarios will you need to use it?

We know that in Vue, updates are automatically triggered when response data changes, but there are some conditions that do not trigger updates, such as array methods, or adding responsive data that is not defined in advance in data.

For example:

Assuming that there is a list that needs to be rendered, we initialize the list in data and populate the array with fill in the mounted function. Fill this api does not trigger automatic updates.

{{item}} import HelloWorld from "@ / components/HelloWorld.vue"; export default {name: "About", components: {HelloWorld,}, data () {return {arr: Array (4),};}, mounted () {this.arr.fill (0); setTimeout () = > {this.$forceUpdate ();}, 3000) SetTimeout (() = > {this.$refs.hello.$forceUpdate ();;}, 5000);}

In the above example, the page will see the update after 3 seconds, and the child components will see the update after 5 seconds. This explains the meaning of forceUpdate.

That is, force to update the data that has not been rendered to the page for some reason, has changed, and should be rendered to the page.

All he affects is the process of triggering the render function to generate DOM-> diff-> update the view with the original DOM.

Thank you for reading, the above is the content of "how to use $forceUpdate () in Vue". After the study of this article, I believe you have a deeper understanding of how to use $forceUpdate () in Vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.