前言

本系列將介紹 Rails with Vue 的基本概念，並且以一個簡單的專案 Todo 來說明如何使用 Rails with Vue。我將透過這一系列的文章記錄我學習的過程，並且將我所學到的知識分享給大家。

• 【Day 01】淺入淺出 Rails with Vue - Before We Begin
• 【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1
• 【Day 03】淺入淺出 Rails with Vue - Vue 的基本概念 - 2

Vue Instance

每一個 Vue application 都是從建立一個 Vue instance 開始的。Vue instance 是一個 Vue 的根實例，它負責控制整個 Vue application。
當你建立一個 Vue instance 時，你需要傳入一個選項物件，這個選項物件可以包含資料、模板、生命週期的方法、事件等等。

var vm = new Vue({
  // options
})

All Vue components are also Vue instances

Options - data usage

當一個 Vue instance 被建立時，它會將 data 物件中的所有的 property 加入到 Vue 的 reactivity system 中。當這些 property 的值發生變化時，畫面上相對應的地方也會被更新。

// Our data object
var data = { a: 1 }

// The object is added to a Vue instance
var vm = new Vue({
  data: data
})

// Getting the property on the instance
// returns the one from the original data
vm.a == data.a // => true

// Setting the property on the instance
// also affects the original data
vm.a = 2
data.a // => 2

// ... and vice-versa
data.a = 3
vm.a // => 3

Options - data availability

值得注意的是，在 data 中的 properties 只有在建立 Vue instance 時才會被加入到 reactivity system 中，之後再新增的 properties 就不會被加入到 reactivity system 中了。

例如我們嘗試在 Vue instance 建立後再新增一個 property b 到 data 中，並且將它的值設為 hi，當我們在畫面上顯示 {{ b }} 時，畫面上並不會顯示 hi。

vm.b = 'hi'

Options - data default value

為了避免 data unavailability 的問題，我們可以在 data 中設定一個 default value，這樣當我們在 Vue instance 建立後再新增一個 property 到 data 中時，它的值就會是 default value。

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

Options - data freeze

如果你不想要讓使用者修改 data 中的 property，你可以使用 Object.freeze() 來將 data 中的 property freeze 起來。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

<div id="app">
  <p>{{ foo }}</p>
  <!-- this will no longer update `foo`! -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

如此一來，當我們在畫面上點擊 Change it 按鈕時，畫面上的 foo 並不會被更新。

Vue instance properties and methods

Vue instance 本身也提供了 properties 和 methods 使用，為了區別這些 properties 和 methods 與 data 中的 properties 和 methods，我們可以在 data 中的 properties 和 methods 前面加上 $ 符號。

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch is an instance method
vm.$watch('a', function (newValue, oldValue) {
  // This callback will be called when `vm.a` changes
})

Reference

• https://v2.vuejs.org/v2/guide/instance.html