vue--简化项目逻辑属性

computed属性对数据变化是实时响应的

因此当项目中某个数值发生变化，并且要在别的地方引用这个数值时，computed即可派上用场

来看一个例子：

html部分：

<div id="nieo">
    <input type="" v-model="year">
    <input type="" v-model="month">
    <div id="birth">出生于{{year}}年{{month}}月</div>
</div>

js部分

 data() {
     return {
         year:1988,
         month:7
     }
 }

运行以上代码，页面会在#birth中渲染出data中的数据，改变输入框里的值，#birth也会实时更改，这是没毛病的

惟一的问题是，在vue里，各部分内容要各司其值，不要越位

我们需要简化html里的代码，不要被太多的逻辑运算而污染，逻辑的内容要统统收纳到js里

这样我们看着舒服，也容易理解，不会杂乱无章

这个出生年月是完全依赖year和month，如果他们中的一个或者全部变化了，全名也会随之而变化

这个前提条件符合我们对computed属性的定义

所以接下来我们应用computed来编写代码：

html部分：

<div id="nieo">
    <input type="" v-model="year">
    <input type="" v-model="month">
    <div id="birth">出生年月：{{birth}}</div>
</div>

js部分：

data() {
    return {
        year: 1988,
        month: 7
    }
},
computed: {
    birth () {
        return this.year + "." +this.month
    }
}

注意，computed里的birth()与data里的数据不要重名，否则得不到结果

看到这，有的伙伴可能会想，用methods也可实现这个功能啊

从效果上来看确实一样，但是computed是基于依赖而进行缓存的

只要year和month不变化，birth属性会立即返回结果

而methods每次调用都会再执行一遍函数。

使用computed的好处在于，如果要遍历一个数据量较大的数据，只需要执行一次就可以调用缓存结果了

总结：computed基于依赖而缓存，可用于大体量数据的计算与调用以提高性能

原文链接：https://mp.weixin.qq.com/s/amx5CAMCNbT7D2ZC3Y1U3A