在計算屬性的函式中,不能使用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的例項 其次就是如何觸發傳值 ...