Vue 語法補充介紹（computed, watch…）

computed

1. 當監控的資料變動時會被觸發
2. 一般不會拿來修改資料，而是處理( 排序、篩選 )將其呈現

同樣被叫兩次，computed 只有執行一次( 有緩存 )

以下範例，可以看到 computed 沒有依賴任何資料

<div id="app">
  <p>message：${ message }</p>
  <p>now (computed)：${ now }</p>
  <p>getNow (method)：${ getNow() }</p>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    message: 'Hello World!',
  },
  computed: {
    now: function() {
      return Date.now();
    },
  },
  methods: {
    getNow: function() {
      return Date.now();
    },
  },
});

watch

利用 watch 監聽 router 的 params，如果有變化的話觸發 ajax

因為此範例每個區域都是使用相同元件，切換網址後，會重新利用 DOM ，所以生命週期不會被觸發。

Reacting to Param Changes - A Vue.js Lesson From our Vue.js...