當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue 中computed 与 methods 区别

發布時間：2023/12/2 vue 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue 中computed 与 methods 区别小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、示例

<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>computed 與 methods 區別 </title></head><body><div id="root"><input type="text" v-model="message"><p>{{ message }}</p><p>{{ now1 }}</p><p>{{ now2() }}</p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#root',data: {message: ''},computed: {now1: function() {return Date.now();}},methods: {now2: function() {return Date.now();}}});</script></body></html>

說明：當頁面中的message發生變化，重新渲染時now1 會不變，now2會改變。

即:

計算屬性只有在它的相關依賴發生改變時才會重新求值。

每當觸發重新渲染時，調用方法將總會再次執行函數。

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的Vue 中computed 与 methods 区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。