vuex action：

尤雨溪在知乎回答了，區分 actions 和 mutations 并不是為了解決競態問題，vuex 真正限制你的只有 mutation 必須是同步的這一點，只是為了devtools追蹤狀態變化，或者說出于單一職責原則。https://www.zhihu.com/question/48759748/answer/112823337

vue事件綁定：

vue的事件綁定，直接綁定給當前元素，打印$event中的target和currentTarget會發現兩個是同一個元素，而且是原生事件，用的是addEventListener。methods里面的this指向當前實例，內部用了bind方法，再去綁定this不生效。

vue.use()：

vue.ues方法會執行這個插件的instll方法，默認傳入vue，這樣主要是為了可以讓這個插件使用項目使用的vue，而不是自己引入導致vue版本不一致，導致出現一些無法預估的錯誤。

父子組件生命周期：

父組件執行到beforeMount之后，子組件先執行直到mounted，之后父組件才執行mounted。銷毀父組件beforeDestroy，之后子組件銷毀父組件才執行destroyed。

路由:

router-link、router-view這兩個組件其實就是用Vue.component注冊的全局組件。且內部用mixin讓每個子組件都獲取router實例。

數組函數劫持：

Vue重寫了數組的七個會改變原數組的方法，用函數劫持的方法實現的，類似下面：

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('調用了' + 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渲染之后執行，主要是內部在調用這個之前會在試圖渲染方法執行之后調用，內部會通過判斷兼容使用微任務還是宏任務，所以要注意不能把這個nextTick跟微任務process.nextTick混淆。

請求放在生命周期哪個合適：

很多請求會放在created里面，這時候操作dom會失敗，因為請求是異步的，一般也不會出現問題，但是建議統一放mounted，主要是這時候dom也就渲染了。而服務的渲染不支持mounted方法，統一放created中。

v-html：

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

vue是漸進式框架：

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

vue核心是響應式：

通過對data數據變更實現頁面更新。

vue的mvvm理解：

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

vue響應式原理：

vue通過發布訂閱和數據劫持的方法對數據進行監聽，會給每個默認屬性進行監聽，深層次的也會遞歸進行監聽，會對改變原數組的數組方法進行函數劫持。因為要對數據進行遞歸監聽，這也是vue性能的一個痛點。到了vue3用proxy進行重寫，不需要遞歸監聽，但是proxy兼容性不好。

vue數據不更新到頁面：

之前分享過vue數據不更新渲染，其實是錯的，vue只能監聽默認的屬性，數組的索引發生變化或者改變數組長度也不會觸發更新。比如你在data定義一個obj: {}，然后在其它地方給obj定義一個屬性，或者你定義一個數組arr,，然后直接arr[0]賦值，這些都不會進行監聽，但是數據是變化的。有可能通過這兩個方法頁面發生變化了，那是因為有其它監聽的數據發生變化，頁面重新渲染，會順帶幫你把數據渲染到頁面。使用$set可以監聽或者$ForceUpdate會強制渲染。

vue中render、template、el：

vue中如果render、template、el都存在的情況下，render優先級最高，接著是template，最后是el:

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

vue中提供的template：

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

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

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

v-model其實是語法糖：

v-model其實是:value和@input方法的語法糖，下面兩個等價：

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

vue組件核心：

組件的優點很多，重用、易維護、解耦等，vue中組件還有一個核心的優點，就是組件級更新，因為每個組件都有自己一個watcher，數據更新了只是重新渲染自己組件，而不會是整個頁面。

.vue文件

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

$bus：

給vue掛一個new Vue，因為每個vue實例都有$on、$emit、$off的事件，用來任意組件監聽、通信，但是無法控制監聽命名重復，不適合大規模使用，而且必須先監聽再發布：

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

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

@hook:

說實在的，這個語法我中文文檔和英文文檔都查了很久，沒發現API有這個語法，但是確實是能實現，就是監聽外部組件的生命周期

當子組件執行mounted的時候，父組件就會執行childrenMounted方法，這在一定場景應該是有用的。

.sync修飾符：

之前就說過v-model是一個雙向綁定的語法糖，vue還提供了.sync這個修飾符對一個props進行雙向綁定，其實就是v-bind和v-on的語法糖，某些場景比使用props傳遞更理想。

Component動態組件：

前幾天才覺得react可以把組件當作參數傳遞非常神奇，想想之前在做頁面內tab切換的時候，一堆的v-if去判斷，其實直接使用內置的動態組件更省事，以前知道這個，但是居然沒有在項目中使用：

Object.freeze()：

Vue會遞歸監聽data里面所有的對象，這是性能痛點之一，而這個方法，可以凍結一個對象，如果在vue里面聲明的數據只是第一次渲染使用，可以直接凍結，不進行監聽，如果你想重新進行監聽可以直接賦值也是可以的，這方法也可以作為一個長列表性能優化使用：

data里面定義：

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

輸出：

HTTP協議通信最耗費時間的是建立TCP連接的過程，那我們就可以使用HTTP Keep-Alive。但是，keep-alive長時間的TCP連接容易導致系統資源無效占用。配置不當的keep-alive，有時比重復利用連接帶來的損失還更大。所以正確地設置keep-alive timeout時間非常重要。瀏覽器對于TCP的keep-alive有連接限制4-6個。

減少HTTP請求次數將多個文件壓縮打包成一個，當然也不能都放在一個文件中，因為這樣傳輸起來可能會很慢，權衡取一個中間值。配置使用懶加載，對于一些用戶不立刻使用到的文件到特定的事件觸發再請求，服務器資源的部署盡量使用同源策略。服務端最好開啟gzip。

JSX 語法：

HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，允許 HTML 與 JavaScript 的混寫HTML 標簽（以 < 開頭），就用 HTML 規則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析。原諒我之前并不能解釋jsx語法。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。