VUE学习个人纪录05

 计算属性与监视

计算属性:

　　1.定义: 要用的属性不存在,要通过已有属性计算得来。
　　2.原理: 底层借助了objcet.defineproperty方法提供的getter和setter。

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

　　　　(1).初次读取时会执行一次。
　　　　(2).当依赖的数据发生改变时会被再次调用。
　　4.优势: 与methods实现相比，内部有缓存机制(复用），效率更高，调试方便。

　　5.备注:
　　　　1.计算属性最终会出现在vm上,直接读取使用即可。
　　　　2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

         完整写法
            fullName: {

                get() {
                    console.log('get被调用了') //此处的this是vm中的
                    return this.firstname + '-' + this.lastname
                },
                set(value) {
                    console.log('set', value)
                    const arr = value.split('-')
                    this.firstname = arr[0]
                    this.lastname = arr[1]
                }

            }

此外：

简写:只考虑书写，不考虑修改才能使用该形式
            fullName() {


                console.log('get被调用了') //此处的this是vm中的
                return this.firstname + '-' + this.lastname
            }

监视属性

 

监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作

2.监视的属性必须存在,才能进行监视!!

3.监视的两种写法:
(1).new Vue时传入watch配置

watch: {
            isHot: {
                immediate: true, //初始化时让handler调用
                handler(newValue, oldValue) {
                    console.log('isHot被修改了' + newValue, oldValue)
                } //当函数属性被修改时会被调用
            }
        }

 

(2).通过vm. $watch监视

vm.$watch('ishot', {
        immediate: true, //初始化时让handler调用
        handler(newValue, oldValue) {
            console.log('isHot被修改了' + newValue, oldValue)
        } //当函数属性被修改时会被调用

    })

 深度监视

(1). vue中的watch默认不监测对象内部值的改变（一层）。

watch{
 'numbers.a': {
                handler() {
                    console.log('a被改变了')
                }
            }
}

 

(2).配置deep：true可以监测对象内部值改变（多层）。

//监视多级结构中某个属性的变化
            numbers: {
                deep: true,
                handler() {
                    console.log('numbers被改变了')
                }
            }

 

备注:

(1). Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以。

(2).使用watch时根据数据的具体结构,决定是否采用深度监视。

监视属性的简写形式

正常写法

    vm.$watch('isHot', {
        handler(newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue)
        }
    })

简写形式

    vm.$watch('isHot', function(newValue, oldValue) {
        console.log('isHot被修改了', newValue, oldValue, this)
    })

computed和lwatch之间的区别

1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能,computed不一定能完成。

例如: watch可以进行异步操作。两个重要的小原则:

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数，这样this的指向才是vm或组什实例对象。