Detailed explanation of common methods of Vue development

$nextTick()

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

Usage scenarios In some cases, when a variable is initially assigned or updated but the DOM has not been updated, using the variable value will not work. At this point, you need to use this.$nextTick() to wait for the DOM update to load and then use it immediately. Commonly used in created hook functions and situations involving DOM updates.
usage

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

this.$nextTick() has great advantages in page interaction, especially in operations after regenerating DOM objects after obtaining data from the background

$forceUpdate()

Forces the Vue instance to re-render. Note that it only affects the instance itself and the child components inserted into the slot content, not all child components.

Usage scenarios

For a complex object, such as an array of objects, you can directly add attributes to an element in the array, or directly change the length of the array to 0. Vue cannot know that a change has occurred, so you can use forced update.

On the other hand, when the form is rendered, sometimes a selection operation is performed, but the form content is not updated. You can use forced update

usage

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

$set()

Usage scenarios

Due to the limitations of ES5, Vue.js cannot detect the addition or removal of object properties.

Add a property to a responsive object and ensure that the new property is also responsive and triggers a view update. It must be used to add new properties to responsive objects, because Vue cannot detect normal new properties (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 name of the newly added property of the object or the index 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: "张三" })

.sync——New in 2.3.0+ (replaced by v-model in Vue 3.x, no longer supported)

Usage scenarios

In some cases, we may need to perform "two-way binding" on a prop. After Vue 2.3.0, we can use the .sync modifier to do this. No longer supported after Vue 3.0

usage

Parent Component

<comp :foo.sync="bar"></comp>

In fact, it will be equivalently expanded to

<comp :foo="bar" @update:foo="val => bar = val"></comp>

Subcomponents

this.$emit('update:foo', newValue)

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!