Vue中的watch用法

Vue中的watch用法

Vue.js中的watch主要用于观察Vue实例上的数据变动。

栗子：

<template>

    // 观察数据为字符串或数组

    <input v-model="example0" />

    <input v-model="example1" />

    // 单观察数据example2为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数

    <input v-model="example2.inner" />

</template>

<script>

    export default {

        data () {

            return {

                example0: "",

                example1: "",

                example2: {

                    inner: 1

                }

            }

        },

        watch: {

            example0 (curVal, oldVal) {

                console.log(curVal, oldVal)

             },

            example1: 'a',  // 值可以为methods的方法名

            example2: {

                // 注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象

                    handler (curVal, oldVal) {

                        console.log(curVal, oldVal)

                    },

                    deep: true

                }

        },

        methods: {

                a: function (curVal, oldVal) {

                        console.log(curVal, oldVal)

                }

        }

    }

</script>