vue计算属性与侦听

目录

一、计算属性 computed

1.计算属性的概念

2.只考虑读取不考虑修改可采用简写形式

二、侦听 watch

1.完整写法

 2.深度监视

 3.监视两种方法的简写

三、computed 和 watch 的区别

一、计算属性 computed

1.计算属性的概念

计算属性：

        1.定义：要用的属性不存在，要通过已有属性计算得来。

        2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

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

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

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

         4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

         5.备注：

                1.计算属性最终会出现在vm上，直接读取使用即可。

                2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

注意：

        1、要显示的数据不存在，通过计算得来的

        2、在 computed 对象中定义计算属性

        3、在页面中使用 {{方法名}} 来显示计算的结果

        4、计算属性靠 return 返回结果

2.只考虑读取不考虑修改可采用简写形式

二、侦听 watch

监视属性watch：

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

        2.监视的属性必须存在，才能进行监视！！

        3.监视的两种写法：

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

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

1.完整写法

 2.深度监视

深度监视：

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

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

备注：

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

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

注意：

        在 watch 对象中定义配置监视的指定的属性

        当属性变化时, 回调函数自动调用, 在函数内部进行计算

 3.监视两种方法的简写

 注意：当配置项只有 handler 的时候，就可以采用简写形式了

三、computed 和 watch 的区别

computed和watch之间的区别：

        1.computed 能完成的功能，watch 都可以完成。

        2.watch 能完成的功能，computed 不一定能完成，例如：watch 可以进行异步操作。

两个重要的小原则：

        1.所被 Vue 管理的函数，最好写成普通函数，这样 this 的指向才是 Vue实例对象 或 组件实例对象。

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