vue a标簽 href寫值_vue技術點及面試題更新之—55

1.css隻在目前元件起作用

在style标簽中寫入scoped即可 例如：

2.v-if 和 v-show 差別

v-if按照條件是否渲染,操作是DOM

v-show是display的block或none；操作是css樣式。

3.route和router的差別

route是路由資訊對象，包括path，fullpath，parmas，query，name，hash，等路由資訊參數。而router是“路由執行個體”對象包括了路由的跳轉方法，鈎子函數等。

4.vue.js的兩個核心是什麼？

資料驅動、元件系統

5.vue幾種常用的指令

v-for 、 v-if 、v-bind、v-on、v-show、v-else、v-else-if

v-html   v-text   v-once   v-model  v-pre  v-cloak

6.vue常用的修飾符？

prevent 阻止預設行為  stop 阻止事件冒泡

self 當事件發生在該元素本身而不是子元素時候觸發

capture 事件偵聽 事件發生是才會調用

once 隻會觸發一次(事件修飾符)

表單修飾符：v-model.number v-model.trim v-model.lazy

按鍵修飾符：@keyup.left /right /middle/shift

7.v-on 可以綁定多個方法嗎？

可以

8.vue中 key 值的作用？

Key值可以管理可複用的元素。Vue.js 用v-for正在更新已渲染過的元素清單時，它預設用“就地複用”政策。如果資料項的順序被改變，vue将不會移動DOM元素比對資料項的順序，而是簡單的複用此處的每個元素，并且確定它在特定的索引下顯示已被渲染過的每個元素。.key 的作用主要是為了高效的更新虛拟DOM。

9.什麼是vue的計算屬性？

在模闆中放入太多的邏輯會讓模闆過重且難以維護，在需要對資料進行複雜處理，且可能多次使用的情況下，盡量采用計算屬性的方式。

好處：1、使得資料處理結構清晰，

2、依賴于資料，資料更新，處理結果自動更新。

3、計算屬性中this指向vm執行個體。

4、在template調用是直接寫計算屬性即可

5、常用的get方法擷取資料，也可以使用set方法設定資料。

6、相較于methods，不管依賴的資料變不變，methods都會重新計算，但依賴的資料不變的時候，computed從緩存中擷取，不會重新計算。

10.vue單頁面應用及其優缺點

單頁面的優點：

1、使用者體驗好，快，内容的改變不需要加載整個頁面，基于一點單頁面對伺服器的壓力較小

      2、前後端分離

3、頁面效果會比較炫酷(比如切換頁面内容的專場動畫)

單頁面的缺點：

1、不利于SEO(搜尋引擎優化)

2、導航不可用。如果一定要導航需要自行實作前進後退(由于單頁面不能用浏覽器的前進後退功能，是以需要自己建立堆棧管理)

3、初次加載耗時多。

4、頁面的複雜度提高的很多。

補充：單頁面應用(SPA),通俗一點說就是隻有一個首頁面的應用，浏覽器一開始加載所有必要的html，js,css。所有的頁面内容都包含在這個首頁面中。但在寫的時候，還是要分開寫(頁面片段)，然後在互動的時候有路由程式動态載入，單頁面的頁面跳轉，僅重新整理局部資源，多應用于pc端。

多頁面的應用：多頁面MPA，就是隻一個應用中多個頁面，頁面跳轉時是整頁重新整理。

11、怎麼定義 vue-router 的動态路由? 怎麼擷取傳過來的值

在 router 目錄下的 index.js 檔案中，對 path 屬性加上 /:id，使用 router 對象的 params.id 擷取。

12、vue初始化頁面閃動問題

使用vue開發時，在vue初始化之前，由于div是不歸vue管的，是以我們寫的代碼在還沒有解析的情況下會容易出現花屏現象，看到類似于{{message}}的字樣，雖然一般情況下這個時間很短暫，但是我們還是有必要讓解決這個問題的。

首先：在css裡加上[v-cloak] {

display: none;

}。

如果沒有徹底解決問題，則在根元素加上style="display: none;" :style="{display: 'block'}"

13、如何擷取dom(元件、類、函數)?

ref="domName" 用法：this.$refs.domName

14、$nextTick的應用和實作的原理

應用：在修改資料之後立即使用這個 方法，可以擷取更新後的DOM的值。

Vue 中nextTick: 在下次 DOM 更新循環結束之後執行延遲回調。在修改資料之後立即使用這個方法，擷取更新後的 DOM。

Vue.nextTick：在dom更新後執行，一般用于dom操作

Vue.$nextTick：一直到真實的dom渲染結束後執行

在下次 DOM 更新循環結束之後執行延遲回調。在修改資料之後立即使用這個方法，擷取更新後的 DOM。

原理：nextTick   vue中資料變化之後到DOM更新是一個異步的過程，運用的js的運作機制也就是事件循環，同步任務在主線程的執行，形成一個執行棧，主線程之外還有一個任務隊列，隻要異步任務有了一個結果，就會在任務隊列中放置一個事件，一旦執行棧的同步任務執行完就會讀取任務隊列，主線程執行過程就是一個tick,所有的異步結果都通過任務隊列來排程，

Vue 在内部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執行環境不支援，則會采用 setTimeout(fn, 0) 代替

15、vue元件中data為什麼必須是一個函數？

因為JavaScript的特性所導緻，在component中，data必須以函數的形式存在，不可以是對象。組建中的data寫成一個函數，資料以函數傳回值的形式定義，這樣每次複用元件的時候，都會傳回一份新的data，相當于每個元件執行個體都有自己私有的資料空間，它們隻負責各自維護的資料，不會造成混亂。而單純的寫成對象形式，就是所有的元件執行個體共用了一個data，這樣改一個全都改了。

16、v-if和v-for的優先級

當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級，這意味着 v-if 将分别重複運作于每個 v-for 循環中。是以，不推薦v-if和v-for同時使用。

如果v-if和v-for一起用的話，vue中的的會自動提示v-if應該放到外層去。

17、assets和static的差別

相同點：assets和static兩個都是存放靜态資源檔案。項目中所需要的資源檔案圖檔，字型圖示，樣式檔案等都可以放在這兩個檔案下，這是相同點

不相同點：assets中存放的靜态資源檔案在項目打包時，也就是運作npm run build時會将assets中放置的靜态資源檔案進行打包上傳，所謂打包簡單點可以了解為壓縮體積，代碼格式化。而壓縮後的靜态資源檔案最終也都會放置在static檔案中跟着index.html一同上傳至伺服器。static中放置的靜态資源檔案就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至伺服器。因為避免了壓縮直接進行上傳，在打包時會提高一定的效率，但是static中的資源檔案由于沒有進行壓縮等操作，是以檔案的體積也就相對于assets中打包後的檔案送出較大點。在伺服器中就會占據更大的空間。

建議：将項目中template需要的樣式檔案js檔案等都可以放置在assets中，走打包這一流程。減少體積。而項目中引入的第三方的資源檔案如iconfoont.css等檔案可以放置在static中，因為這些引入的第三方檔案已經經過處理，我們不再需要處理，直接上傳。

18、vue和jQuery的差別

jQuery是使用選擇器($)選取DOM對象，對其進行指派、取值、事件綁定等操作，其實和原生的HTML的差別隻在于可以更友善的選取和操作DOM對象，而資料和界面是在一起的。比如需要擷取label标簽的内容：$("lable").val();,它還是依賴DOM元素的值。

vue則是通過Vue對象将資料和View完全分離開來了。對資料進行操作不再需要引用相應的DOM對象，可以說資料和View是分離的，他們通過Vue對象這個vm實作互相的綁定。這就是傳說中的MVVM。

19、delete和Vue.delete删除數組的差別

delete隻是被删除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。

Vue.delete 直接删除了數組 改變了數組的鍵值。

20、Vue-router跳轉和location.href有什麼差別

location.href='/url'來跳轉，簡單友善，但是重新整理了頁面；

Vue-router是基于history的封裝。使用history.pushState('/url')，無重新整理頁面，靜态跳轉；

21、vue slot

簡單來說，假如父元件需要在子元件内放一些DOM，那麼這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示，就是slot分發負責的活。

22、你們vue項目是打包了一個js檔案，一個css檔案，還是有多個檔案？

根據vue-cli腳手架規範，一個js檔案，一個css檔案。

23、Vue裡面router-link在pc端上有用，在安卓上沒反應怎麼解決？

vue路由在Android機上有問題，babel問題，安裝babel polypill插件解決。

24、vue中在router-link上綁定事件無效解決方法(标簽中添加@click 或者@mouseover 無效的 情況)

使用@click.native。原因：router-link會阻止click事件，.native指直接監聽一個原生事件。

(自定義的元件，觸發原生的事件需要native修飾符

)

25、routerLink在IE和Firefox中不起作用(路由不跳轉)的問題

方法一：隻用a标簽，不适用button标簽；方法二：使用button标簽和Router.navigate方法

26、vue-router 是什麼?它有哪些元件

vue-router是vue.js的官方路由管理器。router-link、router-view

27、active-class 是哪個元件的屬性？(用于選中樣式的切換)

vue-router子產品的router-link元件。

"/home" tag='li' active-class='類名'> router-link>
           

28、vue-router 有哪幾種導航鈎子?

有三種導航鈎子函數。(全局前置守衛(beforeEach)，全局解析守衛(beforeResolve)，全局後置守衛(afterEach)，路由獨享守衛(beforeEnter)，元件内的守衛(beforeRouteEnter，beforeRouteUpdate ,beforeRouteLeave))

一：是全局導航鈎子(全局守衛)

1、router.beforeEach(to,from,next)作用：跳轉前進行判斷攔截。

守衛的業務 if(to.path==’/login’)判斷是不是登陸了。

next(false)/next(true)/next(“login”)

2、全局解析守衛(beforeResolve)

3、router.afterEach(to,from)    全局後置守衛

二：元件内的鈎子(元件内的守衛)

beforeRouteEnter(to,from,next){//不能擷取元件的執行個體this，目前的守衛執行前，元件執行個體還沒有建立}beforeRouterUpdate(to,from,next){//動态路由foo/:id 在foo/1和foo/2之間跳轉渲染的是同一元件foo，//這個鈎子會在這種情況下被調用。可通路元件執行個體this}beforeRouterLeave(to,from,next){//可通路元件執行個體this}
           

三：路由獨享元件鈎子函數

在路由配置上直接定義beforeEnter守衛

{path:”/user”,compoment:User,beforeEnter:(to,from,next)=>{  //業務  }}
           

29、vuex有哪幾種屬性？

Vuex是專門為vue.js 應用程式開發的狀态管理模式。Vuex使用單一的狀态數，每個應用僅包含一個store應用。五種屬性：State Getter Mutation Action Module。

state => 基本資料(資料源存放地)

getters => 從基本資料派生出來的資料(狀态)

mutations => 送出更改資料的方法，mutation必須是同步函數。同步執行。

可以使用this.$store.commit()送出mutation或者使用mapMutations輔助函數将組建中的methods映射為store.commit()調用

actions =>action送出的是mutation而不是直接變更狀态，異步執行。

在元件中使用 this.$store.dispatch('xxx') 分發 action，或者使用 mapActions 輔助函數将元件的 methods 映射為 store.dispatch 調用

modules => 子產品化Vuex。允許将store分割成子產品每個子產品擁有自己的

state，mutations，action ,getter ,甚至可以嵌套子子產品。

30、vue中的vuex該什麼時候用？vuex的應用場景？

1、如果資料還有其他的元件複用，建議放在vuex中

2、如果需要跨多級元件傳遞資料，建議放在vuex中

3、需要持久化的資料，比如登入後的使用者的資訊，建議放在vuex

4、跟目前業務元件強關聯的資料，可以放在元件内的data中。

31、Vue.js中ajax請求代碼應該寫在元件的methods中還是vuex的actions中？

如果請求的資料是不是被其他元件共用，僅僅在請求的元件中使用，沒有必要放在vuex的state裡，如果被其他的元件複用，請将請求放在action裡，友善複用。

32、keep-alive 緩存元件的了解

keep-alive是一個抽象的元件，它自身不會渲染一個dom元素，也不會出現在父元件鍊中，使用keep-alive包裹動态元件，會緩存下活動的元件執行個體，而不是銷毀他們。用于儲存元件的渲染狀态。

keep-alive元件體用兩個鈎子 activated  和 deactivated

在動态元件中的應用：

Include  定義白名單 exclude 定義黑名單 max定義緩存的上限。

用LRU算法置換緩存：最近通路的将來被通路的機會就大，最近沒有通路的意味着将來通路的機會就下。每次從記憶體中找出最久未使用的資料用于置換新的資料。

33、什麼是MVVM？

MVVM是一種設計思想。Model 層代表資料模型，也可以在Model中定義資料修改和操作的業務邏輯；View 代表UI 元件，它負責将資料模型轉化成UI 展現出來，ViewModel 是一個同步View 和 Model的對象(橋梁)。

在MVVM架構下，View 和 Model 之間并沒有直接的聯系，而是通過ViewModel進行互動，Model 和 ViewModel 之間的互動是雙向的， 是以View 資料的變化會同步到Model中，而Model 資料的變化也會立即反應到View 上。

ViewModel 通過雙向資料綁定把 View 層和 Model 層連接配接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為幹涉，是以開發者隻需關注業務邏輯，不需要手動操作DOM, 不需要關注資料狀态的同步問題，複雜的資料狀态維護完全由 MVVM 來統一管理。

34、MVVM和MVC差別？MVVM主要 

MVVM和MVC都是一種設計思想。MVC是基于後端的開發思想，MVVM是基于前端開發的思想。

主要就是MVC中的Controller演變成ViewModel,，MVVM主要通過資料來顯示視圖層而不是操作節點，解決了MVC中大量的DOM操作使頁面渲染性能降低，加載速度慢，影響使用者體驗問題。主要用于資料操作比較多的場景。

35、請說下封裝vue元件的過程？

首先，元件可以提升整個項目的開發效率能夠把頁面抽象成多個相對獨立的子產品，解決了我們傳統項目開發：效率低，難維護，複用性等問題。

然後，使用Vue.extend方法建立一個元件，然後使用Vue.component方法注冊元件。子元件需要資料，可以在道具中接受定義。而子元件修改好資料後，想把資料傳遞給父元件。可以采用發射方法。

36、聊聊你對Vue.js的模闆編譯的了解

簡而言之，就是先轉化成AST樹，再得到的渲染函數傳回VNODE(Vue公司的虛拟DOM節點)

詳情步驟：首先，通過編譯器把模闆編譯成AST文法樹(抽象文法樹即源代碼的抽象文法結構的樹狀表現形式)，編譯是createCompiler的傳回值，createCompiler是用于建立編譯器的。負責合并選項。然後，AST會經過生成(将AST文法樹轉化成渲染功能字元串的過程)得到渲染函數，渲染的傳回值是VNode，VNode是Vue的虛拟DOM節點，裡面有(标簽名，子節點，文本等等)。

37、vue 的優點是什麼？

低耦合。視圖(View)可以獨立于 Model 變化和修改，一個 ViewModel 可以綁定到不同的"View"上，當 View 變化的時候 Model 可以不變，當 Model 變化的時候 View 也可以不變。

可重用性。你可以把一些視圖邏輯放在一個 ViewModel 裡面，讓很多 view 重用這段視圖邏輯。

獨立開發。開發人員可以專注于業務邏輯和資料的開發(ViewModel)，設計人員可以專注于頁面設計，使用 Expression Blend 可以很容易設計界面并生成 xml 代碼。

可測試。界面素來是比較難于測試的，而現在測試可以針對 ViewModel 來寫。

38、vue生命周期的了解？

總共分為 8 個階段建立前/後，載入前/後，更新前/後，銷毀前/後。

建立前/後：在 beforeCreate 階段，vue 執行個體的挂載元素 el 還沒有。

載入前/後：在 beforeMount 階段，vue 執行個體的$el 和 data 都初始化了，但還是挂載之前為虛拟的 dom 節點，data.message 還未替換。在 mounted 階段，vue 執行個體挂載完成，data.message 成功渲染。

更新前/後：當 data 變化時，會觸發 beforeUpdate 和 updated 方法。

銷毀前/後：在執行 destroy 方法後，對 data 的改變不會再觸發周期函數，說明此時 vue 執行個體已經解除了事件監聽以及和 dom 的綁定，但是 dom 結構依然存在

39、元件之間的傳值？

父元件與子元件傳值：(父元件屬性綁定，子元件props接收資料)

子元件向父元件傳遞資料：(子元件$emit，父元件自定義事件事件綁定)

子元件this.$emit('event', params)  

父元件

40、說出至少 4 種 vue 當中的指令和它的用法

v-if(判斷是否隐藏)、

v-for(把資料周遊出來)

v-bind(綁定屬性)

v-model(實作雙向綁定)

v-on (事件綁定)

41、簡單說一下Vue2.x響應式資料原理(雙向綁定的原理)

Vue資料雙向綁定是通過資料劫持結合釋出者-訂閱者模式方式來實作的，文法主要有{{}}和v-model。首先用遞歸方法周遊所有的屬性值，再用Object.defineProperty()給屬性綁定getter和setter方法添加一個observe(val)監聽器對資料進行劫持監聽;然後建立一個訂閱器來在getter裡收集訂閱者并建立和綁定watcher，如果資料變化，訂閱者就會執行自己對應的更新函數;watcher就是在自身執行個體化的時候往訂閱器裡添加自己，自身必須有一個update的資料，是監聽器和模闆渲染的通信橋梁;最後建立解析模闆指令compile，替換資料，初始化視圖。最終observer來監聽自己的model資料變化通過compile解析編譯模闆指令，利用watcher搭起observer和compile之間的通信橋梁，達到資料變化->視圖更新雙向綁定效果。

42、那你知道Vue3.x響應式資料原理嗎？

Vue3.x改用Proxy替代Object.defineProperty。因為Proxy可以直接監聽對象和數組的變化，并且有多達13種攔截方法。并且作為新标準将受到浏覽器廠商重點持續的性能優化。

Proxy隻會代理對象的第一層，那麼Vue3又是怎樣處理這個問題的呢？

判斷目前Reflect.get的傳回值是否為Object，如果是則再通過reactive方法做代理， 這樣就實作了深度觀測。

監測數組的時候可能觸發多次get/set，那麼如何防止觸發多次呢？

我們可以判斷key是否為目前被代理對象target自身屬性，也可以判斷舊值與新值是否相等，隻有滿足以上兩個條件之一時，才有可能執行trigger。

43、vue2.x中如何監測數組變化

使用了函數劫持的方式，重寫了數組的方法，Vue将data中的數組進行了原型鍊重寫，指向了自己定義的數組原型方法。這樣當調用數組api時，可以通知依賴更新。如果數組中包含着引用類型，會對數組中的引用類型再次遞歸周遊進行監控。這樣就實作了監測數組變化

44、你的接口請求一般放在哪個生命周期中？

接口請求一般放在mounted中，但需要注意的是服務端渲染時不支援mounted，需要放到created中。

45、computed和watch

computed本質是一個具備緩存的watcher，依賴的屬性發生變化就會更新視圖。适用于計算比較消耗性能的計算場景。當表達式過于複雜時，在模闆中放入過多邏輯會讓模闆難以維護，可以将複雜的邏輯放入計算屬性中處理。

watch沒有緩存性，更多的是觀察的作用，可以監聽某些資料執行回調。當我們需要深度監聽對象中的屬性時，可以打開deep：true選項。這樣便會對對象中的每一項進行監聽。這樣會帶來性能問題，優化的話可以使用字元串形式監聽，如果沒有寫到元件中，不要忘記使用unWatch手動登出哦。

46.Vue2.x和Vue3.x渲染器的diff算法分别說一下

簡單來說，diff算法有以下過程

l 同級比較，再比較子節點

l 先判斷一方有子節點一方沒有子節點的情況(如果新的children沒有子節點，将舊的子節點移除)

l 比較都有子節點的情況(核心diff)

l 遞歸比較子節點

正常Diff兩個樹的時間複雜度是O(n^3)，但實際情況下我們很少會進行跨層級的移動DOM，是以Vue将Diff進行了優化，從O(n^3) -> O(n)，隻有當新舊children都為多個子節點時才需要用核心的Diff算法進行同層級比較。

Vue2的核心Diff算法采用了雙端比較的算法，同時從新舊children的兩端開始進行比較，借助key值找到可複用的節點，再進行相關操作。相比React的Diff算法，同樣情況下可以減少移動節點次數，減少不必要的性能損耗，更加的優雅。

Vue3.x借鑒了ivi算法和 inferno算法

在建立VNode時就确定其類型，以及在mount/patch的過程中采用位運算來判斷一個VNode的類型，在這個基礎之上再配合核心的Diff算法，使得性能上較Vue2.x有了提升。(實際的實作可以結合Vue3.x源碼看。)

該算法中還運用了動态規劃的思想求解最長遞歸子序列。

47.虛拟DOM的作用 

由于在浏覽器中操作DOM是很昂貴的。頻繁的操作DOM，會産生一定的性能問題。這就是虛拟Dom的産生原因。vue2的Virtual DOM借鑒了開源庫snabbdom的實作。virtual DOM本質就是用一個原生的JS對象去描述一個DOM節點。是對真實DOM的一層抽象。virtualDOM映射到真實DOM要經曆VNode的create、diff、patch等階段。

48、vue中元件生命周期調用順序說一下

元件的調用順序都是先父後子,渲染完成的順序是先子後父。

元件的銷毀操作是先父後子，銷毀完成的順序是先子後父。

加載渲染過程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted

子元件更新過程

父beforeUpdate->子beforeUpdate->子updated->父updated

父元件更新過程

父 beforeUpdate -> 父 updated

銷毀過程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

49、SSR了解嗎？

Nuxt就是基于Vue的一個應用架構，采用服務端渲染，讓你的SPA應用(Vue)也可以擁有SEO

SSR也就是服務端渲染，也就是将Vue在用戶端把标簽渲染成HTML的工作放在服務端完成，然後再把html直接傳回給用戶端。

SSR有着更好的SEO、并且首屏加載速度更快等優點。不過它也有一些缺點，比如我們的開發條件會受到限制，伺服器端渲染隻支援beforeCreate和created兩個鈎子，當我們需要一些外部擴充庫時需要特殊處理，服務端渲染應用程式也需要處于Node.js的運作環境。還有就是伺服器會有更大的負載需求。

50、你都做過哪些Vue的性能優化？

編碼階段

l 盡量減少data中的資料，data中的資料都會增加getter和setter，會收集對應的watcher

l v-if和v-for不能連用

l 如果需要使用v-for給每項元素綁定事件時使用事件代理

l SPA 頁面采用keep-alive緩存元件

l 在更多的情況下，使用v-if替代v-show

l key保證唯一

l 使用路由懶加載、異步元件

l 防抖、節流

l 第三方子產品按需導入

l 長清單滾動到可視區域動态加載

l 圖檔懶加載

l 使用CDN資源，減少伺服器的壓力。将公用的js庫通過script标簽外部引入。

SEO優化

l 預渲染

l 服務端渲染SSR

打包優化

l 壓縮代碼

l Tree Shaking/Scope Hoisting

l 使用cdn加載第三方子產品

l 多線程打包happypack

l splitChunks抽離公共檔案

l sourceMap優化

使用者體驗

l 骨架屏：加一個首屏loading圖，提升使用者體驗；

l PWA(全稱Progress Web App)即漸進式的web應用。

l 還可以使用緩存(用戶端緩存、服務端緩存)優化、服務端開啟gzip壓縮等。

51、hash路由和history路由實作原理說一下

location.hash的值實際就是URL中#後面的東西。

history實際采用了HTML5中提供的API來實作，主要有history.pushState()和history.replaceState()。

52、程式設計時跳轉方法的參數可以是一個字元串，或者一個描述的位址的對象。

router.push(‘home’);

router.push({path:’home’})

router.push({name:’user’,parmas:{userId:’ 123’ }})命名的路由(動态路由)

router.push({path:’goods’},query:{plan:’private’}})帶查詢參數

router.push({name:’user’,params:{userId}})

router.push ({path:’/user/${userId}})

     下面的情況不生效：

router.push({path:’user’,params:{userId}})

53、非響應式情況 情況總是要發生

01、對數組使用了 非變異 (non-mutating method) 方法(傳回的了新數組) 修改

02、數組的長度時 修改數組索引上的值(根索引) 給對象添加了不存在的屬性

解決

Vue.set(數組, index, value)

vm|this.$set(對象, key, value)

this.$forceUpdate() 強制重新整理

吃虧後的經驗

不要修改數組的根鍵,不要修改數組的長度,資料一開始都要聲明在data選項内部，不要對數組使用非變異的api

Vue.set(vm.items, indexOfItem, newValue)

let a = [

    {name:'張三',age:'20',sex:1},

   {name:'李四',age:'21',sex:0},

    {name:'王五',age:'22',sex:1},

]

Vue.set(a,1,a[1]);//就可以改了這時候 a 是源資料， 1 是鍵， a[1]是修改後的資料(裡面的三個參數)

Vue.forceUpdate();//也可以用這個方法手動觸發視圖更改  強制更新

54、vue cli3 和 vue cli 2 的差別

\\3.0安裝：vue create 3.0project     2.0安裝：vue init webpack 2.0project

\\vuex是3.0新加的 ,還有一個重要的3.0安裝目錄時，自動下載下傳node-model

\\3.0啟動項目：npm run serve        2.0啟動：npm  run dev

\\3.0中有一些目錄build、config沒有了， 在根目錄下建立一個vue.config.js

具體的配置文檔：

module.exports = {

    baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',

    // outputDir: 在npm run build時 生成檔案的目錄 type:string, default:'dist'

    // outputDir: 'dist',

    // pages:{ type:Object,Default:undfind }

    devServer: {

        port: 8888, // 端口号

        host: 'localhost',

        https: false, // https:{type:Boolean}

        open: true, //配置自動啟動浏覽器

        // proxy: 'http://localhost:4000' // 配置跨域處理,隻有一個代理

        proxy: {

            '/api': {

                target: '',

                ws: true,

                changeOrigin: true

            },

            '/foo': {

                target: ''

            }

        },  // 配置多個代理

    }

}

55、指令周期有什麼？自定義指令了解過嗎？怎麼用的注意什麼

bind：隻調用一次，  指令第一次綁定到元素時調用。 可以進行一次性的初始化設定。   

inserted：被綁定元素插入父節點調用(僅保證父節點存在，但不一定已被插入文檔中)(注意鈎子函數的用法)

update：模闆更新調用  

componentUpdated:指令所在元件的vNode及其子Vnode全部更新後調用      

unbind：指令與元素解綁時，隻調用一次