vueのwatchプロパティ

vueのwatchプロパティ
概要:watchプロパティは、データが変更されたかどうかを常に検出できます.
注意:オブジェクトまたは配列が検出された場合は、深度リスニングが必要です.
例

<template>
    <div class="listen">
        <el-input v-model="message">el-input>
        <el-input v-model="object.key1">el-input>
        <el-input v-model="object.key2">el-input>
    div>    
template>
<script>
export default {
    data(){
        return{
            message: '',
            object:{
                key1: '',
                key2: '',
                key3: ''
            }
        }
    },
    methods:{
        test(curVal,oldVal){
            console.log(curVal + " function " + oldVal); //   curVal oldVal    
        }
    },
    watch:{
        message(curVal,oldVal){
            console.log(curVal + " " + oldVal); //   curVal oldVal    
        },
        //           
        message: 'test',
        //         ，      
        object:{
            handler(value,oldVal){
                alert(value.key1 +"      "+oldVal.key1); //          ，           
            },
            deep:true
        }

    }

}
script>
<style scoped>

style>