Vue中computed與methods的區(qū)別詳解
更新時間：2018年03月24日 16:18:12 作者：木子昭
這篇文章主要介紹了Vue中computed與methods的區(qū)別詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Vue中computed可以用來簡單的拼接需要展示的數據
computed and methods
拼接展示數據的任務, 也可以用methods完成, 但當頁面的數據變化時, methods中的方法會被重新調用(產生不必要的性能消耗), 而methods內的方法只有和自身有關的數據變化時才會被調用
一個簡單的實例
computed只在初始化時被調用
computed只在初始化時被調用
methods會在數據變化時被調用, 即使變動的數據與自身無關
測試源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>computed的使用</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="root">
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
name: "zhaozhao",
age: 13,
hobby: 'Python',
nameAgeStyle: {
fontSize: "20px",
color: "#0c8ac5"
}
},
template: `<div>
<div v-bind:style="nameAgeStyle">computed方式渲染: {{nameAndAge}}</div>
<div v-bind:style="nameAgeStyle">methods 方式渲染: {{getNameAndAge()}}</div>
<br>
<input type="text" v-model="hobby">
<div>愛好: {{hobby}}</div>
<div>{{noUse()}}</div>
</div>`,
computed: {
nameAndAge: {
get(){
console.log('調用computed');
return `${this.name} ==> ${this.age}`;
}
}
},
methods: {
getNameAndAge() {
console.log('調用methods');
return `${this.name} ==> ${this.age}`;
},
noUse(){
console.log("=methods==nouse==");
}
}
})
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue中的methods、computed計算屬性和watch監(jiān)聽屬性的使用和區(qū)別解析
- vue中的data,computed,methods,created,mounted用法及說明
- Vue中computed屬性和watch,methods的區(qū)別
- 關于Vue的 watch、computed和methods的區(qū)別匯總
- vue.js中methods watch和computed的區(qū)別示例詳解
- Vue.js計算機屬性computed和methods方法詳解
- Vue中computed、methods與watch的區(qū)別總結
- Vue中的methods、watch、computed的區(qū)別
- 深入淺析Vue.js中 computed和methods不同機制
- 淺析Vue中method與computed的區(qū)別
- vue中計算屬性（computed）、methods和watched之間的區(qū)別
- vue中計算屬性computed和普通屬性method的區(qū)別小結
相關文章
解決elementui中NavMenu導航菜單高亮問題(解決多種情況)
這篇文章主要介紹了解決elementui中NavMenu?導航菜單高亮問題(解決多種情況)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
今天小編就為大家分享一篇解決vue.js提交數組時出現數組下標的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本篇文章主要介紹了vue 2.0封裝model組件的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
vue用Object.defineProperty手寫一個簡單的雙向綁定的示例
這篇文章主要介紹了用Object.defineProperty手寫一個簡單的雙向綁定的示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
關于Element上傳組件beforeUpload上傳前限制失效問題
這篇文章主要介紹了Element上傳組件beforeUpload上傳前限制失效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家介紹了buildAdmin開源項目引入四種圖標方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要為大家詳細介紹了vue+element-ui實現頭部導航欄組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3生命周期Hooks原理與調度器Scheduler關系
這篇文章主要為大家介紹了Vue3生命周期Hooks原理與調度器Scheduler關系詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
在Vue3中可以使用`ref`來獲取DOM元素,下面這篇文章主要給大家介紹了關于如何在Vue3中使用Ref訪問DOM元素的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
Vue Element前端應用開發(fā)之echarts圖表
在我們做應用系統的時候，往往都會涉及圖表的展示，綜合的圖表展示能夠給客戶帶來視覺的享受和數據直觀體驗，同時也是增強客戶認同感的舉措之一2021-05-05