Vue----计算属性和监视(侦听)属性的详细讲解及区别

一、计算属性

作用：如果模板中需要过多逻辑，用常规写法会导致模板过重且难维护，这时候就应使用计算属性

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

姓名案例为讲：有methods方法和计算属性方法

methods方法：

 

计算属性方法：

（注：这里的this指的是vm实例 ）

 

计算属性 VS methods方法

 两者均一样，它们最大的区别是计算属性有缓存，效率更高，调试很方便，而methods没有缓存

根据自己的需求选择用methods方法还是计算属性

以上图里的计算属性是简写，如果计算属性要被修改，那必须写set函数去响应修改

  //完整写法

              /*   fullName:{

                    get(){

                        console.log("get方法被调用")

                        return this.firstName+"-"+this.lastName

                    },

                    set(value){

                        const arr = value.split("-")

                        this.firstName = arr[0],

                        this.lastName = arr[1]

                    }

 

 二、监视属性watch

  作用：观察和响应 Vue 实例上的数据变动

当被监视的属性变化时，回调函数自动(handler)调用

 

 

 监视属性必须存在才能监视，

  以上的监视的属性是isHot，假如是对info进行监视，如果是不存    在的属性，则无法实现监视

 监视还有另一种方法，这个方法适合监视目标不明确的情况下使用

 

三、深度监视(侦听)

 

第一种是监视多级变化中某个属性的变化，number.b表示监视number里面的b属性变化

 

 

第二种是监视多级变化中所有属性的变化，deep:true打开深度监视

 

 四、监视属性的简写形式

当配置项中不需要这两种属性时就可以使用简写

immediate:true 初始化时被handler调用

deep:true 深度监视

 完整写法和简写对比:

控制台输出：

 

 

 监视的另一种方法的简写:

控制台输出：

 

 

 五、计算属性与监视属性区别

计算属性computed依赖返回值return

 

 监视属性watch比较灵活，里面可以放定时器回调函数，而计算属性不可以

所以总结就是 ：

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