计算属性(computed),侦听器(wacht)

计算属性:

1,定义: 要用的属性不存在,通过已有属性计算得来,( 计算属性所依赖的数据必须时data中的数据 )

 2,原理: 底层借助了Object.defineproperty 方法提供的getter 和 setter

 3,get函数什么时候执行?

            (1)、初次读取时会执行一次

            (2)、当依赖的数据发生改变时会被再次调用

        4,计算属性的优势:内部有缓存机制,效率较高.在依赖的数据(必须是data中的数据)没有发生变化的情况下,多次调用计算属性只执行1次

<template>
    <div>
        <div>数字1: {{ num1 }}</div>
        <div>数字2: {{ num2 }}</div>
        <div>计算num1+num2 = {{ num1 }} + {{ num2 + num1 }}</div>
        <div>计算num1+num2 = {{ num1 }} + {{ methodsSum() }}</div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                num1 : 10,
                num2 : 20
            }
        },
        methods : {
            methodsSum(){
                // 在方法中使用计算属性
                // this.computed
                console.log("使用methods求和")
                return this.num1 + this.num2 
            }
        },
        // 计算属性最终出现在vm实例上,直接读取使用就行
        computed: {
            // 常用形式 : 函数
            conputedSum(){
                console.log("使用computed求和")
                return this.num1 + this.num2 
            },
            // 计算属性完整语法
            conputedSum: {
            // 当调用计算属性时会被执行  this.conputedSum
            get(){
                return this.num1 + this.num2
            },
            set(){
                // 当给计算属性赋值的时候会被执行
                // this.computedSum = val
            }
         }
    }
</script>

二 ,侦听器 watch

使用watch来监听data中的数据变化,watch中的属性(watch是对象格式)一定是data中已有的数据。(特殊情况除外)

使用场景 : 数据变化时执行 异步或开销比较大的操作

监听的两种写法:

(1)、new Vue 时传入watch配置

(2)、通过vm.$watch监听

案例 : 姓名拼接

 需求 : 给定三个输入框,第一个输入姓,第二个输入名,第三个为姓和名组合的结果,要求用户更新姓或名后,第三个输入框自定生成完整的姓名结果。

<template>
   <div>
        <div>
            <input type="text" placeholder="姓" v-model="firstName" />
        </div>
        <div>
            <input type="text" placeholder="名" v-model="lastName" />
        </div>
        <div>
            <input type="text" placeholder="姓名" readonly v-model="fullName" />
        </div>

        <hr/>
        <div>
            <input type="text" placeholder="姓" v-model="userinfo.firstName" />
        </div>
        <div>
            <input type="text" placeholder="名" v-model="userinfo.lastName" />
        </div>
        <div>
            <input type="text" placeholder="姓名" readonly v-model="userinfo.fullName" />
        </div>
   </div>
</template>

<script>
    export default {
        data(){
            return {
                firstName: '',
                lastName: '',
                fullName: '',
                userInfo: {
                    firstName: '',
                    lastName: '',
                    fullName: '',
                }
            }
        },
        //侦听器:
        1, 要求监听的正常情况下时data中的数据变化,当数据变化后触发对应的回调函数
        2, 监听器的名称就是要监听的数据的名称
        3, 如果时要实现对对象的深度监听,一定要写成对象形式
        watch: {
            firstName(val,oldVal) {
                // 当firstnName变化时执行的回调函数
                console.log(val, oldVal)
                this.fullName = val + " " + this.lastName
            },
            lastName(val, oldVal) {
                // 当lastnName变化时执行的回调函数
                console.log(val, oldVal)
                this.fullName = this.firstName+ " " + val 
            },
            // 监听对象变化
            user Info: {
                deep: true, //开启深度监听
                // handler是必须写的,而且handler是这个函数名不能随便改
                // 由于监听的是对象,二对象是引用内存地址的,因此新旧值结果一样,所以建议只写新值
                handler(val){
                    // this.userInfo.fullName = val.firstName + " " + val.lastName
                    val.fullName = val.firstName + " " + val.lastName
                }
            }            
        }
    }
</script>

<style>

</style>

注意 :

(1)、对象形式的监听器可以配置以下属性

immediate : true ,// 初始化时让handler执行一次

deep : true  // 深度监听

(2)、所有被Vue管理的函数都写成普通函数,不要写成箭头函数

(3)、Vue自身会监听对象内部值的改变, 但是Vue提供的watch默认不可以, 需要写成对象形式并且 需要配置 deep : true  进行深度监听