一、数据
API：https://cn.vuejs.org/v2/api/#选项-数据
1. data
类型：Object | Function
限制：组件的定义只接受 function
详细：Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，
Vue.js 是一款流行的前端框架，它的核心特性之一是声明式数据绑定。在创建Vue实例时，我们可以使用多种选项来配置实例的行为和响应性。本文将深入解析Vue实例的几个主要选项，包括`data`、`computed`、`methods`、`watch`以及`props`。
1. **data**:
`data` 选项用于定义Vue实例的数据对象。它必须是一个函数，以确保每个组件实例拥有独立的数据副本，避免共享同一数据对象。在创建实例时，Vue会将`data`中的属性转换成getter和setter，实现数据的响应性。例如：
```javascript
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
})
```
如果`data`是一个纯对象，所有实例将共享相同的数据，这通常不是我们想要的结果。
2. **computed**:
计算属性用于创建基于其他响应式属性的派生属性。它们具有缓存机制，只有当依赖的属性发生变化时，计算属性才会重新计算。计算属性可以有getter和setter，如下所示：
```javascript
var vm = new Vue({
data: { a: 1 },
computed: {
aDouble: function () { return this.a * 2 },
aPlus: {
get: function () { return this.a + 1 },
set: function (v) { this.a = v - 1 }
}
}
})
```
这里，`aDouble`是只读的，而`aPlus`可以读写。
3. **methods**:
`methods`选项用于定义实例上的方法。这些方法可以直接在实例上调用，或在模板中使用。方法内部的`this`自动指向Vue实例。例如：
```javascript
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () { this.a++ }
}
})
```
调用`vm.plus()`会增加`a`的值。
4. **watch**:
`watch`用于监听数据变化并执行相应操作。它可以是一个对象，键是需要观察的表达式，值是对应的回调函数或配置对象。例如：
```javascript
var vm = new Vue({
data: { a: 1 },
watch: {
a: function (newVal, oldVal) { console.log('a changed:', newVal) }
}
})
```
当`a`的值改变时，对应的回调会被调用。
5. **props**:
`props`用于接收父组件传递的数据。可以是数组或对象，提供数据类型检测、默认值和验证功能。例如：
```javascript
var Child = {
props: {
msg: {
type: String,
default: 'hello',
validator: function (value) {
return typeof value === 'string' && value.length > 0
}
}
}
}
```
在这个例子中，`msg` prop 必须是字符串，且长度大于0，否则会在非生产环境中发出警告。
总结，Vue实例的这些选项是构建可复用、响应式组件的基础，它们使得数据处理和交互变得简单高效。了解并熟练运用这些选项，能够帮助开发者构建出功能丰富的前端应用。
