1=>為什么data是一個函數
每復用一次組件，就會返回一分新的data。
也就說:【每個組件實例創建】一個【私有】的數據空間。各個組件維護各自的數據。
如果單純的寫成對象形式，那么所有組件實例共用了一份data.
就會造成一個發生改變，全部都會發生改變。
data(){
return{ }
}
3=> vue的生命周期 8+2 ok
我們都知道vue常用的8個生命周期，但是這幾個生命周期你熟悉嗎?
activated keep-alive 專屬，組件被激活時調用 [ai k t v ti de], 第一次進入也會觸發activated
deactivated keep-alive 專屬，組件被銷毀時調用 【di ai k t v ti de】
4=> 怎樣理解 Vue 的單項數據流 ok
數據總是從父組件傳到子組件，
子組件沒有權利修改父組件傳過來的數據，[如果你強行更改，vue會有紅色的警告，告訴你這個是單向的]
只能請求父組件對原始數據進行修改。
這樣會防止從子組件意外改變父組件的狀態，
從而導致你的應用的數據流向難以理解。
5=> v-if 和 v-for 為什么不建議一起使用 ok
vue2中先解析v-for然后在解析v-if,[會造成消耗性能]
如果遇到需要同時使用時可以嵌套一層元素
<template></template>
6 template 的作用
template的作用是模板占位符，可幫助我們包裹元素.
但在循環過程當中，template不會被渲染到頁面上
template標簽不支持v-show指令，
即v-show="false"對template標簽來說不起作用。
template標簽支持v-if、v-else-if、v-else、v-for這些指令。
6.1=> vue3 v-for和v-if做了更改
很幸運 vue 3.x 中， v-if 總是優先於 v-for。
07==> Vue的父子組件生命周期鈎子函數執行順序 ok
加載渲染過程
父beforeCreate -> 父created -> 父beforeMount ->
->子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
【你可以理解頁面渲染，這樣就好理解了】
子組件更新過程
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
父組件更新過程
父beforeUpdate -> 父updated
銷毀過程
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
8. 虛擬DOM是什么？有什么優缺點？
由於在瀏覽器中頻繁操作DOM代價是很昂貴的。會產生一定性能問題。這就是虛擬Dom的產生原因。
Vue2的Virtual DOM 借鑒了開源庫 snabbdom 的實現。
Virtual DOM本質就是用一個[原生的JS對象]去[描述]一個[DOM節點]，是對真實DOM的一層抽象。
上面這一句話就翻譯為代碼 就是
<div>
<p>123</p>
</div>
對應的virtual DOM（偽代碼）：
var Vnode = {
tag: 'div',
children: [
{ tag: 'p', text: '123' }
]
};
優點：
1、保證性能下限：雖然它的性能並不是最優的；
但是比起粗暴的DOM操作，還有不錯的性能，
2、無需手動操作DOM：我們不需手動去操作DOM，只需要寫好代碼邏輯，
框架會【根據虛擬DOM】和【數據雙向綁定】，
幫我們自動更新視圖，提高我們的開發效率。
3、跨平台：虛擬DOM可以進行更方便地跨平台操作，
缺點：
1、無法進行極致優化：雖然虛擬DOM + 合理的優化，足以應對大部分應用的性能需要，
但在一些【性能要求極高】的應用中虛擬DOM無法沒滿足。
2、首次渲染大量DOM時，由於多了一層DOM計算，會比innerHTML插入慢。
明天繼續-----------------------------------------------------------------------------------------------------------------------
1=> Vue3.0 和 2.0 的【響應式原理】區別
Vue3.x 改用 Proxy[pu luo k she] 替代 Object.defineProperty[di fai n prɒ pə ti]。
因為 Proxy 可以直接監聽對象和數組的變化，
而Object.defineProperty是不可以直接對【數組】進行監聽
Vue2 中修改數組的索引和長度無法被監控到。
對象新增的屬性無法被Object.defineProperty監聽到
2=> Vuex 頁面刷新數據丟失怎么解決？
在刷新頁面的時候，將vuex中的只存在本地
也可以使用第三方插件。 vuex-persist (pəˈsɪ s t])插件，
它是為 Vuex 持久化儲存而生的一個插件。
3 你都做過哪些 Vue 的性能優化？
語法方面:
v-if 和 v-show 區分使用場景
computed 和 watch 區分場景使用
v-for 遍歷必須加 key，key最好是id值，且避免同時使用 v-if
//數據方面
對象層級不要過深，否則性能就會差。
不需要響應式的數據不要放在 data 中（可以使用 Object.freeze() 凍結數據）
// 加載-緩存
路由懶加載
第三方插件的按需加載
適當采用 keep-alive 緩存組件
防抖、節流的運用
4 Vue.mixin 的使用場景和原理
在開發的過程中我們會遇見相同或者相似的邏輯代碼。
可以通過vue的 mixin 功能抽離公共的業務邏輯，
然后通過impor再組件中引入。通過mixins注冊進來。
這樣我們就可以使用mixin中共同的業務邏輯
<script>
import { mixinmethods} from "../mixin.js"
export default {
// mixins是固定的，里面傳入一個數組
mixins:[mixinmethods]
}
</script>
如果組件中data數據與混合中的數據重復，會進行合並。使用data中的數據。
【組件中是可以直接使用混合中的數據的，自己理解】
需要注意的是：聲明周期不會進行合並
如果你在混合中使用了生命周期，組件中也是用生命周期。
組件和混合中的生命周期都會被執行。
5. nextTick 使用場景和原理
場景:進行tab切換的時候，當顯示A組件的時候。
A組件的input自動聚焦。這個時候獲取A組件的input實例就會出現undefiend
為什么會出現undefined?
Vue 實現響應式並不是數據發生變化之后 DOM 立即變化，而是按一定的策略進行 DOM 的更新。
原理：
nextTick 將回調延遲到下次 DOM 更新循環之后執行
6、 keep-alive 使用場景和原理
keep-alive 是 Vue 內置的一個組件，可以實現組件緩存，當組件切換時不會對當前組件進行卸載。
常用的兩個屬性 include/exclude，符合條件的組件或者頁面進行緩存。 [include 是頁面中的name ]
include的類型可以是字符串，數組，正則。
兩個生命周期 activated/deactivated，用來得知當前組件是否處理活躍狀態。
keep-alive 運用了 LRU 算法，選擇最近【久未使用的組件】予以淘汰。
keep-alive其實還有一個屬性max, 最大允許緩存多少個，如果超出最大個數。
會將已緩存組件中最久沒有被訪問的實例會被銷毀掉。
[exs k lu d] exclude 排除
7、Vue.set 方法原理
在兩種情況下修改 Vue 是不會觸發視圖更新的。
1、給響應式對象新增屬性,這個時候是不會跟新視圖的
2、直接更改【數組下標】來修改數組的值。
我們可以通過 Vue.set(this.userInfo, 'sex' ,'男')
或者 this.$forceUpdate() 來解決這個問題
set 原理如下
因為是響應式數據,
我們給對象和數組本身新增了__ob__屬性，代表的是 Observer【餓 b zɜ və(r)】 實例。
如對象新增不存在的屬性，首先會把新的屬性進行響應式跟蹤。
當數據發生變化后，watcher【ˈwɑːtʃər]】 去更新視圖.
【使用splice方法向數組內添加元素時】該元素會自動被變成響應式的
源碼：https://blog.csdn.net/leelxp/article/details/107212555
8 assets 和static【不會打包】的區別
答：相同點：assets【a sai s 】和static兩個都是存放靜態資源文件，
圖片，字體圖標，都可以放在這兩個文件下。
不相同點：
build的時候會將assets中放置的靜態資源文件【會進行】打包壓縮上傳.
最終會放置在static中跟着index.html一同上傳至服務器。
static中放置的靜態資源文件就【不會】打包壓縮
建議：將項目中樣式文件js文件等都可以放置在assets中，
走打包這一流程。減少體積。
而項目中引入的第三方的資源文件如iconfoont.css等文件可以放置在static中，
因為這些引入的第三方文件已經經過處理，我們不再需要處理，直接上傳。
巧計:聽讀音, assets 有壓縮。
明天繼續看----------------------------------------------------------------------------------------------
1 .vue的兩個核心點
答：數據驅動、組件系統
數據驅動：保證數據和視圖的一致性。
組件系統：頁面中的所有模塊可以看作全部是由[組件樹]構成的。
2. vue-router 有哪幾種導航鈎子?
答：三種，
第一種：是全局導航鈎子：
router.beforeEach(to,from,next){}
router.afterEach(to,from,next){}
作用：跳轉前進行判斷攔截。 2個
第二種：組件內的鈎子
beforeRouteEnter (to, from, next) { }
beforeRouteLeave(to, from, next){ }
第三種：單獨路由獨享鈎子
beforEnter:(to, form,next) => {
}
3. $route 和 $router 的區別
答：$router是VueRouter的實例，{可以導航到不同的URL,使用$router.push方法。}
返回上一個歷史用$router.go(-1) 或者 $router.back()
$route為當前router跳轉對象。里面可以獲取當前路由的name,path,parmas等。
4.vue初始化頁面閃動問題
有些時候看到類似於{{message}}的字樣，
雖然一般情況下這個時間很短暫，但是我們還是有必要讓解決這個問題的。
首先在css里加上
[v-cloak] { [k ləʊ k][掩蓋]
display: none;
}
如果沒有徹底解決問題，則在根元素加上:style="{display: 'block'}"
還有一種方法：使用v-text來解決
5. Vue2中注冊在router-link上事件click無效解決方法
使用@click.native。原因：router-link會阻止click事件，.native指直接監聽一個原生事件。
在vue3中native被移除了
6. Vue里面router-link在電腦上有用，在安卓上沒反應怎么解決？
答：Vue路由在Android機上有問題。
【通過工具查看一下該標簽是否被正確解析了,如果沒有使用使用一些插件來進行解決】babel問題，
7. vue-loader是什么？使用它的用途有哪些？
答：vue文件的一個加載器，將template/js/style轉換成js模塊
8. 說說你對 SPA 單頁面的理解，它的優缺點分別是什么？
1.用戶體驗好、快，內容的改變不需要重新加載整個頁面。
2.SPA 相對對服務器壓力小；
缺點：
初次加載耗時多：因為要在加載頁面的時候將 JavaScript、CSS 統一加載，
SEO 難度較大：由於所有的內容都在一個頁面中動態替換顯示，所以在 SEO 上其有着天然的弱勢。
9 vue常用的修飾符 【沒有理解】
.stop等同於JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同於JavaScript中的event.preventDefault()，防止執行預設的行為（如果事件可取消，則取消該事件，而不停止事件的進一步傳播）；
.capture：與事件冒泡的方向相反，事件捕獲由外到內；
.self：只會觸發自己范圍內的事件，不包含子元素；
.once：只會觸發一次
10. Proxy 與 Object.defineProperty 優劣對比
Proxy 的優勢如下:
Proxy 可以直接監聽對象而非屬性；
Proxy 可以直接監聽數組的變化；
Proxy 有多達 13 種攔截方法,不限於 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具備的；
Proxy 返回的是一個新對象,我們可以只操作新的對象達到目的,而 Object.defineProperty 只能遍歷對象屬性直接修改；
Proxy 作為新標准將受到瀏覽器廠商重點持續的性能優化，也就是傳說中的新標准的性能紅利；
Object.defineProperty 的優勢如下:
兼容性好，支持 IE9，
而 Proxy 的存在瀏覽器兼容性問題,而且無法用 polyfill 磨平，
因此 Vue 的作者才聲明需要等到下個大版本( 3.0 )才能用 Proxy 重寫。
11 vue的自定義指令
和css樣式有關的操作 放在bind函數中
bind: function (el) {},
和js行為有關的操作 可以寫在inserted()這個函數中去
inserted: function (el) { el.focus() },
updated(el) {
//當v-model跟新的時候，就會執行這個函數 這個函數會執行多次
},
el->表示被綁定了指令的那個元素，這個el是一個原生的js對象
運用的場景：綁定按鈕權限的時候，我就使用了 自定義指令
=明天繼續看==
1.v-show 與 v-if 有什么區別？ok+
v-if 是真正的條件渲染，也是惰性的;
如果在初始渲染時條件為假，則什么也不做——
直到[條件第一次變為真]時，才會開始渲染
v-show 不管初始條件是什么，元素總是會被渲染.
並且只是簡單地基於 CSS 的 “display” 屬性進行切換。
頻繁切換使用v-show, 切換較少使用v-if
2.computed 和 watch 的區別和運用的場景？ok
computed： 是計算屬性，computed 的值有緩存。
只有它[依賴的屬性值]發生改變，computed 的值時才會重新計算。
watch： 更多的是「觀察」的作用，類似於某些[數據的監聽回調]。
每當監聽的數據變化時，都會執行回調，進行后續操作。
場景:
{form表單中的input都必須有有值， 按鈕才能夠進行點擊 我們就可以使用computed }
當我們需要在數據變化時【執行異步】或【開銷較大】的操作時，應該使用 watch
3. v-model 的原理？ok
v-model 在內部為不同的輸入元素[使用不同的屬性]並[拋出不同]的事件：
text 和 textarea 元素使用 value 屬性和 input 事件；
checkbox 和 radio 使用 checked 屬性和 change 事件；
select 字段將 value 作為 prop 並將 change 作為事件。
4. vue-router 路由模式有幾種？ ok
vue-router 有 3 種路由模式：hash、history、abstract，對應的源碼如下所示：
hash: 使用 hash 值來作路由。支持所有瀏覽器。
history : 有些瀏覽器不支持
abstract : [ æ bˈstræ k t] 支持所有 JavaScript 運行環境，如 Node.js 服務器端。
如果發現沒有瀏覽器的 API，路由【會自動強制進入】這個模式.
6. 虛擬 DOM 實現原理？
虛擬 DOM 的實現原理主要包括以下 3 部分：
1.用一個[原生的JS對象]去[描述]一個[DOM節點]，是對真實DOM的一層抽象。
2.diff 算法 — 比較兩棵虛擬 DOM 樹的差異；【dif算法比較兩顆樹直接的差異】
3.pach 【帕其】算法 — 將兩【個虛擬DOM對象的差異】應用到【真正的 DOM 樹】。
7、Vue 中的 key 有什么作用？ ok
key 是 Vue中vnode的唯一標記，通過這個key，我們的diff操作可以更准確、更快速。
2.更准確表現在sameNode函數 a.key === b.key 對比中可以避免就地復用的情況。所以會更加准確。
(我的理解:通過 sameNode函數對比key值，避免了就地復用的情況，所以會更加的准確)
3.更快速：利用key的唯一性生成map對象，來獲取對應節點，比遍歷方式更快。
8. key的實際運用場景
1.處理勾選時候的bug。 比如列表中有 【A,B,C】
我們勾選B，向列表中添加D,列表是[D,A,B,C]此時卻勾選了A
2.key值應該是唯一的。最后使用id值。
為什么使用id值，而不是index
本文的地址 ：https://juejin.cn/post/6844903918753808398#heading-22
地址來源：https://zhuanlan.zhihu.com/p/92407628
本文的源地址：https://www.cnblogs.com/wenshaochang123/p/14888494.html
本文的源地址：https://www.jianshu.com/p/38f38f61b557
繼續=================================================================
1.Vue是什么?(了解就可以)
1.是一套用於構建用戶界面的漸進式框架，自底向上逐層應用。
2.vue核心只關注視圖層，不僅容易上手，而且方便與第三方庫整合。
3.當與現代化的工具以及各種支持類庫結合使用時，完全能夠為復雜的單頁應用提供驅動。
2.Vue的優點 (了解)
1.開發者:只關注視圖，簡單易學，
2.雙向數據綁定，操作數據簡單
3.組件化，構建單頁面有優勢
4.視圖數據分離，使用數據更方便
5.虛擬DOM+diff算法，提高頁面的渲染速度
3.watch的使用
watch: {
firstName(newName, oldName) {
// newName 是新值，oldName舊值
},
immediate: true,
}
immediate: 立即監視， deep : 深度監視
4.常用的事件修飾符
.stop ==> event.stopPropagation() 阻止事件冒泡
.prevent ==> event.preventDefault() 取消默認事件，不停止傳播
.capture ==> 事件捕獲
.self ==> 只觸發自己范圍內的事件， 不包含子元素
.once ==> 只會觸發一次
5.你對slot的理解
slot是 vue 內容分發機制，插槽是子組件的一個模板標簽。
這個標簽由父組件決定，有默認插槽，具名插槽和作用域插槽。
默認：匿名插槽，直接在組件送寫slot。一個組件只能有一個匿名
具名：帶有名字的插槽，slot name='xxx'可以有多個。
作用域: 可以有名字也可以無，不同點，在子組件渲染時，
可以將子組件內部的數據傳遞給父組件，父組件根據子組件的數據決定如何渲染
6.Vue模版編譯原理
解析階段：對 template 字符串解析，將標簽，指令，屬性轉為抽象語法樹 AST
優化階段：遍歷 AST 找其中的靜態節點進行標記，方便在重新渲染的時候進行 diff 比較時 ，跳過一些靜態節點
生成階段：將 AST 轉為 render函數字符串