Vue2中檢測(cè)數(shù)組變化的限制和解決方法

vue2用下標(biāo)設(shè)置數(shù)組沒效果

arr = [1,2] arr[0] = 0,頁面上顯示的arr并沒有修改(如果對(duì)應(yīng)下標(biāo)是原始值；若是引用值)

解決1：Vue.Set

解決2：arr.splice (Vue會(huì)劫持splice方法) Vue2對(duì)對(duì)象是循環(huán)defineProperty（遞歸、深度）set時(shí)通知dep.notify()；對(duì)于數(shù)組則是重寫數(shù)組7個(gè)方法（push、pop、shift、unshift、splice、sort、reverse）時(shí)通知dep.notify()；

<div id="app">{{ arr[0].a }}{{ arr[1].a }}</div><script>var app = new Vue({el: '#app',data: {arr: [{ a: 2 }, { a: 600 }]},mounted() {setTimeout(() => {this.arr[1] = [{ a: 400 }] // 這樣看不到400this.arr[1].a = 800 // 這樣能看到變成800}, 3000)}})</script>

vue2設(shè)置數(shù)組長(zhǎng)度沒效果

arr.length-- ,頁面上顯示的arr并沒有修改

解決1：Vue.Delete

解決2：arr.splice

Vue nextTick

Vue渲染是異步渲染，添加元素時(shí)不會(huì)馬上渲染，而是到下一個(gè)tick才渲染。 nextTick的回調(diào)會(huì)在dom異步渲染完畢后執(zhí)行（vue是組件級(jí)的，若一有數(shù)據(jù)就更新性能肯定不好）。并且vue是批量做渲染的 在外部添加3個(gè) 在nextTick里獲取個(gè)數(shù) 只會(huì)打印一次

nextTick的實(shí)現(xiàn)

• 如果支持promise，將回調(diào)放在then方法里
• 若不，若支持MutationObserver，就xxx也是異步執(zhí)行的
• 若不，若支持setImmediate
• 再不，setTimeout

computed method watch區(qū)別

• method用在視圖上，每次都去執(zhí)行，開銷大，而computed是具備緩存的，若依賴的屬性無變化，不計(jì)算

Vue Plugin

• 全局方法 Vue.xx訪問
• 全局指令
• mixin
• 原型上綁定方法 Vue實(shí)例this訪問
• 導(dǎo)出插件，在main.js里use
  

Vue組件data返回函數(shù)

• Vue組件可能存在多個(gè)實(shí)例，如果使用對(duì)象形式定義data，會(huì)導(dǎo)致他們共用一個(gè)data對(duì)象，那么狀態(tài)變更將會(huì)影響所有組件實(shí)例；采用函數(shù)形式定義，在initData時(shí)會(huì)將其作為工廠函數(shù)返回全新的data對(duì)象，有效規(guī)避多實(shí)例之間狀態(tài)污染問題。而Vue根實(shí)例只能有一個(gè)，不會(huì)有次問題。
  

加key 高效更新dom

key的作用主要是為了高效更新虛擬DOM，其原理是vue在patch(打補(bǔ)丁)過程中通過key可以精準(zhǔn)判斷兩個(gè)節(jié)點(diǎn)是都是同一個(gè)，從而避免頻繁更新不同元素，是patch過程更高效，減少dom操作量，提高性能

若不設(shè)置key還可能在列表更新時(shí)引發(fā)一些隱蔽的bug

vue中在使用相同標(biāo)簽名元素的過渡切換時(shí)，也會(huì)使用到key屬性，目的是為了讓vue可以區(qū)分他們，否則vue只會(huì)替換其內(nèi)部屬性而不會(huì)觸發(fā)過渡效果

• 不使用key，更新時(shí)不知道每個(gè)元素的位置，所以在A更新A，B更新B，C更新為F，以此類推，實(shí)際更新了3次，從F開始FCD + 創(chuàng)建插入E （源碼中，每次循環(huán)認(rèn)為這5對(duì)是sameVnode，只能每次都去更新。而加了key能精準(zhǔn)判斷是否是相同節(jié)點(diǎn)）
  
• 使用key，只做了一次創(chuàng)建F并插入到C前面的操作（比較時(shí)，比較首位元素是否相同）

源碼

• 沒有設(shè)置key時(shí)，key的值是undefined，兩個(gè)未設(shè)置key的標(biāo)簽值被判斷為相同

• diff算法不是最優(yōu)，增加key優(yōu)化了diff，降低復(fù)雜度

• 加key

index作為key

• 在數(shù)據(jù)會(huì)增減時(shí)可能會(huì)產(chǎn)生問題，在頭部插入，在中間刪除（數(shù)量變化，index是在變的）
• random作為key，隨機(jī)數(shù)還是有可能是一樣的

vue-router的原理

• vue-router通過hash與History interface兩種方式實(shí)現(xiàn)前端路由，更新視圖但不重新請(qǐng)求頁面”是前端路由原理的核心
• history模式則會(huì)將URL修改得就和正常請(qǐng)求后端的URL一樣,如后端沒有配置對(duì)應(yīng)/user/id的路由處理，則會(huì)返回404錯(cuò)誤
• 它提供mode參數(shù)
• hash帶# new HashHistory 是基于location.hash來實(shí)現(xiàn)的。Location.hash的值就是URL中#后面的內(nèi)容。當(dāng)hash改變時(shí)，頁面不會(huì)因此刷新，瀏覽器也不會(huì)請(qǐng)求服務(wù)器。
• history更像url new HTML5History

update beforeUpdate

總結(jié)：

• 不能籠統(tǒng)地說能修改或不能修改數(shù)據(jù)
• 修改的數(shù)據(jù)未渲染到視圖不會(huì)觸發(fā)這2個(gè)鉤子
• this.msg = this.msg + 1是有可能引起死循環(huán)的操作
• beforeUpdate修改視圖數(shù)據(jù)不會(huì)再次觸發(fā)beforeUpdate 即使++也沒關(guān)系
• updated修改視圖數(shù)據(jù)為常量，會(huì)再觸發(fā)一輪beforeUpdate → update；因此，若在此生命周期++會(huì)死循環(huán)

總結(jié)

以上是生活随笔為你收集整理的前端面试之Vue相关总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。