ffbli ~ 奮鬥吧！攻城師: [JavaScript] Vue.js 初探一些要注意的地方

此文件有可能因為時間的演進而與現況不合， Vue.js 正在演進中
目前記錄自己在寫時，碰到一些要注意的地方

1. 不支援巢狀 (nested)

這裡指的巢狀是指 Vue instance 內再包含 Vue instance
雖然 Vue 不會報錯，但是行為會怪怪的。
比較好的做法是 children 是使用 Vue.componet 包起來，這點跟 React 比較接近。

2. methods 的 function name 和 data 的 data name 是共用的
例如下列情況，有可能 foo function 呼叫不到，被 foo data 覆蓋了

data: {
    foo:''
}, 
method:{
      foo:function(){}
}

3. 如果 data binding 的資料為 array 需要注意

(Ref：http://cn.vuejs.org/guide/list.html#问题)

直接用索引操作，像 vm.items[0] = {msg:"hellow"};
Vue 有對 array 新增 $set() 的method 來操作

例如：this.items.$set(0, {msg:"hello"});
直接對 array 長度修改 (0為清空)
如 vm.items.leangth = 0; 會建議使用 vm.items = []; 方式操作

另外也有對 array 新增 $remove() 的 method
該方法行為如下

var index = this.items.indexOf(item)
if (index !== -1) {
    this.items.splice(index, 1)
}

4. v-html (等同 innerHTML) 預設不會過濾 xss

建議直接用 {{variable}} or v-text (等同 textContent)方式設置

5. Vue.extend()

帶進的 options 大多都跟 Vue instance 相同 (平常使用的 Vue() )

除了 data 和 el 這兩個 options

例如以下例子，MyComponet1 和 MyComponet2 會共用 data，這應該不是我們平常想做的

var data = { a: 1 }
var MyComponent1 = Vue.extend({
    data: data
})
var MyComponent2 = Vue.extend({
    data: data
})

建議做法如下，這樣 data 內的值在每個 Componet 會獨立

var MyComponent = Vue.extend({
    data: function () {
        return { a: 1 }
    }
})

6. Vue.componet 的 prop

prop 概念基本上跟 React 差不多，在 Vue 預設是單向的

但可以用關鍵字

.sync 強迫雙向，這表示 children componet 如果修改該 prop 的值，parent 也會更新

.once 只綁定一次，之後不管改 parent 或是 children 都不會變化

另外目前還有一點問題，是如果 prop 是 array or object 會變成雙向的

7. 如果想要當成一個完整 Web Componet (Vue.componet)，直接由 Parent 像一般 HTML 元件向 children 取值

可以使用 v-ref 來設定 componet 別名

<div id="parent">
  <user-profile v-ref:profile></user-profile>
</div>

在 parent 時，可以如下方式呼叫 children 的 method

this.$refs.profile.method()

實際上如果不用 v-ref，Vue 自動也會在 this.$children 內 Reference 他的子元件

但比較麻煩的是，children 是個 array 不容易直接判斷你要取某個 Componet (需要回圈)

在 children 也有 this.$parent 去呼叫 parent 的 method

8. vue-validator 還在 Alpha 所以會有一些問題

所以目前蠻多要自己實作的，沒有 angular 那麼多已完成，可以用的

我使用 2.0.0-alpha.6 基本功能上上 required valid 的行為都是正常的

不過 Vue.validator 這個因為有 bug 而無法使用
但換到最新版 2.0.0-alpha.8 基本功能上就 valid 就壞了，還沒深入了解
是我寫法錯誤還是 bug ，至少寫法沿用 alpha 6 是會有錯誤發生

ffbli ~ 奮鬥吧！攻城師