Vue数据的监听

<!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,"狼嚎")也会点击后修改

在数据监听中数组有很多的坑

相关阅读:
const与readonly
JQuery Tooltipster
Log4Net使用
asp.net mvc 4 beta 版已发布
控件属性
C# 获取当前路径
对toLocaleString()、toString()、valueOf()的理解
靶场练习3CSRF攻击
计算字符串长度
Android ListView 自定义适配器

原文地址：https://www.cnblogs.com/jiadi321/p/9881452.html