Vue侦听器 watch

我们发现，与计算属性相比，侦听器并没有优势；也不见得好用，直观上反而比计算属性的使用更繁琐；虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>watch</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="test" />
        </div>
    </body>
</html>
<script type="text/javascript" charset="utf-8">
    var app = new Vue({
        el: "#app",
        data: {
            test: '',
        },
        watch: {
            /* 注意：oldval是新值而newval是旧值 */
            test(newval, oldval) {
                console.log('旧值：' + oldval + '====新值：' + newval)
            },
        }
    });
</script>

 

 

immediate和handler

我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>watch</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="test" />
        </div>
    </body>
</html>
<script type="text/javascript" charset="utf-8">
    var app = new Vue({
        el: "#app",
        data: {
            test: 'hello',
        },
        watch: {
            /* 注意：oldval是新值而newval是旧值 */
            test: {
                handler(newval, oldval) {
                    console.log('旧值：' + oldval + '====新值：' + newval)
                },
                immediate: true
            }
        }
    });
</script>

监听的数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法；

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

 

deep

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>watch</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="test.name" />
        </div>
    </body>
</html>
<script type="text/javascript" charset="utf-8">
    var app = new Vue({
        el: "#app",
        data: {
            test: {
                id: 1,
                name: 'hello'
            },
        },
        watch: {
            /* 注意：oldval是新值而newval是旧值 */
            test: {
                handler(newval, oldval) {
                    console.log('test旧值：' + oldval + '====test新值：' + newval)
                },
                deep: true,
                immediate: true
            },

            'test.name': {
                handler(newval, oldval) {
                    console.log('name旧值：' + oldval + '====name新值：' + newval)
                },
                // deep: true,
                immediate: true
            },
        }
    });
</script>

 

posted @ 2020-05-29 03:45  杵臼  阅读(133)  评论(0)  编辑  收藏  举报