1. Simulate a data monitor

<script type="text/javascript"> let data = {name: 'pingdingsan College ', address: 'Henan ',} // Create a monitor instance object, Const obs = new Observer(data) console.log(obs) // Prepare a VM instance object let vm = {} vm._data = data = obs function Observer(obj) {const keys = object.keys (obj) // Iterate over keys.foreach ((k) => {object.defineProperty (this, K, {get() {return obj[k]}, set(val) {console.log(' ${k} 'was changed, I want to parse the template, generate virtual DOM..... `) obj[k] = val } }) }) } </script>Copy the code

2. Principle of Vue monitoring data:

  • Vue monitors all levels of data in data.

2.1 How do I Monitor Object Data?

Monitoring is implemented through setters and the data to be monitored is passed in at new Vue.

  1. Object, Vue does not respond by default

  2. To respond to later attributes, use the following API:

    Vue. Set (target, propertyName/index, value) or

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

2.2 How do I monitor data in arrays?

By wrapping the array update element, we essentially do two things:

  1. Call the native corresponding method to update the array.

  2. Reparse the template to update the page.

2.3 The following methods must be used to modify an element in the Vue array:

(1). Use these apis :push(), pop(), Shift (), unshift(), splice(), sort(), reverse()

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

  • Special note: vue.set () and vm.$set() cannot add attributes to the VM or the root data object of the VM!!
<! < span style> < span style> button{margin-top: 10px; } </style> <! <script type="text/javascript" SRC =".. / js/vue. Js "> < / script > < / head > < body > < div id =" root "> < h1 > student information < / h1 > < button @ click =" student. Age++ "> age + 1 < / button > < br / > < button@click ="addSex"> </button> <br/> <button @click="student. Sex = 'unknown'" @click="addFriend"> </button> <button @click=" updateFriendName "> </button> <button @click="addHobby"> </button> <br/> <button @click="updateHobby"> </button> <br/> <button @click="removeSmoke"> </button> {{student. Age}} < / h3 > < h3 v - if = "student. Sex" > gender: {{student. Sex}} < / h3 > < h3 > interests: < / h3 > < ul > < li v - for = (h, index) in student. "hobby" : the key = "index" > {{h}} < / li > < / ul > < h3 > friends: </h3> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}}--{{f.age}} </li> </ul> </div> </body> <script type="text/javascript"> vue.config. productionTip = false // Prevents Vue from generating production prompts at startup. Const vm = new Vue ({el: '# root, data: {student: {name: "Tom, age: 18, hobby: [' smoking', 'drink', 'permed hair], friends:[ {name:'jerry',age:35}, {name:'tony',age:36} ] } }, methods: {addSex () {/ / Vue. Set (this student, 'sex', 'male') enclosing $set (this student, 'sex', 'male')}, addFriend(){ this.student.friends.unshift({name:'jack',age:70}) }, UpdateFirstFriendName (){this.student.friendName [0].name = '3'}, addHobby(){this.student.friend.push (' learn ')}, UpdateHobby () {/ / this. Student. Hobby. Splice (0, 1, 'driving') / / Vue. Set (this. Student. Hobby, 0, 'driving') This. $set (this. Student. Hobby, 0, 'driving')}, removeSmoke () {this. Student. Hobby = this. Student. Hobby. Filter ((h) = > {return h! == 'smoke'})}}}) </script> </ HTML >Copy the code