前面的话
一般地，当模板内容较简单时，使用data选项配合表达式即可。涉及到复杂逻辑时，则需要用到methods、computed、watch等方法。本文将详细介绍Vue实例对象的数据选项
data
data是Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter，从而让data属性能响应数据变化
[注意]不应该对
data属性使用箭头函数
<div id="app">
{{ message }}
</div>
<script>
var values = {message: 'Hello Vue!'}
var vm = new Vue({
el: '#app',
data: values
})
console.log(vm);
</script>
Vue实例创建之后，可以通过
vm.$data访问原始数据对象
console.log(vm.$data);
Vue实例也代理了data对象上所有的属性
<script>
var values = {message: 'Hello Vue!'}
var vm = new Vue({
el: '#app',
data: values
})
console.log(vm.$data === values);//true
console.log(vm.message);//'Hello Vue!'
console.log(vm.$data.message);//'Hello Vue!'
</script>被代理的属性是响应的，也就是说值的任何改变都是触发视图的重新渲染。设置属性也会影响到原始数据，反之亦然
但是，以
_或
$开头的属性不会被Vue实例代理，因为它们可能和Vue内置的属性或方法冲突。可以使用例如
vm.$data._property的方式访问这些属性
<script>
var values = {
message: 'Hello Vue!',
_name: '小火柴'
}
var vm = new Vue({
el: '#app',
data: values
})
console.log(vm._name);//undefined
console.log(vm.$data._name);//'小火柴'
</script>computed
计算属性函数computed将被混入到Vue实例中。所有getter和setter的this上下文自动地绑定为Vue实例
[注意]不应该使用箭头函数来定义计算属性函数下面是关于computed的一个例子
<div id="example">
<p>原始字符串: "{{ message }}"</p>
<p>反向字符串: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
