vue中watch使用场景

<template>
    <div>
        <h1>watch使用</h1>
        <hr>
        <div>语言：{{language}}</div>
        <button @click="switchLanguage('ch')">中文</button>
        <button @click="switchLanguage('en')">English</button>
        <div>{{zhangsan}}</div>
        <div>{{lisi}}</div>
    </div>
</template>

<script>
    export default {
        name: "demo7",
        data() {
            return {

                language: 'ch',
                zhangsan: '',
                lisi: ''
            }
        },

        methods: {
            switchLanguage(val) {
                console.log(val)
                this.language = val;
            }

        },
        watch: {
            language: {
                handler(newVal) {
                    if (newVal == "ch") {
                        this.zhangsan = "张三";
                        this.lisi = "李四"
                    } else if (newVal == "en") {
                        this.zhangsan = "zhangsan";
                        this.lisi = "lisi"
                    }
                },
                immediate:true, //让handle方法立即执行
            }
        }

    }
</script>

<style scoped>

</style>

　　

当设置immediate:true,点击英文按钮,效果图

 

当设置immediate:false,效果图(handle方法没有立即执行,data里面的数据没有附上（zhangsan:'',lisi:''）