Vue的Computed、Methods和Watch

        模板内的表达式用于简单的运算，当遇到逻辑复杂的运算的时候就会难以维护。计算属性和监听属性去解决该问题。

1、计算属性（Computed）

• 什么是计算属性

    
原字符串：{{str}}
    
新字符串：{{newstr}}

 



//'Hello * World * !
//'Hello + World + !

        模板当中声明了一个newstr计算属性依赖于str属性，当str发生变化的时候，newstr属性的值也会自动更新。

• setter和getter

        每一个计算属性都包含一个getter和setter。当没有指明方法时，默认使用getter方法来读取数据，getter用来执行读取操作，而setter用来执行设置值的操作，当手动更新时就会触发setter，并触发视图更新。

    
姓名：{{fullname}}

 



//法外狂徒———————————张三

1.  代码中定义了一个计算属性fullname，在为其重新赋值的时候，Vue会自动调用setter，模版中绑定的值也会随之更新到视图上。
2. 如果没有设置setter方法建立fullname与name1和name2的依赖，fullname的值会改变，但视图不会更新

• 计算属性缓存

        计算属性computed和methods可以实现完全是一样的效果。他们有什么区别呢？

1. computed：计算属性是基于依赖进行缓存的，只有他的相关依赖发生改变才会重新请求值
2. methods：调用总会执行函数

    
    
methods方法：{{getTimeA()}}
    
computed方法：{{getTimeB}}

 



//method方法：11:16:35
//computed方法：11:16:13

 上面代码，vue实例发生变化的时候就会重新渲染

1. computed依赖于缓存，每次访问getTimeB计算属性时会立即返回之前的计算结果，而不会再次执行函数，因此会缓存输出的时间（没有setter，无依赖关系）
2. methods将会更新新时间（自动添加setter）

2、监听属性（Watch）

        监听属性是Vue.js提供的一种用来监听和响应Vue实例中的数据变化的方式。在监听数据对象中属性时，都会执行特定的操作。监听属性可以定义在Vue实例选项之中，也可以使用实例方法xx.$watch()

         deep选项，如果要监听的属性是一个对象，为了监听对象内布值的变化，可以在选项参数中设置deep:true。 

     3、Computed和Watch的区别又是什么？

• Computed：

1. 支持缓存，只有依赖发生变化才会重新计算
2. 不支持异步，有异步操作时候，无法监听到数据的变化
3. 默认走缓存，基于他们响应式依赖（data声明、父组件props）进行缓存
4. 一般用于依赖其他属性情况
5. 属性是函数，那么默认使用get方法，函数的返回值就是属性的属性值

• Watch

1. 不支持缓存
2. 支持异步监听（第一个是最新的值，第二个是变化之前的值）
3. 一个属性变化，就需要执行相应的操作
4. 监听必须data声明、父组件props中的数据，当数据发生变化时候会触发其他操作（immediate：组件加载立即触发回调函数，deep：深度监听，发现数据内部的变化）
5. 想要执行异步或者昂贵的操作以不断响应不断的变化，达到观察的作用

• 运用场景

1. Computed：需要进行数值计数，依赖其他数据，利用他的缓存特性
2. Watch：需要在数据变化时候执行异步或开销较大的操作

        看到最后，可以结合MVVM 模式、Vue 双向绑定原理加以理解，observe的任务就是对Data属性加上setter和getter，一旦数据发生变化就会触发监听回调，达到双向绑定的目的。

参考文献：

vue —— 计算属性 & 监听属性_计算属性关键词-CSDN博客

Vue的计算属性与监听属性_vue 监听计算属性-CSDN博客