018 vue的watch属性

watch属性

            1. watch是和el,data, methods属性同级的一个属性

            2. watch属性用于监听组件中数据的变化

            3. watch属性为一个对象，对象中定义函数，函数名为变量名，参数分别为新值和旧值

            4. 当被监听的数据发生变化是，调用该函数

            5. 参考：https://www.cnblogs.com/williamjie/p/11155166.html

　　示例代码：

<template id="cpntem">
    <div>
        <h2>你好啊，我是Carrey</h2>
        <p>这是一段文字内容{{cfruit}}</p>
    </div>
</template>

<script>
    // 1. 创建子组件
    const cpn = {
        template: "#cpntem",
        props:{
            getInfo: String,
        },
        data(){
            return{
                cfruit: this.getInfo,
            }
        },
        methods:{
            itemClick(ins){
                this.$emit("send-item", ins);
            }
        },
        watch:{
            cfruit(newData, oldData){
                console.log("水果由" + oldData + "被改成" + newData);
            },            
        }
    }
    // 2, 3. 使用组件
    var app = new Vue({
        el: "#app",
        components:{
            cpnc: cpn,
        },
        data:{
            fruit: "椰子"
        },
    });
</script>