vue.js 中 data, prop, computed, method，watch 介绍
data, prop, computed, method 的区别
| 类型 | 加载顺序 | 加载时间 | 写法 | 作用 | 备注 |
|---|---|---|---|---|---|
| prop | 1 | beforeCreated, created之间 | 对象或数组 | 接收父组件传递的值 | |
| data | 3 | 同↑ | 对象或函数 | 定义以及初始化数据 | 最好是用于视图上展示的数据，否则最好定义在外面或者vm对象内（减少开支，提高性能）；组件内只接受函数 |
| computed | 4 | 同↑ | 函数 | 提供相对简单的数据计算 | |
| method | 2 | 同↑ | 函数 | 提供相对复杂的数据计算 |
data 与 computed 的关系
根据官网的介绍，虽然模板内的表达式很方便，但是对于任何复杂的逻辑，你都应当使用计算属性。
data 只是对于你想要展示的数据的定义，但是，如果该数据需要进行复杂的处理（例如将其变为翻转字符串等），就需要计算属性的帮忙。
| 类型 | 作用 | 备注 |
|---|---|---|
| data | 定义以及展示数据 | |
| computed | 对数据进行复杂的操作转换 |
<span>{{reversedMessage}}</span>
data() {
message: '',
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
},
},computed 与 method 的区别
当然，我们可以把同一函数定义为一个方法而不是计算属性，两种方式最后的结果一样的，不同的是，计算属性是基于他们的依赖进行缓存的，只有相关依赖的值发生改变才会重新求值；而方法只要被触发就会再次执行该函数。如果你不希望有缓存，请用方法来代替。
| 类型 | 是否被缓存 | 备注 |
|---|---|---|
| computed | 是 | 只要依赖值有变化就会立马执行 |
| method | 否 | 需要绑定事件 |
method: {
reversedMessage() {
return this.message.split('').reverse().join('');
},
},computed 与 watch 的区别
在很多情况下，computed 会比 watch 使用起来更加方便，但是当需要在数据变化时执行异步或者开销比较大的情况下，用 watch 会更加合适。
例如官网提供的例子（问与答）。
watch 观察 question 的值，若值有改变会执行方法 getAnswer，并且根据 question 不同的值，answer 会给出不同的回答，并且会异步调用 API 返回相应的值，这些都是计算属性做不到的。
| 类型 | 目的 | 备注 |
|---|---|---|
| computed | 依赖变动实时更新数据 | 更新数据 |
| watch | 观察某一特定的值，执行特定的函数 | 观察数据 |
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{answer}}</p>
</div>
var watchExampleVM = new Vue({
el: "watch-example",
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!',
},
watch: {
question: function(newquestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing';
this.getAnswer();
},
},
method: {
getAnswer: _.debounce{
function() {
if (this.question.indexOf('?') === -1) {
this.answer = 'Question ususally contain a question mark -- ?';
}
this.answer = 'Thinking';
var vm = this.axios.get(XXX)
` ` ` ` ` `
},
500
},
},
})