分享Vue的一些小技巧

這篇文章主要介紹“分享Vue的一些小技巧”，在日常操作中，相信很多人在分享Vue的一些小技巧問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”分享Vue的一些小技巧”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　組件style的scoped

　　Vue 數組/對象更新 視圖不更新

　　vue filters 過濾器的使用

　　列表渲染相關

　　深度watch與watch立即觸發回調

　　這些情況下不要使用箭頭函數

　　路由懶加載寫法

　　路由的項目啟動頁和404頁面

　　Vue調試神器:vue-devtools

　　組件style的scoped:

　　問題：在組件中用js動態創建的dom，添加樣式不生效。

　　場景:

　　<template>

　　<div></div>

　　</template>

　　<script>

　　let a=document.querySelector('.test');

　　let newDom=document.createElement("div"); // 創建dom

　　newDom.setAttribute("class","testAdd" ); // 添加樣式

　　a.appendChild(newDom); // 插入dom

　　</script>

　　<style scoped>

　　.test{

　　background:blue;

　　height:100px;

　　width:100px;

　　}

　　.testAdd{

　　background:red;

　　height:100px;

　　width:100px;

　　}

　　</style>

　　結果：

　　// test生效 testAdd 不生效

　　<div data-v-1b971ada><div></div></div>

　　.test[data-v-1b971ada]{ // 注意data-v-1b971ada

　　background:blue;

　　height:100px;

　　width:100px;

　　}

　　原因:

　　當 <style> 標簽有 scoped 屬性時，它的 CSS 只作用于當前組件中的元素。

　　它會為組件中所有的標簽和class樣式添加一個scoped標識，就像上面結果中的data-v-1b971ada。

　　所以原因就很清楚了：因為動態添加的dom沒有scoped添加的標識，沒有跟testAdd的樣式匹配起來，導致樣式失效。

　　解決方式

　　推薦：去掉該組件的scoped

　　每個組件的css并不會很多，當設計到動態添加dom，并為dom添加樣式的時候，就可以去掉scoped，會比下面的方法方便很多。

　　可以動態添加style

　　// 上面的栗子可以這樣添加樣式

　　newDom.style.height='100px';

　　newDom.style.width='100px';

　　newDom.style.background='red';

　　Vue 數組/對象更新 視圖不更新

　　很多時候，我們習慣于這樣操作數組和對象:

　　data() { // data數據

　　return {

　　arr: [1,2,3],

　　obj:{

　　a: 1,

　　b: 2

　　}

　　};

　　},

　　// 數據更新 數組視圖不更新

　　this.arr[0] = 'OBKoro1';

　　this.arr.length = 1;

　　console.log(arr);// ['OBKoro1'];

　　// 數據更新 對象視圖不更新

　　this.obj.c = 'OBKoro1';

　　delete this.obj.a;

　　console.log(obj); // {b:2,c:'OBKoro1'}

　　由于js的限制，Vue 不能檢測以上數組的變動，以及對象的添加/刪除，很多人會因為像上面這樣操作，出現視圖沒有更新的問題。

　　解決方式:

　　this.$set(你要改變的數組/對象，你要改變的位置/key，你要改成什么value)

　　this.$set(this.arr, 0, "OBKoro1"); // 改變數組

　　this.$set(this.obj, "c", "OBKoro1"); // 改變對象

　　如果還是不懂的話，可以看看這個codependemo。

　　數組原生方法觸發視圖更新:

　　Vue可以監測到數組變化的，數組原生方法:

　　splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

　　意思是使用這些方法不用我們再進行額外的操作，視圖自動進行更新。

　　推薦使用splice方法會比較好自定義,因為slice可以在數組的任何位置進行刪除/添加操作，這部分可以看看我前幾天寫的一篇文章:【干貨】js 數組詳細操作方法及解析合集

　　3.替換數組/對象

　　比方說:你想遍歷這個數組/對象，對每個元素進行處理，然后觸發視圖更新。

　　// 文檔中的栗子: filter遍歷數組，返回一個新數組，用新數組替換舊數組

　　example1.items = example1.items.filter(function (item) {

　　return item.message.match(/Foo/)

　　})

　　舉一反三：可以先把這個數組/對象保存在一個變量中，然后對這個變量進行遍歷，等遍歷結束后再用變量替換對象/數組。

　　并不會重新渲染整個列表:

　　Vue 為了使得 DOM 元素得到最大范圍的重用而實現了一些智能的、啟發式的方法，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。

　　如果你還是很困惑，可以看看Vue文檔中關于這部分的解釋。

　　vue filters 過濾器的使用:

　　過濾器，通常用于后臺管理系統，或者一些約定類型，過濾。Vue過濾器用法是很簡單，但是很多朋友可能都沒有用過，這里稍微講解一下。

　　在html模板中的兩種用法：

　　<!-- 在雙花括號中 -->

　　{{ message | filterTest }}

　　<!-- 在 `v-bind` 中 -->

　　<div :id="message | filterTest"></div>

　　在組件script中的用法:

　　export default {

　　data() {

　　return {

　　message:1

　　}

　　},

　　filters: {

　　filterTest(value) {

　　// value在這里是message的值

　　if(value===1){

　　return '最后輸出這個值';

　　}

　　}

　　}

　　}

　　用法就是上面講的這樣，可以自己在組件中試一試就知道了，很簡單很好用的。

　　如果不想自己試，可以點這個demo里面修改代碼就可以了，demo中包括過濾器串聯、過濾器傳參。

到此，關于“分享Vue的一些小技巧”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！