《跟热饭一起学习vue吧》Part.14 计算属性：computed

计算属性：computed

大家一看这个标题：

计算属性 是什么意思？不懂。

computed是什么？怎么用，放在哪？也不懂。

没关系，我第一次学习到这的时候 也不懂。所以我这里简单用土话给新人说一下，我们前面学习过 methods吧？就是用来存放各种js函数的那个vue构造器的属性之一。现在要学的这个computed和它几乎是一样的功能，一样的用法。

所以computed同样写在vue的构造其中：

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods:{}
  computed: {}
})
</script>

既然都是存放函数的，那么为什么vue作者要弄俩个呢？闲的？当然不是。这俩个虽然在肉眼看起来效果是一样的，但是实际的触发原理却不同。

methods 每次渲染刷新都会触发函数运行。

computed 则只会在检测到依赖的元素或变量发生变化时才会重新运行，其他时候都是使用缓存。

所以这么看起来，computed的性能更好，更适合运转和计算一些复杂耗时的函数。

所以我们才会这么说它:计算属性 。

属性，谁的属性？vue构造器的属性。干嘛的？专门管计算的。

那么怎么使用呢？看这个菜鸟教程的例子：

上图中，我画上了里面的数据流转路线。

在dom层里的具体标签中，用{{ 函数名 }} 的方式调用了 在computed中的对应函数，这个函数return 的值就会最终显示到 dom的元素标签内。而里面的this.message 指的就是 vue构造器的data当中的同名变量了。

computed 的特有默认属性 get子函数

computed 给自己的内部设置了一种特殊格式的管理方案：

computed: {
    site: {
      get: function () {return this.name + ' ' + this.url}
    }
  }

注意，这里的site只是这个集合的名字而已，你可以随意更改，但是内部的get 方法是固定的名字，你不能更改。

而当你这样写的时候，get就会自动运行，并返回数据给 调用了 site的元素：

 <p>{{ site }}</p>

如果你的get方法名字改成别的，那么就不会运行，只有get是自动运行的。

你可能会问，为什么要这么麻烦？我直接写个site函数里面直接return不好么？非要套这么一层干什么？

这也是我一开始疑惑的地方，但是后来我看到了它的其他用法才明白， 这个computer属性其实和data属性也是有类似功能的重合，它提供了获取功能，但是很多老手喜欢再写个修改变量的方法，也就是set。

那么这时候get和set就是一对，他们的可能都是对某个data变量进行操控，所以就干脆用个site:{} 给它们包起来.....

不过这个set要自己额外的写。

你打开我们左下角阅读原文，进入到的vue练习页面的这个例子，就可以看到这个get和set。

当然这个用法，现在我们会用，但是并不是完全理解为什么要这么麻烦，存在的意义是什么,我们用其他土办法不一样可以实现么？

这其实就是作者在发现了开发者这个频繁修改数据 获取数据的 需求后，帮你封装好的get和set，让你更简单的去完成任务。

好了本节课就到这里，怎么样，是不是感觉很简单？？？