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:,
month:
}
}
运行以上代码，页面会在#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: ,
month:
}
},
computed: {
birth () {
return this.year + "." +this.month
}
}
注意，computed里的birth()与data里的数据不要重名，否则得不到结果
看到这，有的伙伴可能会想，用methods也可实现这个功能啊
从效果上来看确实一样，但是computed是基于依赖而进行缓存的
只要year和month不变化，birth属性会立即返回结果
而methods每次调用都会再执行一遍函数。
使用computed的好处在于，如果要遍历一个数据量较大的数据，只需要执行一次就可以调用缓存结果了
总结：computed基于依赖而缓存，可用于大体量数据的计算与调用以提高性能