Vue数据的监听

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>Title</title>
 8     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
 9 </head>
10 <body>
11 <div id="app">
12     {{name}}
13     {{hobby}}
14     {{xuge_obj}}
15 
16     <button @click="my_click">点击改变数据</button>
17 </div>
18 <script>
19     const app = new Vue({
20         el: "#app",
21         data: {
22             name: "旭哥",
23             hobby: ["唱歌", "跳舞", "请客吃饭"],
24             xuge_obj: {
25                 obj1: "王铁锤",
26                 obj2: "李刚蛋"
27             }
28         },
29         methods: {
30             my_click: function () {
31                 // this.name = "病变"
32                 // this.hobby.push("烫头")
33                 // this.hobby[0] = "狼嚎"
34                 // console.log(this.hobby)
35                 // 用下面这种方法改变数据里的值
36                 // app.$set(this.hobby, 0, "狼嚎")
37                 this.xuge_obj.obj1 = "小粉嫩"
38             }
39         },
40         watch: {
41             name: {
42                 handler: function (val, oldVal) {
43                     console.log(val)
44                     console.log(oldVal)
45                 }
46             },
47             // push改变数据的长度的时候 可以监听到数据改变 新旧值是是一样的
48             // 不能监听到数据里值的改变 深度监听也不可以 除非用$set
49             hobby: {
50                 handler: function (val, oldVal) {
51                     console.log(val)
52                     console.log(oldVal)
53                 },
54                 // deep: true
55             },
56             xuge_obj: {
57                 handler: function (val, oldVal) {
58                     console.log(val)
59                     console.log(oldVal)
60                 },
61                 deep: true
62             }
63         }
64     })
65 </script>
66 </body>
67 </html>
猜你喜欢
