前言
官方文档部分传送门：https://cn.vuejs.org/v2/guide/instance.html
实例的创建
使用new Vue({...})即可创建一个Vue实例。
其中向构造函数传递的是一个对象。
它拥有的属性有：
- data
- methods
- computed
data
添加Vue实例拥有的数据。会检测data中值的变化而更新页面显示。
使用方法
创建实例中使用
var vm = new Vue({
data: data
})
如果使用对象传入，使用Object.freeze()后会无法检测到值的改变。
模板结构中使用
new Vue({
el: '#app',
data: {
text: '测试'
}
})
对应着在模板结构中使用：
<div id="app">
<p>{{ text }}</p>
</div>
{{}}的形式成为Mustache写法，里面写的是JavaScript表达式，显示这个表达式的运算结果。
一般情况下，在模板中使用是写成函数的模式，因为模板一般都是当成组件要被复用的，为了能让每个组件都有独立的数据， 所以对应每个返回一个新的对象：
data () {
return {
text: '测试'
}
}
在JS中引用
new Vue({
el: '#app',
data: {
text: '测试'
}
})
如果我们要在Vue实例中使用text，调用this.text即可。
如果是在创建实例的其他JS部分使用text，调用就必须先给这个实例一个变量名，然后直接变量名.数据名就可以调用，这样等同于变量名.$data.数据名。
疑问记录区
Q：这里的$data的$是什么呢？
A：Vue实例暴露了一些属性与方法，它们都有前缀$，这样可以与用户定义的属性区分。例如：$data、$el、$watch。
更多传送门：https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B%E5%B1%9E%E6%80%A7
Q：为什么可以省略这个data来获取这个值？
A：
computed
故名思意，叫做计算属性。在模板中我们可以在{{}}中直接写入表达式，但是从长远看来这样不好维护。
使用方法
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
可以看到这个例子如果直接嵌入模板中就是{{ message.split('').reverse().join('') }}，这里写为计算属性，对应了一个函数，值就是返回值。
在模板中使用也和data完全一样，可以直接调用vm.reversedMessage，因为依赖于message，所以message改变的话，它也会改变。
疑问记录区
Q：computed和data的不同之处？
A：计算属性默认情况下只有getter，也就是只读。data的数据读取不到data里面其他的数据，所以它不能根据原有的某个动态数据去做一些处理。
Q：computed和methods的不同之处？
A：计算属性只有在它的相关依赖发生改变时才会重新求值，而methods在每次重新渲染的时候都会重新计算。
watch
中文名叫做侦听器，在数据变化时执行异步/开销较大的操作时推荐使用，即可能要进行某个复杂的处理。
使用方法
写法和computed类似，也是一个对象，里面包含了目标属性，以及属性对应的函数。
watch: {
question: function (newQuestion, oldQuestion) {
this.answer = '等待输入完毕...'
this.getAnswer()
}
}
比如这个例子，如果question的内容发生了改变，它对应的这个函数就会执行。
Q：computed和watch的不同之处？
A：1. 光从写法来看，如果一个值由多个变量影响，那么不适合用watch去监听这些变量然后改变这个值，因为这样会有重复的代码。2. 从它出现的意义来看，watch最好是进行一些操作，computed就是简化表达式处理后的数据显示的。3. watch支持执行异步操作 (访问一个 API)，也支持得到最终结果前，设置中间状态，计算属性不能做到。
methods
意思是方法，也就类似于我们的方法成员。
使用方法
定义
也和computed和watch类似，一个对象里写下所有的成员和对应的函数。
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
调用
组件内调用：`this.reversedMessage()``
