前言

本文非vue教程，僅為學習vue過程中的個人理解與筆記，有說的不正確的地方歡迎指正討論

1、computed計算屬性函式中不能使用vm變數

在計算屬性的函式中，不能使用Vue建構函式返回的vm變數，因為此時vm還未返回，依然處於Vue內部建構函式過程中，遂只能使用this來代替vm。
若要使用typescript，可使用以下方法來實現程式碼智慧感知

vm = vm || this;

另：其他不能用vm變數，只能使用this變數的地方，都可以通過此方法來獲得Typescript的智慧感知和程式碼語法檢查，比如mounted生命週期系列函式等。
不過模板裡的vm引用Typescript無能為力，只能等待ts支援vue的jsx語法了╮(╯_╰)╭

2、計算屬性中不能引用其他計算屬性？

官方教程中沒有找到相關說明(應該是我沒找到)，從使用角度而言大致可以總結出以下結論：

1. 計算屬性必須引用（依賴）非計算屬性或固定值。（見demo1）
2. 計算屬性若引用（依賴）其他計算屬性，則被引用的計算屬性必須引用非計算屬性或固定值（見demo2）
3. 計算屬性可迴圈依賴，但最終依賴鏈上的最上游的計算屬性，必須引用非計算屬性或固定值。

DEMO1：官方標準用法，計算屬性引用非計算屬性：

var vm = new Vue({
    el: "#app",
    data: {
        dataVal: "xxcanghai"
    },
    computed: {
        computedVal1: function () {
            //標準用法，計算屬性引用非計算屬性
            return this.dataVal + "_1";//輸出 xxcanghai_1
        }
    }
});
 

DEMO2：計算屬性鏈式依賴其他計算屬性，則依賴鏈頭必須引用非計算屬性或固定值

var vm = new Vue({
    el: "#app",
    data: {
        dataVal: "xxcanghai"
    },
    computed: {
        computedVal1: function () {
            return this.dataVal + "_1";
        },
        computedVal2: function () {
            //合法，計算屬性computedVal2引用computedVal1，computedVal1再引用dataVal
            return this.computedVal1 + "_2";//輸出 xxcanghai_1_2
        }
    }
});
 

原因很容易理解，如果最終沒有引用或依賴任何非計算屬性，那麼計算屬性在計算時會陷入死迴圈。

3、vue2.0中若使用元件巢狀，則在父元件執行$forceUpdate()之前模板中$children為空陣列

觸發這個問題有以下幾個前提：

1. vue版本為2.0版本，1.0無此問題。
2. 使用元件巢狀，在父元件的模板中訪問$children變數
3. 在渲染完成後沒有再將$children變數寫入過父元件的data變數（或其他vm資料）
   就會觸發此問題。

<!--父元件HTML模板-->
<div id="app">
   <div>{{$children.length}}</div> <!--此處顯示0，應該為3-->
   <child></child>
   <child></child>
   <child></child>
</div>

//子元件程式碼
Vue.component("child", {
    template: "<div>child</div>",
});

//父元件宣告
new Vue({
    el: "#app",
});

如下圖：


解決方案1：使用$forceUpdate()

註冊父元件的mounted方法，執行$forceUpdate()

<div id="app">
   <div>{{$children.length}}</div>
   <child></child>
   <child></child>
   <child></child>
</div>

Vue.component("child", {
    template: "<div>child</div>",
});

new Vue({
    el: "#app",
    mounted: function () {
        this.$forceUpdate();//強制重新繪製
    }
});

$children正確了：


解決方案2：使用vm的變數代替$children

註冊父元件的mounted方法，將$children賦值給自定義的vm的變數。
同時模板中使用自定義的變數來代替預設的$children

<div id="app">
   <div>{{child.length}}</div> <!--使用自定義的child物件-->
   <child></child>
   <child></child>
   <child></child>
</div>

Vue.component("child", {
    template: "<div>child</div>",
});

var vm = new Vue({
    el: "#app",
    data: {
        child: []
    },
    mounted: function () {
        this.child = this.$children;//手動將$children物件賦值給自定義child變數
    }
});



至於導致此問題的原因只能通過閱讀vue2.0版本的原始碼才能瞭解了。

4、若父元件的template或render函式中無引用slot元素，則$children恆等於空陣列

此問題關聯上面第3個問題。
觸發此問題的前提：

1. vue2.0版本
2. 父元件和子元件都直接寫在呼叫方模板中
3. 在模板中訪問$children變數
4. 已經解決在上述問題3中強制重新整理的問題

復現程式碼：

<div id="app">
    <!--子元件直接寫在呼叫方的模板中-->
   <parent>
       <child></child>
       <child></child>
       <child></child>
   </parent>
</div>

//父元件
Vue.component("parent", {
    template: "<p>parent child:{{$children.length}} </p>",//模板中無slot元素
    mounted(){
        this.$forceUpdate();
    }
});
Vue.component("child", {
    template: "<div>child</div>"
});

var vm = new Vue({
    el: "#app"
});



解決方案1:父元件模板包含slot元素

在父元件的模板中加入slot元素。或在render函式中引用了this.$slots.default變數

Vue.component("parent", {
    template: "<p>parent child:{{$children.length}} <slot></slot></p>",
    mounted(){
        this.$forceUpdate();
    }
});



解決方案2：在父元件模板中編寫子元件定義

此解決方案要修改此問題的復現第2要素，即子元件定義從呼叫方改為寫到父元件的模板中也可解決此問題。

<div id="app">
   <parent>
   </parent>
</div>

Vue.component("parent", {
    //直接在父元件中寫明呼叫子元件標籤
    template: "<p>parent child:{{$children.length}}\
                   <child></child>\
                   <child></child>\
              </p>",
    mounted(){
        this.$forceUpdate();
    }
});
Vue.component("child", {
    template: "<div>child</div>",
});

var vm = new Vue({
    el: "#app",
    data: {
        child: []
    }
});



此方法雖然可以解決問題，但是有時我們直接把子元件寫在呼叫方會更方便更利於理解，比如Tab與TabPage元件。
如下Tab元件程式碼，可能更符合一般人的使用思維：

<div id="app">
   <tab>
       <tab-page>Page1</tab-page>
       <tab-page>Page2</tab-page>
       <tab-page>Page3</tab-page>
   </tab>
</div>

相關筆記