<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> {{name}} <hr> {{hobby}} <hr> {{obj}} <button @click="my_click">点我改变数据</button> </div> <script> const app = new Vue({ el: "#app", data: { name: "juyingying", hobby: ["抽烟", "喝酒", "烫头"], obj: { age: 32, face: null, } }, methods: { my_click: function () { // 改变数据 // this.name = "juying" // 改变数组的长度 // 改变数组长度能够被监听到 新值和旧值相同 // this.hobby.push("把手拿上来"); // 改变数组中的值 不能被监听到 深度监听也不可以 // this.hobby[0] = "抽二手烟"; // console.log(this.hobby); // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "抽二手烟"); } }, watch: { name: { handler: function (val, oldVal) { console.log(val); console.log(oldVal) } }, hobby: { handler: function (val, oldVal) { console.log(val); console.log(oldVal); }, // deep: true } } }) </script> </body> </html>