Vue_1-2_计算属性+监视

计算属性+监视

<div id="app">
    姓：<input type="text" placeholder="First Name" v-model="firstname"><br>
    名：<input type="text" placeholder="Last Name" v-model="lastname"><br>
    姓名1：<input type="text" placeholder="Full Name1" v-model="fullname1"><br>
    姓名2：<input type="text" placeholder="Full Name2" v-model="fullname2"><br>
    姓名3（双向）：<input type="text" placeholder="Full Name3" v-model="fullname3"><br>
    </div>
    <script src="./js/vue.js"></script>
    <script>
    const vm = new Vue({
        el:'#app',
        data:{
            firstname:'A',
            lastname:'B',
            fullname2:'A B',
            // fullname1:'' 写了计算属性，就不需要在data下写了
        },
        computed:{//计算出来的结果会被缓存，所依赖的数据不变时，回调函数不执行，而是读取缓存的结果
            //多次读取只执行一次getter计算
            // 将结果存入标识fullname1，每次取结果也是用fullname1来取
            //什么时候执行：初始化显示 或 所依赖的值发生变化时
            fullname1(){//计算属性中的一个方法，方法的返回值则为属性值
                console.log("fullname1()");
                return this.firstname+' '+this.lastname;
            },//这是一个回调函数
            //回调函数需要满足三个条件：1.你定义了 2.你没有调用 3.但最终它执行了
            fullname3:{
                get(){//这也是一个回调函数    
                    //什么时候调：当需要读取当前属性值时
                    //做什么：计算并返回当前属性的值
                    return this.firstname+' '+this.lastname;
                },
                set(value){//这也是一个回调函数,监视当前属性发生变化
                    //什么时候调：当属性值(fullname3)发生改变时回调
                    //做什么：更新相关的属性数据
                    const names = value.split(' ');//以空格为边界，把字符串分隔成数组
                    //"hello".split("", 3)	//可返回 ["h", "e", "l"]
                    this.firstname = names[0];
                    this.lastname = names[1];
                }
            }
        },
        watch:{//配置监视
            firstname:function (value){
                // firstname发生变化
                console.log(this);//Vue的实例对象 就是vm对象
                this.fullname2 = value + ' ' + this.lastname;
            }
        }
    })
    vm.$watch('lastname',function(newVal,oldVal){
        //一般我们只需要newVal，可以写成function (value){
        //更新fullname2
        this.fullname2 = this.firstname + ' ' + newVal;
    });
// 所有vm实例的方法，都以$开头
// 计算属性只需要写一个函数，而监视需要每监视一个属性写一个函数，相比之下计算属性更为简单
</script>