目錄
- 4.1 vue更新數(shù)組或者對(duì)象時(shí)觸發(fā)視圖更新的方法
- 4.2 解決非工程化項(xiàng)目初始化頁(yè)面閃動(dòng)問(wèn)題
- 4.3 v-for產(chǎn)生的列表狰住，實(shí)現(xiàn)active的切換
- 4.4 v-model語(yǔ)法糖的使用
- 4.5 v-slot 指令 （插槽 vue2.6更新）
- 4.1 vue更新數(shù)組或者對(duì)象時(shí)觸發(fā)視圖更新的方法
- 觸發(fā)視圖更新的方法有如下幾種
1. Vue.set 響應(yīng)式新增與修改數(shù)據(jù)
可以設(shè)置對(duì)象或數(shù)組的值摄闸，通過(guò)key或數(shù)組索引宵统，可以觸發(fā)視圖更新
target：要更改的數(shù)據(jù)源(可以是對(duì)象或者數(shù)組)
key：要更改的具體數(shù)據(jù)
value ：重新賦的值
- 數(shù)組修改
Vue.set(array, indexOfItem, newValue)
this.array.$set(indexOfItem, newValue)
- 對(duì)象修改
Vue.set(obj, keyOfItem, newValue)
this.obj.$set(keyOfItem, newValue)
2. Vue.delete
刪除對(duì)象或數(shù)組中元素流礁，通過(guò)key或數(shù)組索引砌函，可以觸發(fā)視圖更新
- 數(shù)組修改
Vue.delete(array, indexOfItem)
this.array.$delete(indexOfItem)
- 對(duì)象修改
Vue.delete(obj, keyOfItem)
this.obj.$delete(keyOfItem)
3. 數(shù)組對(duì)象直接修改屬性孙技，可以觸發(fā)視圖更新
this.array[0].show = true;
this.array.forEach(function(item){
item.show = true;
});
4. splice方法修改數(shù)組秋泳，可以觸發(fā)視圖更新
this.array.splice(indexOfItem, 1, newElement)
5. 數(shù)組整體修改踱承，可以觸發(fā)視圖更新
var tempArray = this.array;
tempArray[0].show = true;
this.array = tempArray;
6. 用Object.assign或lodash.assign可以為對(duì)象添加響應(yīng)式屬性倡缠，可以觸發(fā)視圖更新
//Object.assign的單層的覆蓋前面的屬性，不會(huì)遞歸的合并屬性
this.obj = Object.assign({},this.obj,{a:1, b:2})
//assign與Object.assign一樣
this.obj = _.assign({},this.obj,{a:1, b:2})
//merge會(huì)遞歸的合并屬性
this.obj = _.merge({},this.obj,{a:1, b:2})
7. Vue包含一組觀察數(shù)組變異的方法茎活，使用它們改變數(shù)組也會(huì)觸發(fā)視圖更新
push() 向數(shù)組的末尾添加一個(gè)或多個(gè)元素昙沦，并返回新的長(zhǎng)度。
pop() 刪除最后一個(gè)元素载荔，把數(shù)組長(zhǎng)度減 1盾饮，并且返回它刪除的元素的值。
shift() 把數(shù)組的第一個(gè)元素從其中刪除懒熙，并返回第一個(gè)元素的值丘损。
unshift() 向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度工扎。
splice() 向/從數(shù)組中添加/刪除項(xiàng)目徘钥，然后返回被刪除的項(xiàng)目。 該方法會(huì)改變?cè)紨?shù)組肢娘。
sort() 對(duì)數(shù)組的元素進(jìn)行排序呈础。
reverse() 顛倒數(shù)組中元素的順序。
不變異的方法:
filter()
concat()
slice()
他們返回的是一個(gè)新數(shù)組橱健，使用這些方法時(shí)而钞，可以用新數(shù)組來(lái)替換原始數(shù)組
原理:
-- Vue 在檢測(cè)到數(shù)組變化時(shí)，并不是直接重新渲染整個(gè)列表拘荡，而是最大化復(fù)用DOM元素笨忌。替換的數(shù)組中，含有相同元素的項(xiàng)不會(huì)被重新渲染，
因此可以大膽的用新數(shù)組來(lái)替換舊數(shù)組官疲，不用擔(dān)心性能問(wèn)題袱结。
-- 值得注意的是：
以下變動(dòng)的數(shù)組中Vue是不能檢測(cè)到的，也不會(huì)觸發(fā)視圖更新途凫。
1.通過(guò)索引直接設(shè)置項(xiàng)垢夹， 比如this.books[3]={...}
2.修改數(shù)組長(zhǎng)度， 比如 this.books.length = 1;
兩個(gè)問(wèn)題都可以用splice來(lái)解決：
第一個(gè)問(wèn)題 還可以用 set方法 this.$set(this.books,3,{...})
- 4.2 解決非工程化項(xiàng)目初始化頁(yè)面閃動(dòng)問(wèn)題
vue頁(yè)面在加載的時(shí)候閃爍花括號(hào){}}维费，v-cloak指令和css規(guī)則如[v-cloak]{display:none}一起用時(shí)果元，這個(gè)指令可以隱藏未編譯的Mustache標(biāo)簽直到實(shí)例準(zhǔn)備完畢。
/*css樣式*/
[v-cloak] {
display: none;
}
<!--html代碼-->
<div id="app" v-cloak>
<ul>
<li v-for="item in tabs">{{item.text}}</li>
</ul>
</div>
- 4.3 v-for產(chǎn)生的列表犀盟，實(shí)現(xiàn)active的切換
<div v-for="(desc,tableIndex) in descriptions.firstface">
<ul class="controller-checkboxs clearfix" >
<li
@click="currentIndex=index,currentTable=tableIndex"
class="controller-checkbox-item"
:class="{active:index===currentIndex&&tableIndex==currentTable}"
v-for="(ctrlValue,index) in desc.args">
</li>
</ul>
</div>
- 4.4 v-model語(yǔ)法糖的使用
<input type="text" v-model="mes">
此時(shí)mes值就與input的值進(jìn)行雙向綁定
實(shí)際上上面的代碼是下面代碼的語(yǔ)法糖而晒。
<input v-bind:value="mes" v-on:input="mes= $event.target.value"/>
要理解這行代碼，首先你要知道 input 元素本身有個(gè) oninput 事件阅畴，這是 HTML5 新增加的倡怎，類似 onchange ，每當(dāng)輸入框內(nèi)容發(fā)生變化贱枣，就會(huì)觸發(fā) oninput 监署，把最新的value傳遞給 mes。從而實(shí)現(xiàn)了v-model
v-model用在組件上的時(shí)候
我們知道v-model可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定纽哥，但是钠乏，如果說(shuō)這是一個(gè)復(fù)雜的輸入框，在項(xiàng)目中也經(jīng)常使用春塌。此時(shí)我們我們就把這個(gè)輸入框封裝成組件晓避，那怎么利用v-mode讓父組件的值與子組件input框里的值雙向綁定起來(lái)≈豢牵看下面的例子
1：父組件 <InputBox v-model="mes"></InputBox> 根據(jù)上面講的v-model語(yǔ)法糖俏拱，所以 InputBox那行代碼也可以寫(xiě)成 <InputBox v-bind:value="value" v-on:input="mes= $event.target.value"></InputBox>
2：子組件
所以說(shuō)：1：接受一個(gè)value prop 2：在有新的值時(shí)觸發(fā)input事件并將新值作為參數(shù) 。這樣吕世，我們就可以看到子組件和父組件的值就可以聯(lián)動(dòng)起來(lái)彰触。但是我們看到v-model中的事件是input,如果碰到單選復(fù)選按鈕這種check事件梯投，那我們就需要去自定義v-model
v-model自定義
父組件
<InputCheckout v-model="foo"></InputCheckout>
<InputBox v-bind:value="value" v-on:input="mes= $event.target.value"></InputBox>
但是單選復(fù)選框不會(huì)觸發(fā)input事件命辖，只會(huì)觸發(fā)change事件。所以在子組件我們需要自定義v-model分蓖。我們來(lái)看看代碼哈
- 4.5 v-slot使用
https://juejin.im/post/5c64e11151882562e4726d98這個(gè)介紹的不錯(cuò)
Vue 為具名和范圍插槽引入了一個(gè)全新的語(yǔ)法尔艇，即我們今天要講的主角：v-slot 指令。目的就是想統(tǒng)一 slot 和 scope-slot 語(yǔ)法么鹤，使代碼更加規(guī)范和清晰终娃。
//默認(rèn)插槽
<baz v-slot ="baz">
{{baz}}
</ baz >
//嵌套默認(rèn)插槽
//組件提供的范圍變量也在該組件本身上聲明
<foo v-slot="foo">
<bar v-slot="bar">
<baz v-slot="baz">
{{ foo }} {{ bar }} {{ baz }}
</baz>
</bar>
</foo>
//具名域槽
<my-name>
<template v-slot:one="{ msg }">
{{ msg }}
</template>
</my-name>
//混用插槽
<foo>
<template v-slot:one="one">
<bar v-slot="bar">
<div>{{ one }} {{ bar }}</div>
</bar>
</template>
<template v-slot:two="two">
<bar v-slot="bar">
<div>{{ two }} {{ bar }}</div>
</bar>
</template>
</foo>
插槽內(nèi)容的解構(gòu)賦值
在 Vue 代碼內(nèi)部，我們傳遞的 slotProps 其實(shí)就是函數(shù)的一個(gè)單一參數(shù)：
function (slotProps) {
// ... slot content ...
}
意味著 v-slot 的值只要滿足函數(shù)參數(shù)定義的 JavaScript 表達(dá)式的都可以接受蒸甜。
<current-user v-slot="{ user }">
{{ user.firstName }}
</current-user>
以重命名解構(gòu)變量：
<current-user v-slot="{ user: person }">>
{{ person.firstName }}
</current-user>
甚至可以自定義回退內(nèi)容棠耕，以便在未定義插值情況下使用：
<current-user v-slot="{ user = { firstName: 'Guest' } }">>
{{ user.firstName }}
</current-user>
動(dòng)態(tài)插槽名稱
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
</base-layout>
命名插槽簡(jiǎn)寫(xiě)
可以使用 # 代替 v-slot余佛。例如， v-slot:header 簡(jiǎn)寫(xiě)成 #header:
base-layout>
<template #header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template #footer>
<p>Here's some contact info</p>
</template>
</base-layout>
和其他指令一樣窍荧，只有在提供參數(shù)時(shí)才能使用簡(jiǎn)寫(xiě)形式辉巡，下面的寫(xiě)法是無(wú)效的
<!-- 將會(huì)觸發(fā)一個(gè)控制臺(tái)警告 -->
<current-user #="{ user }">
{{ user.firstName }}
</current-user>
也就是說(shuō)，如果你想使用簡(jiǎn)寫(xiě)語(yǔ)法蕊退，則務(wù)必指定插值的名字：
<current-user #default="{ user }">
{{ user.firstName }}
</current-user>
