vue中的数据相关属性不够简单，而且相同实现还能互相转化，有时也拿不准该用哪种属性。接下来，本文将整理一下各种数据相关属性的使用场景及限制，供使用vue的初学者参考。
首先，整理一下数据相关属性有：
data
v-model
computed
props
watch
data
data属性是vue中最简单的数据属性，代表这个vue实例的一项数据，其定义方式如下：
const app = new Vue({
data: {
message: '...',
}
})其引用方式如下：
app.message = '...'
// 或者在template中，如：绑定到title属性上
// 也可用{{}}在模板中实现数据绑定
{{ message }}注意一下，Vue组件定义时，data必须是function：
const Component = Vue.extend({
data: function () {
return { a: 1 }
}
})v-model
v-model可以在表单控件或组件上建立双向绑定关系，本质上是一项语法糖，与data属性配合使用。
实现双向绑定的定义方法如下：
// 定义方法，组件与表单控件相同
这只是一个语法糖，本质上是绑定了input控件的value属性与input事件。
// 表单控件中v-model的本质实现
而组件中的本质实现如下：
// 自定义组件中v-model的本质实现
可见，v-model在自定义组件中的使用将会自动绑定上input事件，自定义组件在检测到value改变时，可以触发input事件：this.$emit('input', newValue) 将value的改变传递到父组件的something属性中。
computed
计算属性，用于在模板中绑定复杂的逻辑，当依赖的属性改变时该计算属性也随之改变。
定义方法：
const app = new Vue({
computed: {
reversedMessage() {
return ...
}
}
})计算属性的特性“当依赖的属性改变时该计算属性也随之改变”，也可以由函数的方式来实现。函数方式实现的代码如下所示：
const app = new Vue({
methods: {
reversedMessage() {
return ...
}
}
})
{{ reversedMessage() }}两种方式结果虽相同，但计算属性是基于依赖缓存，只有在它的相关依赖发生改变时才会重新取值，而不必每次都执行函数更新属性值。
计算属性的引用方法同data属性，可作为模板中数据绑定也可绑定为组件属性，此处不再累述。
props
props用于父组件向子组件中传递数据，其在组件中定义与使用方法如下：
Vue.component('child', {
props: ['myMessage'],
})
注意：props中驼峰命名法而在组件属性中是短横线命名法。
watch
watch用于观察属性发送变化后，做额外处理。
与computed属性的差别在于作用对象不同，watch观察变化的源头，而computed属性是变化的目标，当然，两者可以互相转换。两者如何取舍在于：变化的源与目标哪部分的属性更多，如果多个源属性变化影响一个目标属性则建议使用computed；相反，如一个源属性变化影响了多个目标属性，则建议采用watch。
如欲实现由first name和last name组合一起的full name，可由watch实现：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})而用computed属性实现，则更精简一些：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
}) 总结
Vue中数据相关属性众多，确实让初学者一时不知该如何选择。通过本文，我们可以知道每个属性被设计出来的目的、使用场景，及特性甚至更深层的实现原理，如此便可应对大部分选择属性的情形。