vue源码不需要看,只需要做实验总结出vue框架的具体的运行机制。
工程师要习惯通过做实验获取自己想要的信息。
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
},
},
})