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

This article shows you what the common methods of Vue development are, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

$nextTick ()

This.$nextTick () delays the callback until after the next DOM update loop. Use the data immediately after modifying it, and then wait for the DOM update.

Working with scen

In some cases, the variable is initially assigned or updated, but using the value of the variable does not work when the DOM update is not complete. At this point, you need to wait for the DOM update to be loaded through this.$nextTick () and use it immediately. Commonly used in created hook functions and in situations where DOM updates are involved.

Usage

This.$nextTick (() = > {this.$refs.table.refresh (true)})

This.$nextTick () has a great advantage after page interaction, especially after getting data from the background and regenerating the dom object.

$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.

Working with scen

For a complex object, such as an object array, directly add an attribute to an element on the array, or directly change the length of the array to 0 length vue can use forced updates when unable to know that a change has occurred

On the other hand, when the form is rendered, sometimes a selection operation is made, but the content of the form is not updated, so you can use the forced update

Usage

This.$nextTick (() = > {this.$refs.table.refresh (true)}) $set ()

Working with scen

Limited by ES5, Vue.js cannot detect the addition or deletion of object attributes

Add a property to the responsive object and make sure that the new property is also responsive and triggers view updates. It must be used to add a new property to responsive objects because Vue cannot detect normal new property (such as this.myObject.newProperty = 'hi')

Note that the object cannot be a Vue instance or the root data object of a Vue instance.

Usage

This.$set (target, propertyName/index, value)

Target: the data source to be changed (can be an object or an array)

PropertyName/index: the newly added attribute name of the object or the subscript position of the newly added element of the array

Value: the value of the newly added attribute

/ / object this.$set (this.student, "age", 24) / / Array this.$set (this.arrayList, 2, {name: "Zhang San"}). Sync--2.3.0+ added (Vue 3.x has been replaced by v-model and is no longer supported)

Working with scen

In some cases, we may need to "two-way bind" a prop, which can be manipulated with the .sync modifier after vue 2.3.0. No longer supported after Vue 3.0

Usage

Parent component

Will actually be equivalently extended to

Sub-component

This.$emit ('update:foo', newValue) what are the common methods of Vue development? have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.