vue 数据监听

Posted 2021-03-22 bozhengheng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 数据监听相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{name}}
    <hr>
    {{hobby}}
    <hr>
    {{obj}}

    <button @click="my_click">点我改变数据</button>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "juyingying",
            hobby: ["抽烟", "喝酒", "烫头"],
            obj: {
                age: 32,
                face: null,
            }
        },
        methods: {
            my_click: function () {
                // 改变数据
                // this.name = "juying"
                // 改变数组的长度
                // 改变数组长度能够被监听到 新值和旧值相同
                // 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>
</body>
</html>

View Code

以上是关于vue 数据监听的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

vue数据监听原理

VSCode自定义代码片段11——vue路由的配置