Vue學習筆記 2

2022-01-19 14:05:12 字數 2870 閱讀 1595

在計算屬性的函式中,不能使用vue建構函式返回的vm變數,因為此時vm還未返回,依然處於vue內部建構函式過程中,遂只能使用this來代替vm。

若要使用typescript,可使用以下方法來實現**智慧型感知

vm = vm || this;
另:其他不能用vm變數,只能使用this變數的地方,都可以通過此方法來獲得typescript的智慧型感知和**語法檢查,比如mounted生命週期系列函式等。

不過模板裡的vm引用typescript無能為力,只能等待ts支援vue的jsx語法了╮(╯_╰)╭

計算屬性必須引用(依賴)非計算屬性或固定值。(見demo1)

計算屬性若引用(依賴)其他計算屬性,則被引用的計算屬性必須引用非計算屬性或固定值(見demo2)

計算屬性可迴圈依賴,但最終依賴鏈上的最上游的計算屬性,必須引用非計算屬性或固定值。

demo1:官方標準用法,計算屬性引用非計算屬性:

var vm = new vue(,

computed:

}});

demo2:計算屬性鏈式依賴其他計算屬性,則依賴鏈頭必須引用非計算屬性或固定值

var vm = new vue(,

computed: ,

computedval2: function ()

}});

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

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

vue版本為2.0版本,1.0無此問題。

使用元件巢狀,在父元件的模板中訪問$children變數

在渲染完成後沒有再將$children變數寫入過父元件的data變數(或其他vm資料)

就會觸發此問題。

//子元件**

vue.component("child", );

//父元件宣告

new vue();

如下圖:

註冊父元件的mounted方法,執行$forceupdate()

vue.component("child", );

new vue(

});$children正確了:

註冊父元件的mounted方法,將$children賦值給自定義的vm的變數。

同時模板中使用自定義的變數來代替預設的$children

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

此問題關聯上面第3個問題。

觸發此問題的前提:

vue2.0版本

父元件和子元件都直接寫在呼叫方模板中

在模板中訪問$children變數

已經解決在上述問題3中強制重新整理的問題

復現**:

//父元件

vue.component("parent", }

",//模板中無slot元素

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

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

此方法雖然可以解決問題,但是有時我們直接把子元件寫在呼叫方會更方便更利於理解,比如tab與tabpage元件。

如下tab元件**,可能更符合一般人的使用思維:

page2

page3

vue學習筆記-1(

vue學習筆記-2(

Vue學習筆記 2

一 條件渲染 v if 一種依據條件,判斷是否渲染元素的屬性。具有控制元素是否顯示的能力 可與v else if即v else並用,使用方法與其他程式語言中類似。key屬性在v if中的應用 由於vue是惰性的,即載入過一次的相同元件不會重複載入,這對於if條件改變的某些情況會不符合常理。即if與e...

VUE學習筆記2

一 安裝vue腳手架的常用外掛程式 axios 前後端聯調外掛程式 mockjs 模擬後端外掛程式 element ui 元件庫,統一風格的按鈕 彈框等 vuex 狀態管理工具,可理解為管理全域性變數 配置檔案的說明鏈結可參考 實際工程配置時主要關注發布路徑 靜態檔案儲存路徑設定 後端聯調相應配置,...

vue學習筆記2

1,非父子元件間的傳值 1,非父子元件之間的傳值有兩種方法.方法一 用vuex比較難.方法二 利用bus 匯流排 觀察者模式 發布訂閱模式 2,bus的使用.首先vue.prototype.bus new vue 意思是給vue的原型物件新增bus屬性,且bus是vue的例項 其次就是如何觸發傳值 ...