vue實際工作用到的知識點

李老六發表於2018-03-14
Vue

1.檢測某個物件的屬性變化

watch:{
    'obj.name':function(){
        //進行檢測操作
    }
}
複製程式碼

2.根據屬性判斷

  在vue中利用屬性值進行某些條件的判斷時,一定要注意先判斷此屬性是否存在,否則會導致異常拋錯。

3.slot條件判斷問題

  在開發時,利用 v-if進行條件判斷 , v-if 和 v-else 條件中各有一個預設的slot標籤,依此載入外部傳入的內容和根據條件載入slot外部包裹的內容。這種寫法在development 環境下可以正常顯示v-else中內容,但是在編譯後釋出到正式環境時,v-else中內容會顯示為空白。解決方法是調整模板內容,根據條件判斷某些樣式和標籤。此處記錄一下,以後避免此種寫法。(但是仍不知道具體原因,無從查起...)

4.Vue對於物件和陣列的監測

① 由於js屬性限制,Vue無法檢測到物件屬性的新增或刪除,在陣列中直接改變陣列的長度值會改變陣列,但是不會引起Vue響應,解決辦法是利用Vue.$set()方法。 ② Vue的陣列方法push、splice、reverse等和原生Array 的方法其實並不相同,而是進行了重新封裝,僅僅對Vue內部的陣列有效。一個框架的編寫,不應過多的影響全域性,也可以防止外部資料更新影響到Vue例項內部資料。

const methods = ['push', 'pop', 'shift'];
 const arrayAugmentations = [];
 methods.forEach(method => {
   let arrFun = Array.prototype[method];
   arrayAugmentations[method] = function() {
     console.log("改變了");
     return arrFun.apply(this, arguments);
   }
 });

 let list = [1, 23, 4];
 // 將要監聽的陣列的原型指標指向上面定義的空陣列物件
 list.__proto__ = arrayAugmentations;
 list.push(99)
複製程式碼

5.Vue元件失去焦點事件

原理就是判斷當前點選的元素是否屬於當前元件 (參考連結)

created() {
   
   // 點選其他不在的區域觸發事件
   document.addEventListener('click', (e) => {
       console.log(this.$el.contains(e.target));
       if (!this.$el.contains(e.target)) {
       //元件外點選事件
       }
   });
}
複製程式碼

相關文章