码迷,mamicode.com
首页 > 其他好文 > 详细

Vue之数据监听存在的问题

时间:2018-11-14 22:28:33      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:class   ace   method   func   pre   cli   eth   script   监听   

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>

  

 

Vue之数据监听存在的问题

标签:class   ace   method   func   pre   cli   eth   script   监听   

原文地址:https://www.cnblogs.com/wjs521/p/9960170.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!