Vue中computed 计算机属性、getter、setter

计算属性

在模板表达式中放入太多逻辑时，会让模板重且难以维护。比如：

// 错误示例
<div id="example">
  {
   {
    message.split('').reverse().join('') }}
</div>

应该声明一个计算属性，该计算属性不用挂载到Vue实例的data上，而是在Vue实例中的computed上。程序员编写的函数将作用与 property.vm.reversedMessage 的 getter函数

具体看https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7

计算属性缓存 VS 方法

1. 相同点：同一个函数定义为方法或计算属性，两种方式的最终结果完全相同。
2. 不同点：计算属性是基于它们的响应式依赖进行缓存的。

具体看https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7

计算属性 VS 侦听属性

1. 当有些数据需要随着其他数据变动而变动时，可以使用侦听属性。

计算属性的getter、setter

1. computed 的属性可以被视为是 data 一样，可以 getter（读取）和 setter（设值），默认情况下 computed 预设只有 getter , 只能读取，不能改变设值。

// VUE.js 计算属性默认只有 getter, 因为是默认值所以我们也常常省略不写，如下代码：
computed: {
    fullName: function () {
    return this.firstName + ' ' + this.lastName } }

// computed 里的代码完整的写法应该是：
 computed: {
    fullName: {
    get(){
    return this.firstName + ' ' + this.lastName } } }

getter的触发时间

<template>
    <div id="demo">
         <p>