Vue 中computed 与 methods 区别
生活随笔
收集整理的這篇文章主要介紹了
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 区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： table 设置边框
- 下一篇： vue class绑定方式