Vue 中 computed、methods 和 watch 的區別

	<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爲一個對象,鍵是需要觀察的表達式,值是對應回調函數。值也可以是方法名,或者包含選項的對象。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章