<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{name}} {{hobby}} {{xuge_obj}} <button @click="my_click">点击改变数据</button> </div> <script> const app = new Vue({ el:"#app", data:{ name:"旭哥", hobby:["q","w","e"], xuge_obj:{ obj1:"12", obj2:"33" } }, methods:{ my_click:function () { //this.name = "xx" // this.hobby.push("汤") this.hobby[0] = "狼嚎" console.log(this.hobby) } }, watch:{ name:{ handler:function (val,oldval) { console.log(val), console.log(oldval) } }, //push改变数据的长度的时候，可以监听到数据改变 新旧值是一样的 hobby:{ handler:function (val,oldval) { console.log(val), console.log(oldval) }, //deep为深度监听，深度监听也监听不到 deep:true } } }) </script> </body> </html>
这个时候 this.hobby[0] = "狼嚎" 无法被监听到，需要将 this.name = "xx"打开，
因为这样就更改了数值，会重新渲染页面，this.hobby[0] = "狼嚎"便会被监听到并且渲染到页面
或者将this.hobby[0] = "狼嚎" 更改为 app.$set(this.hobby,0,"狼嚎")也会点击后修改
在数据监听中数组有很多的坑