前言：一直在看vue代码，对于vue的选项/数据一直不是很理解。现在进行简单的总结下（官方解释很好，进行归纳）。
data
Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据变化。data必须只能是数据。实例创建之后，可以通过vm.data.a
props
props可以使数组或对象，用于接收来自父组件的数据。porps可以使简单的数组，或者使用对象作为代替，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
示例：
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
// 对象语法，提供验证
Vue.component('props-demo-advanced', {
props: {
// 检测类型
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
props写在子组件之中，里面存放的是父组件传递过来的数据。在父组件中，通过import导入子组件进行使用，在<子组件名 v-bind:子组件props中的属性="父组件中的数据">。这样子组件中props中的属性就得到了父组件传递过来的数据。
Vuex与props和data的区别：
Vuex是为了保存组件之间共享数据而诞生的，如果组件之间有共享的数据，可以直接挂载到Vuex中，而不必通过父子组件之间传值了，如果组件的数据不需要共享，此时，这些不需要共享的私有数据，没有必要放到vuex中；
1）只有共享的数据，才有权利放到Vuex中；
2）组件内部私有的数据，只要放倒组件的data中即可；
3）Vuex是一个全局的共享数据存储区域，相当于一个数据的仓库
computed
计算属性将混入到Vue实例中。所有getter和setter的this上下文自动地绑定Vue实例。计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
methods
methods将被混入到Vue实例中。可以直接通过VM实例访问这些方法，或者在指令表达式中使用。方法中的this自动绑定为Vue实例。
watch
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以使方法名，或者包含选项的对象。Vue实例将会在实例化时调用$watch()，遍历watch对象的每一个属性。
computed 与 methods 的区别
1.computed定义的方法我们是以属性访问的形式调用的。computed依赖于data中的数据，只有在它的相关依赖数据发生改变时才会重新求值。
2.methods定义的方法是以函数的形式调用的。
computed 与 watch 的区别
1.computed特性：
1.1是计算值，
1.2应用：简化tempalte里面{{}}计算和处理props或$emit的传值
1.3具有缓存性：页面重新渲染值不变化，计算属性会立即返回之前的计算结果，而不必再次执行函数
2.watch特性：
2.1是观察动作
2.2应用：监听props和emit或本组件的值执行异步操作
2.3无缓存性：页面重新渲染时值不变化也会执行
网友评论