<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title>vue2 </title> </head> <body> <script> const data ={name: 'wyh', age: 22, friend: } const oldArrayProto = array. prototype; const newArrProto = Object.create(oldArrayProto); // Get all the array methods ['push', 'pop', 'shift', 'unshift', 'splice']. ForEach (methodName => {newArrProto[methodName] = function () {console.log(' update view ') oldArrayProto[methodName].call(this, ... arguments); // Call array native methods}}) console.log('oldArrayProto', oldArrayProto) console.log('newArrProto', NewArrProto) // Becomes a responsive data observer(data); function observer (target) { if (typeof target ! = = 'object' | | target = = = null) {/ / not object return out return target} the if (Array. IsArray (target)) {/ / is the need of an Array NewArrProto target.__proto__ = newArrProto; } function defineReactive(target, key, target[key])} function defineReactive(target, key, target[key]) key, value) { observer(value); DefineProperty (target, key, {get() {return value}, set (newValue) {observer(newValue); // Set the value page to look like a response if (newValue! == value) {value = newValue console.log(' Update view operation ')}}})} // data.name = 'coderwyh' // data.friend.friendName = 'coderwyh' // delete data.age; // data.test = 'something'// cannot be added // Vue. Delete data.colors. Push ('gray') // Execute console.log(data) </script> </body> </html>Copy the code