preface
presumably many small partners in the use of vue, have encountered obviously modify the data in the data, but the view is not updated the situation, this time experienced small partners, not to mention the direct call to this.$forceupdate () forced update page, no matter what his situation, brush on the end, i belong to the whole is a big speechless.
$nexttick
Delays the callback until after the next DOM update loop. Use it immediately after modifying the data, and then wait for the DOM to update. It is the same as a global method, except that the callback is automatically bound to the instance that calls it.Vue.nextTickthis
the above excerpt is copied from the official website of vue, many small partners may not understand, first of all, you must first know the asynchronous update queue of vue.
You may not have noticed that Vue performs DOM updates asynchronously, and once a data change is observed, Vue will open a queue and push the watcher of the data change observed in the same event loop into this queue. If the watcher is triggered multiple times, it will only be pushed to the queue once. This buffering behavior can effectively eliminate unnecessary computations and DOM operations caused by duplicate data. At the next event loop, Vue empties the queue and makes the necessary DOM updates.
“what did you say, didn’t understand a word”
“steaming drip fishing, this can not be understood, to give you an analogy, if you want to modify a data, but also modified many times in a row, the program can not always update n times the view of the ding, which is also too expensive performance, so in fact vue will only update your final result after you change the data for half a day. got it? ”
“wow, such a cow, what’s going on with nextick?”
“Listen, brother a sentence to make you have an epiphany, it is actually used to know when the DOM update is completed. ”
“666, i don’t know, but what’s the use of knowing?”
“for example, if you want to manipulate the dom after modifying the data, you often find that the value of the dom binding is still the old value.”
xiaoming suddenly shouted, “ah right, right, that’s it, it’s annoying me, how to solve it?”
“don’t worry, you need to know why first, in fact, just said, you changed the data, it is still there to sort and wait to see your final results, at this time the dom has not been updated.” so if you want to get new values, nexttick comes in handy. because it can know when the dom is updated, you can operate on it in its callback function and get the new value.”
“wow, learned, thanks to the big guy, there is a problem, how i always heard that others use $nexttick to update the view, i listen to you mean it did not play a role in updating the view ah”
“the young man has grown and can see something. yes, there are always people on the internet who talk about updating the view with $nexttick, but in fact it just makes your operation perform after the view is updated.”
“okay, thanks guy, i’ll take a little book and write it down.”
$set
Add a property to the responsive object, ensure that the new property is also responsive, and trigger a view update. It must be used to add a new property to a reactive object, because Vue cannot probe for a normal new property such as this.myObject.newProperty = ‘hi’)
when the data is updated but the view is not updated, it is often the case that we define an object and add new properties to the object.
We need to know that vue2’s two-way binding principle is implemented through Object.defineProperty(), and when initialized, vue will process the data in data into a responsive. But if you add a new property to this data, apparently, it’s not being processed into responsive data, how can the view be updated?
“so what can i do to refresh the view?”
“you can think of it when you analyze it, there are no more than two schemes, one is to add a responsiveness to the newly added attributes, and the other is to force the next page to be refreshed by a hard method.”
“i want to hear it”
“the first is the $set that i want to talk about here, which is the api provided by vue, and you can use it to add properties to the object.”
“okay, i’ll see how to use it”
“no need to bother, it’s very simple, look below”
error: this.$set (key, value) (ps: may be written in vue1.0).
mounted () {
this.$set(this.student.age, 24)
}correctly written: this.$set (this.data, “key”, value’).
$forceupdate
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.
The principle of $forceUpdate is simple, even if the update declaration cycle is forced to be triggered, the following dom is re-rendered:
Vue.prototype.$forceUpdate = function () {
const vm: Component = this
if (vm._watcher) {
vm._watcher.update()
}
}summary
- $nexttick is not really updating a view, but waiting for the view to update before performing certain operations
- Although $forceUpdate and $set can play a role in updating the view, but the former is not recommended to use, one is that the official said, if you have reached the point of using $forceupdate, then you have nine times out of ten there is a problem with the operation; the second is the problem that can be solved with $set, why use $forceupdate, which is a more performance-consuming method, if you use it, it is estimated that you are lazy!
