Vue 101-Day 4

每個Vue應用程式都是藉由Vue function 建立 Vue instance(實例)開始的

語法

const vm = new Vue ({
    el: '#app',
    data: { a: 1 },
    watch: {
        a: function(newVal, oldVal) {
            console.log('new: %s, old: %s', newVal, oldVal);
        }
    }
})

當instance的資料值改變，畫面會重新渲染。

但是只有再instance 建立時存在於data屬性裡面才會被偵測，可以參考如下範例

vm.b = 2 // 這樣並不會重新渲染畫面

也有一個狀況也不會重新渲染畫面，使用Object.freeze();

<div id="app">
  <p>{{ foo }}</p>
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

const data = { a: 1 };

Object.freeze(obj);

const vm = new Vue ({
    el: '#app',
    data: data
})

使用Object.freeze()的data 以及非在init的時候所給的data，建立後值就不會偵測異動並渲染到畫面。

watch - 監聽資料值

實務上常常需要再某個資料值異動成某個值時執行特定function，此時就可以使用watch來監聽(跟AngularJS一樣，而且語法也差不多)

const vm = new Vue ({
    el: '#app',
    data: { a: 1 , b: 2},
    watch: {
        a: function(newVal, oldVal) {
            console.log('new: %s, old: %s', newVal, oldVal);
        },
        b: 'doMultiply'
    }
    methods: {
      doMultiply: function (param1, param2) {
        console.log(param1 * param2)
    }
})

監聽後執行的方法可以直接在屬性後type function，直接執行該方法，如同監聽屬性a 或是直接打 methodName，接著需要再methods加入相同method name才可以執行

instance lifecycle

LifeCycle

藉由官網給的圖，可以知道Vue提供一些LifeCycle提供使用者在不同時期做不同事情

beforeCreate

Vue Instance已經初始化，但是 data observation(reactivity)、event、watcher…等還沒設定完畢，因此還無法與這個instance互動。

const obj = {
  foo: 'bar'
}

new Vue({
  el: '#app-2',
  data: obj,
  beforeCreate: function () {
    //因為data observation 還沒設置，故這裡的this.foo 是 undefined
    console.log(this.foo)
    console.log('beforeCreate')
  }
})

created

Vue Instance已經初始化完畢，data observation(reactivity)、event、watcher…等也設定完畢，已經可以與這個instance互動。

const obj = {
  foo: 'bar'
}

new Vue({
  el: '#app-2',
  data: obj,
  beforeCreate: function () {
    // 因為data observation 還沒設置，故這裡的this.foo 是 undefined
    console.log(this.foo)
    console.log('beforeCreate')
  },
  created: function () {
    // data observation 設置完成，故這裡的this.foo 是 bar
    console.log(this.foo)
    console.log('created')
  },
})

beforeMount綁定DOM前; mouted綁定DOM後

下述這個範例先將Vue instance裡面的el屬性註解，所以在執行完的時候只會到created這個hooks。 5秒後執行app2.$mount('#app-2')將instance render到DOM上。

const obj = {
  foo: 'bar'
}

var app2 = new Vue({
  //  el: '#app-2',
  data: obj,
  watch: {
    foo: 'doMultiply'
  },
  methods: {
    doMultiply: function (param1, param2) {
      console.log(param1 * param2)
    }
  },
  beforeCreate: function () {
    console.log('beforeCreate')
  },
  created: function () {
    console.log('created')
  },
  beforeMount: function () {
    // 綁定 DOM 之前
    console.log('beforeMount')
  },
  mounted: function () {
    // 綁定 DOM 之後
    console.log('mounted')
  }
})

setTimeout(() => {
  app2.$mount('#app-2')
}, 5000)

beforeUpdate 尚未更新到DOM; updated 已經更新至DOM

下述這個範例會在5秒後執行 app2.foo = ‘barzzzz’，此時在beforeUpdate、updated 這兩個hooks已經是拿到更新後的foo值，差別在於是否已經更新至DOM。

const obj = {
  foo: 'bar'
}

var app2 = new Vue({
  el: '#app-2',
  data: obj,
  watch: {
    foo: 'doMultiply'
  },
  methods: {
    doMultiply: function (param1, param2) {
      console.log(param1 * param2)
    }
  },
  beforeCreate: function () {
    console.log('beforeCreate')
  },
  created: function () {
    console.log('created')
  },
  beforeMount: function () {
    console.log('beforeMount')
  },
  mounted: function () {
    console.log('mounted')
  },
  beforeUpdate: function () {
    // 資料更新，但尚未更新 DOM
    console.log(this.foo) // barzzzz
    console.log('beforeUpdate')
  },
  updated: function () {
    // 資料更新，DOM也已經更新
    console.log(this.foo) // barzzzz
    console.log('updated')
  },
})

setTimeout(() => {
  app2.foo = 'barzzzz'
}, 5000)

beforeDestroy 移除之前; destroyed 已經移除

下面範例中5秒後會執行app2.$destroy()消除Vue instance，執行完後Vue instance會解除綁定(unbound)，所有的event、listener都會被移除。

const obj = {
  foo: 'bar'
}

var app2 = new Vue({
  el: '#app-2',
  data: obj,
  watch: {
    foo: 'doMultiply'
  },
  methods: {
    doMultiply: function (param1, param2) {
      console.log(param1 * param2)
    }
  },
  beforeCreate: function () {
    console.log('beforeCreate')
  },
  created: function () {
    console.log('created')
  },
  beforeMount: function () {
    console.log('beforeMount')
  },
  mounted: function () {
    console.log('mounted')
  },
  beforeUpdate: function () {
    console.log('beforeUpdate')
  },
  updated: function () {
    console.log('updated')
  },
  beforeDestroy: function () {
    console.log('beforeDestroy')
  },
  destroyed: function () {
    console.log('destroyed')
  }
})

setTimeout(() => {
  app2.$destroy()
}, 5000)

參考資料：

Coding Diary

語法