vuex action：

尤雨溪在知乎回答了，區(qū)分 actions 和 mutations 并不是為了解決競(jìng)態(tài)問(wèn)題，vuex 真正限制你的只有 mutation 必須是同步的這一點(diǎn)，只是為了devtools追蹤狀態(tài)變化，或者說(shuō)出于單一職責(zé)原則。https://www.zhihu.com/question/48759748/answer/112823337

vue事件綁定：

vue的事件綁定，直接綁定給當(dāng)前元素，打印$event中的target和currentTarget會(huì)發(fā)現(xiàn)兩個(gè)是同一個(gè)元素，而且是原生事件，用的是addEventListener。methods里面的this指向當(dāng)前實(shí)例，內(nèi)部用了bind方法，再去綁定this不生效。

vue.use()：

vue.ues方法會(huì)執(zhí)行這個(gè)插件的instll方法，默認(rèn)傳入vue，這樣主要是為了可以讓這個(gè)插件使用項(xiàng)目使用的vue，而不是自己引入導(dǎo)致vue版本不一致，導(dǎo)致出現(xiàn)一些無(wú)法預(yù)估的錯(cuò)誤。

父子組件生命周期：

父組件執(zhí)行到beforeMount之后，子組件先執(zhí)行直到mounted，之后父組件才執(zhí)行mounted。銷(xiāo)毀父組件beforeDestroy，之后子組件銷(xiāo)毀父組件才執(zhí)行destroyed。

路由:

router-link、router-view這兩個(gè)組件其實(shí)就是用Vue.component注冊(cè)的全局組件。且內(nèi)部用mixin讓每個(gè)子組件都獲取router實(shí)例。

數(shù)組函數(shù)劫持：

Vue重寫(xiě)了數(shù)組的七個(gè)會(huì)改變?cè)瓟?shù)組的方法，用函數(shù)劫持的方法實(shí)現(xiàn)的，類(lèi)似下面：

let oldArrayMethods = Array.prototype; let arrayMethods = Object.create(Array.prototype); let arrayPatch = ['push', 'pop', 'unshift', 'shift', 'splice', 'sort', 'reverse']; arrayPatch.forEach(method => {arrayMethods[method] = function (...args) {console.log('調(diào)用了' + method);return oldArrayMethods[method].apply(this, args);} }) Array.prototype = arrayMethods; let arr = [1, 2, 3]; arr.push(4) console.log(arr);

Vue的nextTick:

Vue 提供的nextTick能保證是在DOM渲染之后執(zhí)行，主要是內(nèi)部在調(diào)用這個(gè)之前會(huì)在試圖渲染方法執(zhí)行之后調(diào)用，內(nèi)部會(huì)通過(guò)判斷兼容使用微任務(wù)還是宏任務(wù)，所以要注意不能把這個(gè)nextTick跟微任務(wù)process.nextTick混淆。

請(qǐng)求放在生命周期哪個(gè)合適：

很多請(qǐng)求會(huì)放在created里面，這時(shí)候操作dom會(huì)失敗，因?yàn)檎?qǐng)求是異步的，一般也不會(huì)出現(xiàn)問(wèn)題，但是建議統(tǒng)一放mounted，主要是這時(shí)候dom也就渲染了。而服務(wù)的渲染不支持mounted方法，統(tǒng)一放created中。

v-html：

v-html會(huì)造成XSS攻擊，使用的時(shí)候必須確保內(nèi)容是可信的，而且v-html會(huì)造成內(nèi)部的子元素都被替換掉。

vue是漸進(jìn)式框架：

你可以只用做模板引擎，或者加上vue提供的路由，或者加上全局狀態(tài)管理vuex，或者直接使用vue-cli直接搭建項(xiàng)目。你可以在現(xiàn)有程序使用vue，也可以用vue搭建工程。

vue核心是響應(yīng)式：

通過(guò)對(duì)data數(shù)據(jù)變更實(shí)現(xiàn)頁(yè)面更新。

vue的mvvm理解：

view視圖層，viewModel是vue的實(shí)例，也就是vm(new Vue)，model數(shù)據(jù)，也就是vue里面的data。

vue響應(yīng)式原理：

vue通過(guò)發(fā)布訂閱和數(shù)據(jù)劫持的方法對(duì)數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)，會(huì)給每個(gè)默認(rèn)屬性進(jìn)行監(jiān)聽(tīng)，深層次的也會(huì)遞歸進(jìn)行監(jiān)聽(tīng)，會(huì)對(duì)改變?cè)瓟?shù)組的數(shù)組方法進(jìn)行函數(shù)劫持。因?yàn)橐獙?duì)數(shù)據(jù)進(jìn)行遞歸監(jiān)聽(tīng)，這也是vue性能的一個(gè)痛點(diǎn)。到了vue3用proxy進(jìn)行重寫(xiě)，不需要遞歸監(jiān)聽(tīng)，但是proxy兼容性不好。

vue數(shù)據(jù)不更新到頁(yè)面：

之前分享過(guò)vue數(shù)據(jù)不更新渲染，其實(shí)是錯(cuò)的，vue只能監(jiān)聽(tīng)默認(rèn)的屬性，數(shù)組的索引發(fā)生變化或者改變數(shù)組長(zhǎng)度也不會(huì)觸發(fā)更新。比如你在data定義一個(gè)obj: {}，然后在其它地方給obj定義一個(gè)屬性，或者你定義一個(gè)數(shù)組arr,，然后直接arr[0]賦值，這些都不會(huì)進(jìn)行監(jiān)聽(tīng)，但是數(shù)據(jù)是變化的。有可能通過(guò)這兩個(gè)方法頁(yè)面發(fā)生變化了，那是因?yàn)橛衅渌O(jiān)聽(tīng)的數(shù)據(jù)發(fā)生變化，頁(yè)面重新渲染，會(huì)順帶幫你把數(shù)據(jù)渲染到頁(yè)面。使用$set可以監(jiān)聽(tīng)或者$ForceUpdate會(huì)強(qiáng)制渲染。

vue中render、template、el：

vue中如果render、template、el都存在的情況下，render優(yōu)先級(jí)最高，接著是template，最后是el:

var vm = new Vue({render: function(h){return h('div', {}, '這是render屬性方式渲染。')},template: '<div>這是template屬性模板渲染。</div>',el: '#app',});

vue中提供的template：

vue提供的template是無(wú)意義的，具有隱藏性、無(wú)效性、任意性，如果你用v-if的時(shí)候，使用template包裹，渲染的時(shí)候template會(huì)不存在。v-show不能用在template上。循環(huán)的key也不能放在template上。

v-if、v-show、v-for：

v-if是控制dom是否存在，v-show是控制樣式display，v-if會(huì)重新渲染元素或者組件，并且重新執(zhí)行涉及的函數(shù)。v-for的優(yōu)先級(jí)高于v-if，性能會(huì)差一些，所以盡量不要一起使用。

v-model其實(shí)是語(yǔ)法糖：

v-model其實(shí)是:value和@input方法的語(yǔ)法糖，下面兩個(gè)等價(jià)：

<input type="text" :value="msg" @input="(e) => msg = e.target.value"><input v-model="msg">

vue組件核心：

組件的優(yōu)點(diǎn)很多，重用、易維護(hù)、解耦等，vue中組件還有一個(gè)核心的優(yōu)點(diǎn)，就是組件級(jí)更新，因?yàn)槊總€(gè)組件都有自己一個(gè)watcher，數(shù)據(jù)更新了只是重新渲染自己組件，而不會(huì)是整個(gè)頁(yè)面。

.vue文件

.vue的script中的export default出去的對(duì)象，相當(dāng)于Vue.extends({})里面的這個(gè)對(duì)象。import .vue文件，獲取的是一個(gè)對(duì)象，可以打印看看，里面有render函數(shù)等。

$bus：

給vue掛一個(gè)new Vue，因?yàn)槊總€(gè)vue實(shí)例都有$on、$emit、$off的事件，用來(lái)任意組件監(jiān)聽(tīng)、通信，但是無(wú)法控制監(jiān)聽(tīng)命名重復(fù)，不適合大規(guī)模使用，而且必須先監(jiān)聽(tīng)再發(fā)布：

Vue.prototype.$bus = new Vue();

this.$once('hook:beforeDestroy', function () { picker.destroy() }); Vue3.0確實(shí)是新增了hook，有點(diǎn)靠近了react，但是這個(gè)是很早之前就出的，很奇怪，為什么沒(méi)多少有介紹到。最簡(jiǎn)單的使用場(chǎng)景就是監(jiān)聽(tīng)滾動(dòng)或者計(jì)時(shí)器在組件銷(xiāo)毀的時(shí)候清除，這段代碼相當(dāng)于在組件銷(xiāo)毀的時(shí)候執(zhí)行picker.destroy()，在vue官網(wǎng)/教程/深入了解組件/處理邊界情況/程序化的事件監(jiān)聽(tīng)器可以看看API。

@hook:

說(shuō)實(shí)在的，這個(gè)語(yǔ)法我中文文檔和英文文檔都查了很久，沒(méi)發(fā)現(xiàn)API有這個(gè)語(yǔ)法，但是確實(shí)是能實(shí)現(xiàn)，就是監(jiān)聽(tīng)外部組件的生命周期

當(dāng)子組件執(zhí)行mounted的時(shí)候，父組件就會(huì)執(zhí)行childrenMounted方法，這在一定場(chǎng)景應(yīng)該是有用的。

.sync修飾符：

之前就說(shuō)過(guò)v-model是一個(gè)雙向綁定的語(yǔ)法糖，vue還提供了.sync這個(gè)修飾符對(duì)一個(gè)props進(jìn)行雙向綁定，其實(shí)就是v-bind和v-on的語(yǔ)法糖，某些場(chǎng)景比使用props傳遞更理想。

Component動(dòng)態(tài)組件：

前幾天才覺(jué)得react可以把組件當(dāng)作參數(shù)傳遞非常神奇，想想之前在做頁(yè)面內(nèi)tab切換的時(shí)候，一堆的v-if去判斷，其實(shí)直接使用內(nèi)置的動(dòng)態(tài)組件更省事，以前知道這個(gè)，但是居然沒(méi)有在項(xiàng)目中使用：

Object.freeze()：

Vue會(huì)遞歸監(jiān)聽(tīng)data里面所有的對(duì)象，這是性能痛點(diǎn)之一，而這個(gè)方法，可以?xún)鼋Y(jié)一個(gè)對(duì)象，如果在vue里面聲明的數(shù)據(jù)只是第一次渲染使用，可以直接凍結(jié)，不進(jìn)行監(jiān)聽(tīng)，如果你想重新進(jìn)行監(jiān)聽(tīng)可以直接賦值也是可以的，這方法也可以作為一個(gè)長(zhǎng)列表性能優(yōu)化使用：

data里面定義：

obj1: Object.freeze({a:1}),obj2: {b: 2}mounted(){console.log(this.obj1)console.log(this.obj2)}

輸出：

HTTP協(xié)議通信最耗費(fèi)時(shí)間的是建立TCP連接的過(guò)程，那我們就可以使用HTTP Keep-Alive。但是，keep-alive長(zhǎng)時(shí)間的TCP連接容易導(dǎo)致系統(tǒng)資源無(wú)效占用。配置不當(dāng)?shù)膋eep-alive，有時(shí)比重復(fù)利用連接帶來(lái)的損失還更大。所以正確地設(shè)置keep-alive timeout時(shí)間非常重要。瀏覽器對(duì)于TCP的keep-alive有連接限制4-6個(gè)。

減少HTTP請(qǐng)求次數(shù)將多個(gè)文件壓縮打包成一個(gè)，當(dāng)然也不能都放在一個(gè)文件中，因?yàn)檫@樣傳輸起來(lái)可能會(huì)很慢，權(quán)衡取一個(gè)中間值。配置使用懶加載，對(duì)于一些用戶(hù)不立刻使用到的文件到特定的事件觸發(fā)再請(qǐng)求，服務(wù)器資源的部署盡量使用同源策略。服務(wù)端最好開(kāi)啟gzip。

JSX 語(yǔ)法：

HTML 語(yǔ)言直接寫(xiě)在 JavaScript 語(yǔ)言之中，不加任何引號(hào)，這就是 JSX 的語(yǔ)法，允許 HTML 與 JavaScript 的混寫(xiě)HTML 標(biāo)簽（以 < 開(kāi)頭），就用 HTML 規(guī)則解析；遇到代碼塊（以 { 開(kāi)頭），就用 JavaScript 規(guī)則解析。原諒我之前并不能解釋jsx語(yǔ)法。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的vue 判断同一数组内的值是否一直_vue一些笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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