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

Editor to share with you what is easy to ignore API in Vue.js, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

NextTick

NextTick is a function provided by Vue.js and is not built into the browser. The nextTick function receives a callback function cb, which is executed after the next DOM update loop. For example, the following example:

Content

Display export default {data () {return {show: false}}, methods: {handleShow () {this.show = true; console.log (this.$refs.node); / / undefined this.$nextTick () = > {console.log (this.$refs.node); / /

Content

);}}

When show is set to true, the p node has not yet been rendered, so the undefined is printed. In the callback of nextTick, p has already been rendered, and the node can be printed correctly.

The source code of nextTick is in github.com/vuejs/vue/b. As you can see, Vue.js uses Promise, setTimeout, and setImmediate to implement nextTick, using different methods in different environments.

V-model grammatical sugar

V-model is often used for two-way data binding on form elements, such as. In addition to native elements, it can also be used in custom components.

V-model is a grammatical sugar that can be broken down into props: value and events: input. That is, the component must provide a prop named value and a custom event named input. If these two conditions are met, consumers can use v-model on the custom component. For example, the following example implements a number selector:

Minus 1 {currentValue}} plus 1 export default {name: 'InputNumber', props: {value: {type: Number}}, data () {return {currentValue: this.value}}, watch: {value (val) {this.currentValue = val }, methods: {increase (val) {this.currentValue + = val; this.$emit ('input', this.currentValue);}

Props generally cannot be modified within the component, it is modified through the parent, so the implementation of v-model generally has an internal data of currentValue. The initial value is obtained from value, and when the value is modified, it is monitored and updated in time through watch; the component does not modify the value of value, but modifies currentValue. At the same time, the modified value is sent to the parent component through a custom event input. After the parent component receives it, the parent component modifies the value. Therefore, the above number selector component can be used in the following two ways:

Import InputNumber from'.. / components/input-number/input-number.vue'; export default {components: {InputNumber}, data () {return {value: 1}

Or:

Import InputNumber from'.. / components/input-number/input-number.vue'; export default {components: {InputNumber}, data () {return {value: 1}}, methods: {handleChange (val) {this.value = val;}

If you don't want to use the names value and input, starting with version 2.2.0 of Vue.js, there is an option for model to specify their names, so the number selector component can also write:

Minus 1 {{currentValue}} plus 1 export default {name: 'InputNumber', props: {number: {type: Number}}, model: {prop:' number', event: 'change'}, data () {return {currentValue: this.number}} Watch: {value (val) {this.currentValue = val }, methods: {increase (val) {this.currentValue + = val; this.$emit ('number', this.currentValue);}

In the model option, you can specify the names of prop and event, rather than value and input, because these two names have other uses in some native form elements.

.sync modifier

If you have ever used Vue.js 1.x, you are no stranger to .sync. In 1.x, you can use .sync to bind data bidirectionally, that is, either the parent component or the child component can modify the data, which is bidirectional. This usage was abandoned in Vue.js 2.x in order to decouple the parent and child components as much as possible so that the child components do not inadvertently modify the state of the parent component.

However, in Vue.js 2.3.0, the .sync modifier has been added, but its usage is not exactly the same as 1.x. 2.x .sync is not a real two-way binding, but a syntactic sugar, and the modification of data is done in the parent component, not in the child component.

It is still an example of a number selector, this time using .sync instead of v-model, which can be rewritten like this:

Minus 1 {{value}} plus 1 export default {name: 'InputNumber', props: {value: {type: Number}}, methods: {increase (val) {this.$emit (' update:value', this.value + val);}

Use case:

Import InputNumber from'.. / components/input-number/input-number.vue'; export default {components: {InputNumber}, data () {return {value: 1}

It looks much simpler than the implementation of v-model, and the effect is the same. V-model can only have one in a component, but .sync can set many. .sync is good, but it also has limitations, such as:

Cannot be used with expressions (such as "doc.title +'!'" Is invalid)

Cannot be used on literal objects (for example, "{title: doc.title}" does not work properly).

$set

$set was introduced in the previous section, and it will be used in two situations:

Due to the limitation of JavaScript, Vue cannot detect the array of the following changes:

When setting an item directly using the index, for example: th. Items [index] = value

When you modify the length of an array, for example: vm.items.length = newLength.

Due to the limitation of JavaScript, Vue cannot detect the addition or deletion of object properties.

For example, it is:

/ / Array export default {data () {return {items: ['await,' baked,'c']}}, methods: {handler () {this.items [1] = 'xreply; / / not responsive}

Use $set:

/ / Array export default {data () {return {items: ['await,' baked,'c']}}, methods: {handler () {this.$set (this.items, 1,'x'); / / is responsive}

Take an object as an example:

/ / object export default {data () {return {item: {a: 1}, methods: {handler () {this.item.b = 2; / / not responsive}

Use $set:

/ / object export default {data () {return {item: {a: 1}}, methods: {handler () {this.$set (this.item, 'baked, 2); / / responsive}

In addition, the following methods of the array can trigger view updates, that is, responsive:

Push (), pop (), shift (), unshift (), splice (), sort (), reverse ().

Another trick is to copy an array first, then modify it through index, and then replace the entire array, such as:

Handler () {const data = [... this.items]; data [1] = 'xdistinct; this.items = data;} calculate the set of the attribute

Computing computed is simple and widely used, but most of the time, we just use its default get method, which is usually written normally, to get data that depends on other states through computed. For example:

Computed: {fullName () {return `${this.firstName} ${this.lastName}`;}}

The fullName here can actually be written as an Object instead of Function, but in Function form we use its get method by default, and when written as Object, we can also use its set method:

Computed: {fullName: {get () {return `${this.firstName} ${this.lastName}`;}, set (val) {const names = val.split (''); this.firstName = names [0]; this.lastName = names [names.length-1];}

Most of the time, the calculation attribute is just for reading, and after using set, you can write it. For example, in the above example, if you execute set of this.fullName = 'Aresn Liang',computed, it will be called, and firstName and lastName will be assigned to Aresn and Liang.

These are all the contents of the article "what are the easy-to-ignore API in Vue.js?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.