分享Vue的一些小技巧

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

　　組件style的scoped

　　Vue 數(shù)組/對(duì)象更新 視圖不更新

　　vue filters 過濾器的使用

　　列表渲染相關(guān)

　　深度watch與watch立即觸發(fā)回調(diào)

　　這些情況下不要使用箭頭函數(shù)

　　路由懶加載寫法

　　路由的項(xiàng)目啟動(dòng)頁(yè)和404頁(yè)面

　　Vue調(diào)試神器:vue-devtools

　　組件style的scoped:

　　問題：在組件中用js動(dòng)態(tài)創(chuàng)建的dom，添加樣式不生效。

　　場(chǎng)景:

　　<template>

　　<div></div>

　　</template>

　　<script>

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

　　let newDom=document.createElement("div"); // 創(chuàng)建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>

　　結(jié)果：

　　// test生效 testAdd 不生效

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

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

　　background:blue;

　　height:100px;

　　width:100px;

　　}

　　原因:

　　當(dāng) <style> 標(biāo)簽有 scoped 屬性時(shí)，它的 CSS 只作用于當(dāng)前組件中的元素。

　　它會(huì)為組件中所有的標(biāo)簽和class樣式添加一個(gè)scoped標(biāo)識(shí)，就像上面結(jié)果中的data-v-1b971ada。

　　所以原因就很清楚了：因?yàn)閯?dòng)態(tài)添加的dom沒有scoped添加的標(biāo)識(shí)，沒有跟testAdd的樣式匹配起來，導(dǎo)致樣式失效。

　　解決方式

　　推薦：去掉該組件的scoped

　　每個(gè)組件的css并不會(huì)很多，當(dāng)設(shè)計(jì)到動(dòng)態(tài)添加dom，并為dom添加樣式的時(shí)候，就可以去掉scoped，會(huì)比下面的方法方便很多。

　　可以動(dòng)態(tài)添加style

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

　　newDom.style.height='100px';

　　newDom.style.width='100px';

　　newDom.style.background='red';

　　Vue 數(shù)組/對(duì)象更新 視圖不更新

　　很多時(shí)候，我們習(xí)慣于這樣操作數(shù)組和對(duì)象:

　　data() { // data數(shù)據(jù)

　　return {

　　arr: [1,2,3],

　　obj:{

　　a: 1,

　　b: 2

　　}

　　};

　　},

　　// 數(shù)據(jù)更新 數(shù)組視圖不更新

　　this.arr[0] = 'OBKoro1';

　　this.arr.length = 1;

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

　　// 數(shù)據(jù)更新 對(duì)象視圖不更新

　　this.obj.c = 'OBKoro1';

　　delete this.obj.a;

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

　　由于js的限制，Vue 不能檢測(cè)以上數(shù)組的變動(dòng)，以及對(duì)象的添加/刪除，很多人會(huì)因?yàn)橄裆厦孢@樣操作，出現(xiàn)視圖沒有更新的問題。

　　解決方式:

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

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

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

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

　　數(shù)組原生方法觸發(fā)視圖更新:

　　Vue可以監(jiān)測(cè)到數(shù)組變化的，數(shù)組原生方法:

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

　　意思是使用這些方法不用我們?cè)龠M(jìn)行額外的操作，視圖自動(dòng)進(jìn)行更新。

　　推薦使用splice方法會(huì)比較好自定義,因?yàn)閟lice可以在數(shù)組的任何位置進(jìn)行刪除/添加操作，這部分可以看看我前幾天寫的一篇文章:【干貨】js 數(shù)組詳細(xì)操作方法及解析合集

　　3.替換數(shù)組/對(duì)象

　　比方說:你想遍歷這個(gè)數(shù)組/對(duì)象，對(duì)每個(gè)元素進(jìn)行處理，然后觸發(fā)視圖更新。

　　// 文檔中的栗子: filter遍歷數(shù)組，返回一個(gè)新數(shù)組，用新數(shù)組替換舊數(shù)組

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

　　return item.message.match(/Foo/)

　　})

　　舉一反三：可以先把這個(gè)數(shù)組/對(duì)象保存在一個(gè)變量中，然后對(duì)這個(gè)變量進(jìn)行遍歷，等遍歷結(jié)束后再用變量替換對(duì)象/數(shù)組。

　　并不會(huì)重新渲染整個(gè)列表:

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

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

　　vue filters 過濾器的使用:

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

　　在html模板中的兩種用法：

　　<!-- 在雙花括號(hào)中 -->

　　{{ 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 '最后輸出這個(gè)值';

　　}

　　}

　　}

　　}

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

　　如果不想自己試，可以點(diǎn)這個(gè)demo里面修改代碼就可以了，demo中包括過濾器串聯(lián)、過濾器傳參。

到此，關(guān)于“分享Vue的一些小技巧”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！