Vue学习：Vue中的计算属性和侦听属性

一、计算属性

定义：所谓计算属性，就是用已经存在的属性去计算，然后生成一个全新的属性。计算属性的妙处在于它是依赖于你所指定的那个属性的，当该属性发生变化时，计算属性也会发生变化

原理：底层借助的Object.defineProperty方法提供的getter和setter

计算属性的语法：

computed：{

计算属性名：{

                  get（）{return ...}//当有人读取计算属性时，get函数就会被调用，且返回值就作为计算属性的值，get函数什么时候被调用：1、初次读取计算属性时，2所依赖的数据发生改变时

                  set（value）{...}//当计算属性被修改时，set函数会被调用

}}

简写形式：

computed：{
                                       函数（）{

                                             return...}}

计算属性的优势：

与methods实现方式相比，计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 所依赖的属性 还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数，大大提高运行效率，方便调试。

二、侦听属性

定义：Vue 提供的一种更通用的方式来观察和响应 Vue 实例上的数据变动；

语法格式：watch:{

                       侦听属性名：{

                                handle(newValue,oldValue){//当侦听属性发生变化时，调用handle函数

                                  //操作

                                }}

简写形式：

watch:{

                       侦听属性名（newValue,oldValue）{

                               操作}}

深度监视：

深度监视也就是监视对象内部的属性值变化，首先需要了解一些配置：

1、deep：深度监视，默认为false；

2、immediate：页面初始化时是否触发回调，默认为false；

理解：

1、vue中的watch默认不检测对象内部值得改变（一层）；

2、配置deep：true可以监测对象内部值改变（多层）；

三、计算属性和侦听属性的区别

区别：

1、computed能完成的功能，watch都能完成；

2、watch能完成的功能，computed不一定能完成，比如，watch可以进行异步操作；

补充小原则：

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

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