<template>
<div>
<p>使用computed {{ message }}</p>
<p>使用methods {{ message() }}</p>
</div>
</template>
<!-- 簡略代碼 -->
<script>
data () {
return {
message: '我是message'
}
}
computed: {
message: function () {
return this.message
}
},
methods: {
message() {
return this.message
}
},
watch: {
firstName: function (val) {
this.fullName = val ;
}
}
</script>
- 首先最明顯的不同就是 methods 調用的時候要加()。
- computed 的執行基於它的依賴緩存,只有相關依賴發生變化的纔會重新取值。
- 使用 methods ,在重新渲染的時候,函數總會重新調用執行,也就是說,methods是實時的,在重新渲染時,函數總會重新調用執行,不會緩存
- watch 用於觀察和監聽 Vue 實例,watch爲一個對象,鍵是需要觀察的表達式,值是對應回調函數。值也可以是方法名,或者包含選項的對象。