vue 自学笔记(三) 计算属性与侦听器

一:计算属性

　　虽然在模板内使用表达式对属性进行处理十分便利，例如在小胡子语法里写number + 1实现对数据的简单处理，但若咱们在其中加入大量的代码，使得逻辑变重，致使难以维护。例以下面的代码，并非简单的逻辑处理，而是须要通过一段时间的推算后，才知道在 div 中展现的是怎么样的内容

　　　　能够在小胡子语法中直接书写简单js 

　　

　　　　Vue 建议咱们在其中只作一些简单的运算便可，那么当给页面要绑定的属性需要大量逻辑处理的时候，咱们建议使用计算属性

　　　　1:基础例子

　　　　

　　　　建立了一个根节点，咱们如今给其挂载实例

　　　　

　　　　明确观点,  fullname 在调用时为属性

　　　　如今咱们能够看到页面有一个输入框，受v-model双向绑定影响，框内会呈现 lastName 的属性值。咱们须要明确一点，虽然 fullname 相似方法，但实际上它是一个属性（所以按照属性使用放在模板语法中），只是没有定义在 data 中。fullname 的值收到 firstName 和 lastName 影响，当咱们改变 lastName 的值时，页面上的 fullname 也发生了变化。

 

　　　　2:  不使用计算属性,使用方法进行改写

　　　　

　　　　借用上面的代码，咱们能够将 Anotherfullname 绑定在页面上，也能够呈现出和计算属性同样的效果。咱们能够将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是彻底相同的。然而，不一样的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会从新求值。

　　　　注意!!!

　　　　..就是说函数,每次刷新都话在次执行. 而计算属性,不会从新加载

　　　　

 

 

　　　　3 :计算属性的getter 和setter

　　　　vue 官网文档解释

　　　　

 

 　　　　个人解释:

计算属性默认只有 getter 函数，用来获取新值。当咱们不明确的写出他们的时候，仅作方法写(如上例子)，就只利用了 getter 函数。须要使用 setter 的话，咱们要明确写出。

　　　　

 

 　　　　getter 函数明确的获取了其依赖的两个属性，而后处理返回。当咱们要设置 fullname 的属性值时，会触发 setter 属性，参数 value 是咱们设置的内容，例子中，setter 被调用后，相应的：vm 的 firstName 和 lastName 也会发生改变。

 　　二:侦听器的使用:

　　　　　

　　　　　　虽然计算属性在大多数状况下更合适，但有时也须要一个自定义的侦听器。这就是为何 Vue 经过 watch 选项提供了一个更通用的方法，来响应数据的变化。当须要在数据变化时执行异步或开销较大的操做时，这个方式是最有用的。

　　　　　　watch 始终监视着你写在里面的属性，当它发生变化的时候，就会执行你提早写好的逻辑处理。咱们来看用计算属性实现的例子，如何被 watch 实现。

　　　　使用watch 实现时间侦听

　　　　

　　　　　　wtach 监视着 lastName 这个属性，当咱们修改 input 框，致使 data 中的 lastName 变化的时候，触发了 watch，执行对应的逻辑。