+
80
-

vue如何编写watch监听值的变化?

vue

vue如何编写watch监听值的变化?


网友回复

+
0
-

使用watch来监听,如果是监听对象内属性,就要设置deep=true,如果想要开始的时候就执行设置 immediate: true,完整代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

</head>

<body>
    <div id="app">
        <div>
            <p>FullName: {{fullName}}</p>
            <p>FirstName: <input type="text" v-model="firstName"></p>
            <p>obj.a: {{obj.a}}</p>
            <p>obj.a: <input type="text" v-model="obj.a"></p>
        </div>

    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>


    <script>
        new Vue({
            el: '#app',
            data: {
                firstName: 'Dawei',
                lastName: 'Lou',
                fullName: '',
                obj: {
                    a: 123
                }
            },
            watch: {
                firstName(newName, oldName) {
                    this.fullName = newName + ' ' + this.lastName;
                     immediate: true,
                },
                obj: {
                    handler(newName, oldName) {
                        console.log('obj.a changed');
                    },
                    immediate: true,
                    deep: true
                }
            }
        })
    </script>
</body>

</html>

我知道答案,我要回答