vue是什么

以資料驅動為視圖的漸進式MVVM框架，

• 漸進式:循序漸進的使用vue,可選擇性強,可以只使用vue的小功能,不必完全使用vue，不強制的意思，
  – mvvm：m:資料模型, v-view 視圖:資料是雙向系結的,所有資料改變導致視圖改變，

vue底層原理和vue描述

原理:Object.definProperty
vue:優點:虛擬dom,模塊化開發,資料驅動,雙向回應，瀏覽器統一兼容，
缺點：由于是js生成的虛擬dom,不利于seo爬蟲爬取,首屏加載相對于靜態頁面慢，

data為什么是函式

因為組件的data會提升,而根實體上的data是物件,會導致一個合并，把data變成函式,以呼叫的方式來使,避免了覆寫和沖突

什么是虛擬dom

使用js演算法動態生成的dom叫虛擬dom

diff演算法和key的關系

同層對比,只要發現不一樣的節點就會用新的dom替換舊的dom，正是因為diff算出來的虛擬dom沒有跟蹤標識,當一個回圈出來的虛擬dom串列中
任意一個元素被修改,diff演算法沒辦法找到它,只能重新回圈渲染一份新的dom，加了key之后,每個dom有了自己唯一的標識,這樣修改的時候可以
精準的找到并修改,從而節省了性能，所以,key的值必須唯一,而且不可以用亂數,用時間,不建議用下標

生命周期

4個階段8個函式,其最大的問題是自動發起ajax請求問題,如果是在瀏覽器中運行,則應該在mounted發起,如果是服務端渲染,應該在created發起，

 //創建階段
    beforeCreate(){
        //骨架屏來占位
        //日志上傳
    },
    created(){
        //發起ajax請求，【不推薦】因為ajax異步，生命周期同步
        //在服務器端渲染的時候，這個函式是最后一個生命周期
        //技術胖
    },
    // 掛載階段
    beforeMount(){
        // 可以對一些資料進行格式化
    },
    mounted(){
        // 發起ajax【推薦】前端專案大多數都是運行在瀏覽器，極少數是服務器渲染
        
    },
    // 更新階段
    beforeUpdate(){
        // 可以二次對資料進行修改
    },
    updated(){
        // 只能觀察到更新的資料
    },
    // 銷毀階段
    beforeDestroy(){
        //清除常駐記憶體的垃圾
        //對用戶的離開行為進行提示
    },
    destroyed(){
        
    }

內置組件

solt 插槽

是自定義組件的高級形式,多用于模板復用,動態渲染傳入的內容或組件，
使用場景：插件的封裝,網站解構布局等，

• 匿名插槽
  插槽組件中傳入的散內容被solt標簽接收
• 具名插槽
  使用template標簽,用v-solt指令系結名字,插槽組件中slot組件使用用name屬性給插槽取名字
• 插槽傳參
  slot組件傳遞引數,上游組件的template接收
• v-slot：的縮寫是#

keep-alive 快取組件

語法:`<keep-alive excludes='MyDom'>
    <MYDom>
</keep-alive>`
凡是被它包裹的組件,都會被快取
- includes 只快取被指定的組件
- excludes 不快取指定的組件

keep-alive生命周期

- activated 快取的組件被激活了
- deactivated 快取的組件被停用了

component 動態加載組件

必須使用is屬性動態加載組件名稱,解放了大量書寫v-if或v-show問題，

transition 影片組件

使用name屬性控制影片類名的前綴,從而可以產生不同的影片效果，
一般用于嵌套在路由視圖組件或動態組件，

template 模板

第一種作為vue模板標簽使用,第二種作為插槽的模板，

nextTick

保證所有dom全部更新完畢之后才會觸發,用于獲取dom更新后的獲取dom1節點資料

指令

html
專門用于渲染字串dom片段,底層做了防止注入攻擊,會將js內容轉義

text
只能渲染文本內容

for
字串,數字,物件,陣列
遍歷陣列和物件的區別是物件有三個引數,分別是值,鍵,下標

model
資料雙向系結指令,專門用在表單元素上

on
縮寫是@,兩種用法,系結原生事件,自定義事件

bind
可以系結原生的屬性,
系結自定義屬性
系結給自定義組件上是傳參方式
動態系結屬性
v-bind:[name]='data'
動態系結屬性值
v-bind:checked='state'
系結class
v-bind:class='{active:true/false}'
系結style
v-bind:style='{color:color}'

once
讓元素內的值永遠保持第一次渲染,優化性能的一個手段,比如給固定寫死的靜態dom加上之后,這里的dom將不會在更新了,不參與diff重算，

pre
不會使用vue去決議里面的內容,而是當字串渲染了,

clock
防止閃爍，當一個值在頁面中使用的時候,如果該值是ajax的回傳值,那么值初始化的時候為空,則會導致頁面閃爍，

show
控制元素的顯示與隱藏,原理是css的display:none;

if
控制元素的加載與銷毀,如果頻繁切換應該使用v-show

slot
插槽的指令,縮寫是#

監聽和計算屬性

相同

都可以監聽資料的變化

不同

計算屬性監聽一個值,回傳一個新值,如果這個值不用的話,則監聽不會觸發，
watch專門監聽一個值的改變

計算屬性沒有資料型別的限制,watch如果監聽物件或者陣列,必須開啟深度監聽deep為true;

watch可以執行異步操作,computed是立即回傳,所以不能執行異步

計算屬性只要寫了受觀測的資料,就會立即對資料監聽,watch只能監聽一個資料，

計算屬性如果默認是只讀的,如果想修改則必須是物件寫法,在set函式中修改被監聽的資料，

修飾符

事件的

• once 事件只執行一次
• native 系結原生事件 當給予組件綁的時候
• stop 組織冒泡
• prevent 阻止默認事件

屬性的

v-bind.sync 偽雙向資料系結
v-bind.prop 把屬性轉成不可見的屬性

指令

v-model.lazy 當用戶失去焦點后觸發
v-model.number 嘗試轉成NaN
v-model.trim 去掉首尾空字串

鍵盤修飾符

13和enter 監聽回車

滑鼠

right和left

訂閱發布模式

訂閱者: 派發事物接收的物件,比如dom元素
發布者: 事物委托物件,比如proxy

骨架屏優化

當頁面基于資料渲染,資料尚未獲取到,使用骨架屏占位，

動態系結指令

v-bind；[name]，name是變數,賦予任意值

組件通信

父傳子

父組件v-bind傳遞,子組件props接收

子傳父

父組件v-on函式,子組件使用$emit呼叫

父子雙向

• v-model 自動注入value值和input函式
• .sync 偽資料雙向系結

兄弟

• 讓父組件充當中間人
• $parent獲取到父組件實體
• $children 獲取到所有的子組件

跨級

• $root 獲取根實體物件
• $on和$event使用同一個父級,子級用on發送,父用event監聽
• 黑魔法vae1.0bus中央事件池子，new一個vue讓它作為中間人,基于on和event來處理，
• 最終是vuex

vue專案優化

• 按需加載-組件的懶加載,只有當用戶訪問該組件時,才去加載，
• 打包的時候關閉原始碼映射,可以提高打包速度
• 模塊化代碼復用，
• 使用動態加載組件component
• 頻繁切換的元素優先使用v-show
• 使用回圈渲染的時候避免使用v-if
• 給大量子元素系結事件的時候優先使用事件委托
• 使用精靈圖優化加載小圖示
• 使用骨架屏優化首屏加載慢的問題

自定義系統（指令/過濾器）插件

自定義指令directive

擴展vue沒有的指令功能,舉例:當頁面打開后讓input獲取焦點

• 語法

directives:{
    focus:{
        inserted(el,binding,olnode){
            // el 是系結的元素物件
            // binding是outions,里面有value
            // oldnode舊的虛擬dom
        }
    }
}

自定義過濾器filters

在不修改原資料的情況下,對資料進行處理,回傳新的資料，

• 語法:

// 宣告
filters:{
    add(value){
        return value+666
    }
}
// 使用
{{n | add}}

物件.install 方法

vue的插件是一個綜合性的功能封裝，

• 語法:

// 宣告
exprot default {
    install(value,option){
        /// *** value.filters
    }
}
// 使用
Vue.use(plugin,{lg:trye})

mixin 混入

減少當前組件的代碼體積的,把一些無關緊要的代碼提取到外面,可以給其他組件進行復用，
混入是js代碼復用，
但是,它不用和全域使用,否則會出現沖突

• 如果混入里的值或函式和組件的重復了,一定用組件里的，
• 如果混入里生命周期和組件的重復了,先混入后組件,會合并掉

spa 單頁面應用

專案中只有一個html檔案，

v-model原理

object.defineProtperty

el和$mount 區別

el是配置,mount是方法
el比mount掛載的快，mount要等全部

Vue.set方法

因為object.defineProtperty方法的缺陷,導致動態添加或洗掉的屬性不能被監聽回應,所有才用這個方法，

路由的底層原理

history和loaction.hash

路由的傳參方式

• query 用？類似于get請求方式傳參
• params 動態路由的動態欄位
• hash 非hash模式下使用#傳參,會被hash接收
• meta 元資料,元資訊,路由配置的時候寫死的，
• 屬性傳參,凡是被他渲染出來的路由組件都會接收props屬性

路由的攔截器

全域守衛：前置守衛 beforeEach 用來做全域的路由權限管理 后置守衛 afterEach 沒有next，最好用來上報日志
路由獨享：beforeEnter 確認進入前
組件守衛：beforeRouteUpdate 獲取動態組件的欄位 更新, 離開 beforeRouteLeave 用于確人用戶離開行為，表單頁面

router和route區別

router是new的vueRouer的實體物件,它擁有路由的全部功能，
route 僅表示當前路由的資訊

宣告式導航和編程式導航

宣告式指<router-link>
編程式指this.$router.push

跳轉方式

push 向歷史記錄中添加一條記錄
go 向歷史記錄中前進后退，值是數字
back 后退
forward 前進
replace 用當前地址替換歷史記錄中最后一條地址

路由配置方式

動態路由：使用/:name
嵌套路由： 使用children
別名：alias用陣列包裹可以設定多個
重定向：redirect
命名路由：name屬性

路由的組成部分

導航，視圖，配置

路由組件懶加載

一個函式回傳import函式加載組件
() => import('./component')

監聽滾動事件

scrollBehavior可以設定滾動條初始的位置，當路由跳轉的時候他會執行

vuex作業流程

1.store里的state在組件中使用
2.組件使用dispatch呼叫action派發業務
3.action使用commit呼叫mutation
4.mutation呼叫state進行修改
5.當state改變后,store通知組件更新

vuex的組成部分

• state
• getters
• mutations
• modules
• actions
• plugins
• strict

嚴格與非嚴格模式的區別

嚴格模式

mutations只能運行同步代碼,且只能在這里修改state

非嚴格模式

state可以在任何地方修改,mutations也可以執行異步代碼

輔助函式

• matState
• mapGetters
• mapMutations
• mapActions
• createNamespacedHelpers

mutation和action區別

mutation式唯一修改state,且只能運行同步代碼,action專門用于處理異步操作,只能通過呼叫mutation修改state

state和getter的關系

state相當于組件里的data,getters相當于組件里的computed
getters是基于state計算出來的

vuex的模塊化

modules用于大型專案開發，主要負責獨立模塊的獨享狀態管理
默認state和getter是歸屬于當前模塊的作用域的，但是mutation和action函式會自動提升到根store物件下面，所以需要命名空間，每個模塊使用namespaced屬性開啟

ui庫的使用

pc：element-ui 移動：vant