前言

官方文档部分传送门：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()``