How Vue monitors data

This article mainly shows you "how Vue monitors data". The content is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how Vue monitors data".

1. The principle of Vue monitoring data (set method) 1.1 the principle of Vue monitoring different types of data

Features: vue monitors all levels of data in data, and if he detects that it is an object, he configures getter and setter functions for all properties in the object

1.1.1 how do I monitor the data in the object?

Monitoring is implemented through setter, and the data to be monitored is passed in new Vue.

(1)。 For the properties appended to the object, Vue does not respond by default (that is, the getter and setter functions are not configured)

(2)。 To respond to the attributes added later, use the following API:

Vue.set (target,propertyName/index,value)

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

1.1.2 how do I monitor the data in the array?

By wrapping an array to update elements, you essentially do two things:

(1)。 Call the native corresponding method to update the array. (2)。 Re-parse the template to update the page.

When modifying an element in the Vue array, be sure to use the following method:

(1)。 Use these API:push (), pop (), shift (), unshift (), splice (), sort (), reverse ()

(2)。 Vue.set () or vm.$set ()

1.1.3 small case personnel information Click to update Ma Dongmei's information {{p.name}}-- {{p.age}}-- {{p.gender}} add a person's information Vue.config.productionTip = false at the end Let vm = new Vue ({el:'# root' Data: {person: [{id: "001", name: "Ma Dongmei", age: 20, gender: "female"}, {id: "002", name: "Charlotte", age: 33, gender: "male"}, {id: "003", name: "Shen Teng", age: 50 Gender: "male"}, {id: "004", name: "Jia Ling", age: 45, gender: "female"},]}, methods: {updatep () {/ / but the following method does not work, this method cannot be detected by Vue / / the reason is that the data cannot be changed because there are no getter and setter methods on the array / / this.person [0] = {id: "001", name: "Li Huanying", age:66,gender: "female"} / / the following method works Because the getter and setter methods / / this.person [0] .name = "Li Huanying" / / this.person [0] .age = "66" / / this.person [0] .gender = "female" / / this.person.splice (0,1, {id: "001", name: "Li Huanying" are already configured on the attribute Age: 66, gender: "female"}) this.$set (this.person, 0, {id: "001", name: "Li Huanying", age: 66, gender: "female"})}, addNew () {this.person.push ({id: "005", name: "Sister", age: 99 Gender: "female")}},}) 1.1.4 set () small case student information

Name: {{student.name}}

Gender: {{student.sex}}

Age: {{student.age}}

Address: {{student.address}}

Contact information: {{student.contact}}

Friend: {{v.name}}-- {{v.age}}

Click to add gender Vue.config.productionTip = false let vm = new Vue ({el:'# root', data: {student: {name: "Jack", age: 18, address: "Beijing" Contact: "13xxxxxxx56", friends: [{name: 'Mark', age: 12}, {name:' Lisa', age: 52}, {name: 'Guli', age: 25} ]}, methods: {add () {both words can be written / / this.$set (vm.student, "sex", "male") Vue.set (this.student, "sex") ("Men")}},}) these are all the contents of the article "how Vue monitors data" 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!