What is the principle of listening to data in Vue

This article will explain in detail what is the principle of monitoring data in Vue. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Students' basic information age + 1 year old add gender attribute default value is male

Modify attribute value

Add a friend at the top of the list

Update the name of the first person

Add a hobby

Change the first hobby to mountain climbing

Filter out smoking

Name: {{student.name}} Age: {{student.age}} gender: {{student.sex}} hobby: {{h}} Friends: {{f.name}}-- {{f.age}} Vue.config.productionTip = false Const vm = new Vue ({el: "# root", data: {student: {name: 'zhang', age: 18, hobby: [' drinking', 'smoking', 'perm'] Friends: [{name: 'li', age: 15}, {name:' wang', age: 10}]}} Methods: {addSex () {this.$set (this.student, 'sex',' male') / / Vue.set (vm.student, 'sex',' male')} AddFriend () {this.student.friends.unshift ({name: 'YY', age: 66})}, updateFriend () {this.student.friends [0] .name = "Xiao Liu" This.student.friends [0] .age = 22}, addHobby () {this.student.hobby.push ('singing')}, change () {/ / splice add means to start with 0, delete one The new value is mountain climbing / / Note: it cannot be modified directly in the form of array subscripts / / this.student.hobby.splice (0,1, 'mountain climbing') / / Vue.set (this.student.hobby, 0, 'mountain climbing') this.$set (this.student.hobby, 0) 'mountain climbing')} RemoveSmoke () {/ / filter does not affect the change of the original array this.student.hobby = this.student.hobby.filter ((h) = > {return h! = 'smoking')}) So much for sharing about the principle of snooping data in Vue I hope the above content can be of some help to you and learn more knowledge. If you think the article is good, you can share it for more people to see.