Vue之資料監聽存在的問題
阿新 • • 發佈:2018-11-14
Vue之資料監聽
當資料監聽的是列表時,資料發生改變,不會被監聽到。
// 用$set修改陣列中的陣列能夠被監聽
// app.$set(this.hobby, 0, "愛你哦");
<div id="app"> {{name}} <hr> {{hobby}} <hr> {{obj}} <button @click="my_click">點我改變資料</button> </div> <script> const app = new Vue({ el: "#app", data: { name: "wjs", hobby: ["抽菸", "喝酒", "燙頭"], obj: { age: 32, face: null, } }, methods: { my_click: function () { // 改變資料 // this.name = "wjs0521" // 改變陣列的長度 // 改變陣列長度能夠被監聽到 新值和舊值相同 // 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>