Vue笔记二

目录

一 计算属性

二 监视属性

 深度监视

 监视的简写属性

三 watch与computed对比

---

一 计算属性

1.定义:要用的属性不存在，要通过已有属性计算得来。
2.原理:底层借助了objcet.defineproperty方法提供的getter和Isetter.
3. get函数什么时候执行?
(1).初次读取时会执行一次。 
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods 实现相比，内部有缓存机制(复用)，效率更高，调试方便。
 5.注意:
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

 

二 监视属性

监视属性watch:
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视! （计算属性也可以监视）
3.监视的两种写法:
(1). new Vue时传入watch而置
(2).通过vm. $watch监视

 深度监视

(1).Vue中的watch默认不监测对象内部值的改变(层)。
(2).配置deep :true可以监测对象内部值改变(移层)。
备注:
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2)使用watch时根据数据的具体结构，决定是否采用深度监视。

 监视的简写属性

监视中只有handler函数时可以简写

到目前为止所学的 Vue管理的函数：

1 methods中所有的函数

2  计算属性里的get()、set(),简写时的 函数：计算属性名（），如上图中的fullName（）

3 监视 属性里的handler以及如上图所示简写时isHot()函数

三 watch与computed对比

computed和watch之间的区别: 
1. computed能完成的功能，watch都可以完成。
2. watch能完成的功能，computed不一 定能完成，例如: watch可以进行异步操作，computed不能。

如图所示，computed调用定时器，fullName函数没有返回值，而计算属性就是依靠返回值。

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

 下图为用监听去处理之前computed处理事件的例子