Vue知識點(未完待續)

問題來源https://mp.weixin.qq.com/s/XcUDjrnaFc-P_WQsNczHwA

此文章附部分答案，本人菜鳥一枚，答案爲參考答案，僅作爲個人理解，如有誤解，請多多指教

Vue相關

你知道vue的模板語法用的是哪個web模板引擎的嗎？說說你對這模板引擎的理解？
你知道v-model的原理嗎？

1. v-bind：綁定響應式數據

2. 觸發input事件，並傳遞數據

你有使用過vue開發多語言項目嗎？說說你的做法？

一、安裝vue-i18n依賴（npm）;

npm install vue-i18n --save

二、搭建配置文件

在根目錄創建一個i18n文件夾

創建一個index.js文件

import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);

const messages = {
    zh_CN: require("./locale/zh_CN"),//中文語言包
    en_US: require("./locale/en_US")
}

export default new VueI18n({
    locale:'zh_CN',//默認語言
    messages:messages
})

在i18n文件夾下，創建locale文件夾，創建zh_CN.js和en_US.js文件

三、將語言包引入vue項目中

//在main.js中引入
import i18n from "@/i18n"

new Vue({
    el:'#app',
    router,
    store,
    i18n,
    components:{
        App
    },
    template:'<App/>'
})

四、使用

<button type="button">{$t('footer.open')}</button>

this.btnText = this.$t('footer.open');

在使用計算屬性的時，函數名和data數據源中的數據可以同名嗎？

不可以，因爲初始化vm的過程，會先把data綁定到vm，再把computed的值綁定到vm，會把data覆蓋

vue中data的屬性可以和methods中的方法同名嗎？爲什麼？

不可以，Vue會把methods和data的屬性全部代理到Vue生成的對象中，因此會被覆蓋

怎麼給vue定義全局的方法？

1、掛載到vue的prototype上。缺點是調用這個方法的時候沒有提示；

2、利用全局混入mixin，因爲mixin裏面的methods會和創建的每個單文件組件合併，優點是調用這個方法的時候有提示

vue2.0不再支持v-html中使用過濾器了怎麼辦？

1、全局方法

vue.prototype.msg=function(msg){
    return msg.replace("\n","")
}

2、computed 屬性

new Vue({
    el:"#app",
    data:{
        content:"XXX"
    },
    computed:{
        content(msg){
            return msg.replace("\n","")
        }
    }
})

3、$options.filters

//在定義的vue裏的filter添加方法
new Vue({
    el:"#app",
    filters:{
        msg(msg){
            return msg.replace(/\n/g,"")
        }
    },
    data:{

    }
})

怎麼解決vue打包後靜態資源圖片失效的問題？

1、修改config=>index.js=> build:{ assetsPublicPath:'./'}

2、找到build=>utils.js=>if(options.extract)條件中加一行 publicPath:'../../'

怎麼解決vue動態設置img的src不生效的問題？

使用require圖片路徑

使用vue後怎麼針對搜索引擎做SEO優化？

1、目前，對SEO支持比較好的項目方案是採用服務端渲染；

2、如果採用了前後端分離的單頁項目，而不需要AJAX獲取內容，可以使用prerender-spa-plugin這個插件，這個插件是一個webpack插件，可以在打包過程中通過無頭瀏覽器去渲染頁面，並生成對應的HTML。此方案僅適合路由是靜態的，並且路由數量非海量；

3、如果頁面內容通過AJAX動態獲取，vue單頁項目可以使用prerender，這是一個預渲染服務器

跟keep-alive有關的生命週期是哪些？描述下這些生命週期

有關的是activated和deactivated

keep-alive的生命週期

1、activated：頁面第一次進入的時候，鉤子觸發順序是created=>mounted=>activated

2、deactivated：頁面退出的時候觸發deactivated，當再次進入或者後退的時候只觸發activated

如果現在讓你從vue/react/angularjs三個中選擇一個，你會選哪個？說說你的理由
你知道vue2.0兼容IE哪個版本以上嗎？

Vue不支持IE8及以下版本，因爲Vue的響應式原理是基於es5的Object.defineProperty的，而這個方法不支持ie8及以下

使用vue開發一個todo小應用，談下你的思路

1、引用vue.js 2、全局組件註冊 3、vue-cli腳手架

你有看過vue推薦的風格指南嗎？列舉出你知道的幾條

Vue官方風格指南https://cn.vuejs.org/v2/style-guide/（詳情請移步官網）

優先級A的規則：必要的（規避錯誤）

#組件名爲多個單詞：避免跟現有的以及未來的HTML元素相沖突

#組件數據：組件的data必須是一個函數

#Prop定義應該儘量詳細

#爲v-for設置鍵值：總是用key配合v-for

#避免v-if和v-for用在一起：永遠不要吧v-if和v-for同時用在同一個元素上

#爲組件樣式設置作用域：scoped

#私有屬性名：使用模塊作用域保持不允許外部訪問的函數的私有性

優先級B的規則：強烈推薦（增強可讀性）

#組件文件：只要有能夠拼接文件的構建系統，就把每個組件單獨分成文件

#單文件組件文件的大小寫：單文件組件的文件名應該要麼始終是單詞大寫開頭（PascalCase）,要麼始終是橫線連接（kebab-case）

#基本組件名：應用特定樣式和約定的基礎組件應該全部以一個特定的前綴開頭，比如Base，App或V

#單例組件名：只應該擁有單個活躍實例的組件應該以The前綴命名，以示其唯一性

#緊密耦合的組件名：和父組件緊密耦合的子組件應該以父組件名作爲前綴命名

#組件名中的單詞順序：組件名應該以高級別的單詞開頭，以描述性的修飾詞結尾

#自閉合組件：在單文件組件、字符串模板和JSX中沒有內容的組件應該是自閉合的----但在DOM模板裏永遠不要這樣做

#模板中的組件名大小寫：對於絕大多數項目來說，在單文件組件和字符串模板中組件名應該總是PascalCase的---但是在DOM模板中總是kebab-case的

你是從vue哪個版本開始用的？你知道1.x和2.x有什麼區別嗎？

1.作用域區別

1.x 隨意的定義作用域

2.x 不允許body 或者html 元素

2.json

1.x json 如果想顯示那麼就得使用過濾器 json

2.x 不用過濾器了直接可以看

1.x 顯示 {{msg | json}}

2.x 顯示 {{ msg}} 便可直接顯示對象

3.生命週期

1.x

created 實例已經創建

beforeCompile 在編程之前

compiled 編程之後

ready 實例已經插入到文檔之中

beforeDetroy 在銷燬之前

destroyed 銷燬之後

2.x

beforeCreate 剛剛創建這個實例屬性還沒有綁定

created 創建完畢屬性已經綁定好了

beforeMount 模版在渲染之前

mounted //ready 渲染之後

beforeUpdate //數據更新之前

updated //數據更新之後

beforeDestroy 實例化銷燬之前

destroyed 實例化銷燬之後

4.循環區別

2.x不可以再根模板加循環屬性沒有 $index $key 沒有了 1.x (index , value) 索引值 2.x (value , index) 值索引

5.過濾器

2.x取消了所有的默認的過濾器封裝的方式沒有區別

1.x 傳參 uppercase "1" "2"

2.x uppercase('1','2')

你知道vue中key的原理嗎？說說你對它的理解

key的作用主要是爲了高效的更新虛擬DOM

vue中怎麼重置data？

1、 this逐個賦值

2、使用Object.assign() this.$data 獲取當前狀態下的data this.$options.data()獲取該組件初始狀態下的data

Object.assign(this.$data, this.$options.data())

如果你只想重置data中的某一個對象或者屬性：
this.form = this.$options.data().form

vue渲染模板時怎麼保留模板中的HTML註釋呢？

元素標籤中comments爲true

Vue.observable你有了解過嗎？說說看
你知道style加scoped屬性的用途和原理嗎？
你期待vue3.0有什麼功能或者改進的地方？
vue邊界情況有哪些？
如何在子組件中訪問父組件的實例？
watch的屬性用箭頭函數定義結果會怎麼樣？
在vue項目中如果methods的方法用箭頭函數定義結果會怎麼樣？
在vue項目中如何配置favicon？
你有使用過babel-polyfill模塊嗎？主要是用來做什麼的？
說說你對vue的錯誤處理的瞭解？
在vue事件中傳入$event，使用e.target和e.currentTarget有什麼區別？
在.vue文件中style是必須的嗎？那script是必須的嗎？爲什麼？
vue怎麼實現強制刷新組件？
vue自定義事件中父組件怎麼接收子組件的多個參數？
實際工作中，你總結的vue最佳實踐有哪些？
vue給組件綁定自定義事件無效怎麼解決？
vue的屬性名稱與method的方法名稱一樣時會發生什麼問題？
vue變量名如果以_、$開頭的屬性會發生什麼問題？怎麼訪問到它們的值？
vue使用v-for遍歷對象時，是按什麼順序遍歷的？如何保證順序？
vue如果想擴展某個現有的組件時，怎麼做呢？
說下attrs和_attrs_和listeners的使用場景
分析下vue項目本地開發完成後部署到服務器後報404是什麼原因呢？
v-once的使用場景有哪些？
說說你對vue的表單修飾符.lazy的理解
vue爲什麼要求組件模板只能有一個根元素？
EventBus註冊在全局上時，路由切換時會重複觸發事件，如何解決呢？
怎麼修改vue打包後生成文件路徑？
你有使用做過vue與原生app交互嗎？說說vue與ap交互的方法
使用vue寫一個tab切換
vue中什麼是遞歸組件？舉個例子說明下？
怎麼訪問到子組件的實例或者子元素？
在子組件中怎麼訪問到父組件的實例？
在組件中怎麼訪問到根實例？
說說你對Object.defineProperty的理解
vue組件裏寫的原生addEventListeners監聽事件，要手動去銷燬嗎？爲什麼？
vue組件裏的定時器要怎麼銷燬？
vue組件會在什麼時候下被銷燬？
使用vue渲染大量數據時應該怎麼優化？說下你的思路！
在vue中使用this應該注意哪些問題？
你有使用過JSX嗎？說說你對JSX的理解
說說組件的命名規範
怎麼配置使vue2.0+支持TypeScript寫法？
<template></template>有什麼用？
vue的is這個特性你有用過嗎？主要用在哪些方面？
vue的:class和:style有幾種表示方式？
你瞭解什麼是函數式組件嗎？
vue怎麼改變插入模板的分隔符？
組件中寫name選項有什麼作用？
說說你對provide和inject的理解
開發過程中有使用過devtools嗎？
說說你對slot的理解有多少？slot使用場景有哪些？
你有使用過動態組件嗎？說說你對它的理解
prop驗證的type類型有哪幾種？
prop是怎麼做驗證的？可以設置默認值嗎？
怎麼緩存當前打開的路由組件，緩存後想更新當前組件怎麼辦呢？
說說你對vue組件的設計原則的理解
你瞭解vue的diff算法嗎？
vue如何優化首頁的加載速度？
vue打包成最終的文件有哪些？
ajax、fetch、axios這三都有什麼區別？
vue能監聽到數組變化的方法有哪些？爲什麼這些方法能監聽到呢？
vue中是如何使用event對象的？
vue首頁白屏是什麼問題引起的？如何解決呢？
說說你對單向數據流和雙向數據流的理解
移動端ui你用的是哪個ui庫？有遇到過什麼問題嗎？
你知道nextTick的原理嗎？
說說你對v-clock和v-pre指令的理解
寫出你知道的表單修飾符和事件修飾符
說說你對proxy的理解
你有自己用vue寫過UI組件庫嗎？
用vue怎麼實現一個換膚的功能？
有在vue中使用過echarts嗎？踩過哪些坑？如何解決的？
如果讓你教一個2-3年經驗前端經驗的同事使用vue，你該怎麼教？
vue性能的優化的方法有哪些？
SSR解決了什麼問題？有做過SSR嗎？你是怎麼做的？
說說你覺得認爲的vue開發規範有哪些？
vue部署上線前需要做哪些準備工作？
vue過渡動畫實現的方式有哪些？
vue在created和mounted這兩個生命週期中請求數據有什麼區別呢？
vue父子組件雙向綁定的方法有哪些？
vue怎麼獲取DOM節點？
vue項目有做過單元測試嗎？
vue項目有使用過npm run build --report嗎？
如何解決vue打包vendor過大的問題？
webpack打包vue速度太慢怎麼辦？
vue在開發過程中要同時跟N個不同的後端人員聯調接口（請求的url不一樣）時你該怎麼辦？
vue要做權限管理該怎麼做？如果控制到按鈕級別的權限怎麼做？
說下你的vue項目的目錄結構，如果是大型項目你該怎麼劃分結構和劃分組件呢？
在移動端使用vue，你覺得最佳實踐有哪些？
你們項目爲什麼會選vue而不選擇其它的框架呢？
對於即將到來的vue3.0特性你有什麼瞭解的嗎？
vue開發過程中你有使用什麼輔助工具嗎？
vue和微信小程序寫法上有什麼區別？
怎麼緩存當前的組件？緩存後怎麼更新？
你瞭解什麼是高階組件嗎？可否舉個例子說明下？
爲什麼我們寫組件的時候可以寫在.vue裏呢？可以是別的文件名後綴嗎？
vue-loader是什麼？它有什麼作用？
說說你對vue的extend（構造器）的理解，它主要是用來做什麼的？
如果將axios異步請求同步化處理？
怎麼捕獲組件vue的錯誤信息？
爲什麼vue使用異步更新組件？
如何實現一個虛擬DOM？說說你的思路
寫出多種定義組件模板的方法
SPA單頁面的實現方式有哪些？
說說你對SPA單頁面的理解，它的優缺點分別是什麼？
說說你都用vue做過哪些類型的項目？
在vue項目中如何引入第三方庫（比如jQuery）？有哪些方法可以做到？
使用vue手寫一個過濾器
你有使用過render函數嗎？有什麼好處？
寫出你常用的指令有哪些？
手寫一個自定義指令及寫出如何調用
組件進來請求接口時你是放在哪個生命週期？爲什麼？
你有用過事件總線(EventBus)嗎？說說你的理解
說說vue的優缺點分別是什麼？
DOM渲染在哪個週期中就已經完成了？
第一次加載頁面時會觸發哪幾個鉤子？
vue生命週期總共有幾個階段？
vue生命週期的作用是什麼？
vue和angular有什麼區別呢？
如何引入scss？引入後如何使用？
使用vue開發過程你是怎麼做接口管理的？
爲何官方推薦使用axios而不用vue-resource？
你瞭解axios的原理嗎？有看過它的源碼嗎？
你有封裝過axios嗎？主要是封裝哪方面的？
如何中斷axios的請求？
axios是什麼？怎樣使用它？怎麼解決跨域的問題？
說說你對vue的template編譯的理解？
v-on可以綁定多個方法嗎？
vue常用的修飾符有哪些？列舉並說明
你認爲vue的核心是什麼？
v-model是什麼？有什麼用呢？
說說你對vue的mixin的理解，有什麼應用場景？
SPA首屏加載速度慢的怎麼解決？
刪除數組用delete和Vue.delete有什麼區別？
動態給vue的data添加一個新的屬性時會發生什麼？怎樣解決？
組件和插件有什麼區別？
說說你使用vue過程中遇到的問題（坑）有哪些，你是怎麼解決的？
說說你對選項el,template,render的理解
vue實例掛載的過程是什麼？
vue在組件中引入插件的方法有哪些？
v-if和v-for的優先級是什麼？如果這兩個同時出現時，那應該怎麼優化才能得到更好的性能？
分別說說vue能監聽到數組或對象變化的場景，還有哪些場景是監聽不到的？無法監聽時有什麼解決方案？
$nextTick有什麼作用？
爲什麼data屬性必須聲明爲返回一個初始數據對應的函數呢？
怎麼在watch監聽開始之後立即被調用？
watch怎麼深度監聽對象變化？
watch和計算屬性有什麼區別？
vue如何監聽鍵盤事件？
v-for循環中key有什麼作用？
怎麼在vue中使用插件？
你有寫過自定義組件嗎？
說說你對keep-alive的理解是什麼？
怎麼使css樣式只在當前組件中生效？
你有看過vue的源碼嗎？如果有那就說說看
你有寫過自定義指令嗎？自定義指令的生命週期（鉤子函數）有哪些？
v-show和v-if有什麼區別？使用場景分別是什麼？
說說你對MVC、MVP、MVVM模式的理解
說下你對指令的理解？
請描述下vue的生命週期是什麼？
vue組件之間的通信都有哪些？
什麼是虛擬DOM？
什麼是雙向綁定？原理是什麼？
vue和react有什麼不同？使用場景是什麼？
說說vue的優缺點
有使用過vue嗎？說說你對vue的理解

Vue CLI 相關

vue-cli提供了的哪幾種腳手架模板？
vue-cli工程中常用的npm命令有哪些？
在使用vue-cli開發vue項目時，自動刷新頁面的原理你瞭解嗎？
vue-cli3插件有寫過嗎？怎麼寫一個代碼生成插件？
vue-cli生成的項目可以使用es6、es7的語法嗎？爲什麼？
vue-cli怎麼解決跨域的問題？
vue-cli中你經常的加載器有哪些？
你知道什麼是腳手架嗎？
說下你瞭解的vue-cli原理？你可以自己實現個類vue-cli嗎？
怎麼使用vue-cli3創建一個項目？
vue-cli3你有使用過嗎？它和2.x版本有什麼區別？
vue-cli默認是單頁面的，那要弄成多頁面該怎麼辦呢？
不用vue-cli，你自己有搭建過vue的開發環境嗎？流程是什麼？

vue-router

vue-router怎麼重定向頁面？
vue-router怎麼配置404頁面？
切換路由時，需要保存草稿的功能，怎麼實現呢？
vue-router路由有幾種模式？說說它們的區別？
vue-router有哪幾種導航鉤子（導航守衛）？
說說你對router-link的瞭解
vue-router如何響應路由參數的變化？
你有看過vue-router的源碼嗎？說說看
切換到新路由時，頁面要滾動到頂部或保持原先的滾動位置怎麼做呢？
在什麼場景下會用到嵌套路由？
如何獲取路由傳過來的參數？
說說active-class是哪個組件的屬性？
在vue組件中怎麼獲取到當前的路由信息？
vur-router怎麼重定向？
怎樣動態加載路由？
怎麼實現路由懶加載呢？
如果讓你從零開始寫一個vue路由，說說你的思路
說說vue-router完整的導航解析流程是什麼？
路由之間是怎麼跳轉的？有哪些方式？
如果vue-router使用history模式，部署時要注意什麼？
route和router有什麼區別？
vue-router鉤子函數有哪些？都有哪些參數？
vue-router是用來做什麼的？它有哪些組件？

vuex

你有寫過vuex中store的插件嗎？
你有使用過vuex的module嗎？主要是在什麼場景下使用？
vuex中actions和mutations有什麼區別？
vuex使用actions時不支持多參數傳遞怎麼辦？
你覺得vuex有什麼缺點？
你覺得要是不用vuex的話會帶來哪些問題？
vuex怎麼知道state是通過mutation修改還是外部直接修改的？
請求數據是寫在組件的methods中還是在vuex的action中？
怎麼監聽vuex數據的變化？
vuex的action和mutation的特性是什麼？有什麼區別？
頁面刷新後vuex的state數據丟失怎麼解決？
vuex的state、getter、mutation、action、module特性分別是什麼？
vuex的store有幾個屬性值？分別講講它們的作用是什麼？
你理解的vuex是什麼呢？哪些場景會用到？不用會有問題嗎？有哪些特性？
使用vuex的優勢是什麼？
有用過vuex嗎？它主要解決的是什麼問題？推薦在哪些場景用？

ElementUI

ElementUI是怎麼做表單驗證的？在循環裏對每個input驗證怎麼做呢？
你有二次封裝過ElementUI組件嗎？
ElementUI怎麼修改組件的默認樣式？
ElementUI的穿梭組件如果數據量大會變卡怎麼解決不卡的問題呢？
ElementUI表格組件如何實現動態表頭？
ElementUI使用表格組件時有遇到過問題嗎？
有閱讀過ElementUI的源碼嗎？
項目中有使用過ElementUI嗎？有遇到過哪些問題？它的使用場景主要是哪些？
有用過哪些vue的ui？說說它們的優缺點？

Vue知識點(未完待續)

Vue相關

Vue CLI 相關

vue-router

vuex

ElementUI

H5開發屏幕適配

ES6字符串擴展方法

uni-app上傳圖片轉base64格式

被噴的JS代碼風格

微信小程序 wxs 正則替換日期格式

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結