vue计算属性与监视

// new 一个vue对象
const vm = new Vue({
    // 挂载节点块    对应节点
    el: '#demo',

    // 起始数据块(起始参数)  对应 v-modul
    data: {
        firstName: 'A',
        lastName: 'B',
        // fullName1: 'A B'
        fullName2: 'A B'
    },
    //
    // //计算属性 逻辑块
    computed: {
        // 什么时候执行：初始化显示/相关的data属性数据发生改变
        // 计算并返回当前属性的值
        // 方法
        fullName1(){//计算属性的一个方法，方法的返回值作为属性值
            console.log('fullName1()');//打印一个函数方法
            return this.firstName + ' ' + this.lastName ;//this是这个函数，值返回到fullName1  v-modle互相传递
        },
        //回调方法
        fullName3: {//赋值fullName3 的对调函数
            /*回调函数要满足3个条件：
                1、你定义的；
                2、你没有调用；
                3、但最终它执行了
            什么时候调用？
            用来做什么？              */

            // 回调函数，当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
            get(){return this.firstName + ' ' + this.lastName;},//返回拼合的结果，fullName3
            // 回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
            set(value){// value就是fullName3的最新属性值 ： 传递v-modle 的属性值,裁切后get返回
                const names = value.split(' ');
                this.firstName = names[0];
                this.lastName = names[1];// 给name 赋值
            }
        }
    },
    // // // 监听块逻辑
    // watch: {    //监听firstName
    //     //data.firstName发生了变化
    //  firstName: function(value){
    //      console.log(this); //就是VM对象
    //      this.fullName2 = value + ' ' + this.lastName;
    //  },
    //  lastName: function(value){
    //      console.log(this); //就是VM对象
    //      this.fullName2 = this.firstName + ' ' + value;
    //  }
    // }
});

// // vue外添加监听 lastName
vm.$watch('firstName', function(value){
    // 更新fullName2
    this.fullName2 = value + ' ' + this.lastName;
});
vm.$watch('lastName', function(value){
    // 更新fullName2
    this.fullName2 = this.firstName + ' ' + value;
});