上一节写了Vue实例的生命周期，我们心里有了个Vue里的数据绑定至DOM，那么具体怎么实现的呢？
要实现只需要在Vue绑定的DOM元素中使用mustache语法即可，简单例子如下
<div id="app">
<h2>{{message}}</h2>
<hr>
<h3>全名：{{fullName}}</h3>
<h3>lastName：{{lastName}}</h3>
<h3>firstName：{{firstName}}</h3>
<h3>computed:{{name}}</h3>
<button @click="getFullName">点击显示全名</buuton>
</div>
<script src="./../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "hello vue",
firstName: 'keobe',
lastName: 'bryant',
fullName: '请点击按钮'
},
methods: {
getFullName(){
this.fullName = this.firstName + " " +this.lastName
}
},
computed: {
name(){
return this.firstName + " " +this.lastName
}
}
})
</script>
效果如下：
第一行：hello vue，这是data中的message变量，从这里可以看出来，这里的mustache语法，可以看做所有Vue实例挂载的DOM元素中的{{变量}}都替换成变量的值。
再分析一下Vue的实例对象，这段代码比上一篇文章中的代码在实例中多了两个对象，一个是methods，另一个就是computed。其中methods里存放的是方法，computed里存储的是计算属性。
我们在初始化Vue对象时，可以传入哪些参数呢？接下来就统一分析一下。然后一个一个的解释解释。
el ：提供一个页面上的DOM元素作为Vue实例的挂载目标，可以是选择器或者DOM实例
data ：存储响应式的数据
methods ：用于存储需要使用的方法
computed ：计算属性？？？？
components ：存放子组件对象
生命周期函数 ：存放上一节讲的各种生命周期函数
el和data上一节就讲过了，就不在复述。这里重点描述一下computed（计算属性）。细心的已经发现问题了，为什么它叫计算属性，但是在例子中确实一个方法？？？还有它到底是一个什么东西，如此的难以理解。为什么要使用它，用方法来替代不是更香吗？
为什么需要计算属性：用小白语言解释官方的标准话术就是，当模板中的数据运算太多，就会难以维护，因此引入计算属性。再简化一下就是，计算属性就是为了把一些运算封装，然后引入。哪些运算呢？比如字符翻转，大小写转化，数值相加减乘除，以及这些全部混用。当任何你觉得复杂的运算出现时，你都应该使用计算属性。
怎么使用：<h3>computed:{{name}}</h3>这一行就是使用，看上面例子应该能了解。
使用计算属性的优势：假设我们有一个性能开销比较大的计算属性 A ，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
这也完美的解释了为什么不用方法而要使用计算属性，因为计算属性会缓存。计算属性在多次调用的时候，只会执行一次，结果就会缓存，下一次调用直接使用缓存好的。而方法则是调用几次，就执行几次。
计算属性到底是什么：真实的计算属性是下面代码中的前面部分，后面部分就是我们常用的简写形式。
name: {
set: function(){},
get: function(){return 'abc'}
}
}
//简写后
computed: {
name: function(){
return 'abc'
}
}
因此<h3>computed:{{name}}</h3>中调用计算属性name时，没加小括号，实质上是返回了get方法。计算属性一般没有set方法，绝大多多多数情况下都是这样。
小作业：接下来我们用代码实现一下计算属性与方法的区别，直观的观察一下计算属性的缓存：
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
</div>
<script src="./../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Li',
lastName: 'KUN'
},
computed: {
fullName: function(){
console.log('fullName')
return this.firstName + ' '+ this.lastName
}
},
methods: {
getFullName: function (){
console.log("getFullName()")
return this.firstName + ' '+ this.lastName
}
}
})
</script>
结果如下：可以明显的看到方法执行了6次（这里打印一次，即为执行一次）。而计算属性只打印了一次，所以只执行了一次。
