一覆糟、對于MVVM的理解屠凶？
MVVM是Model View ViewModel的縮寫。
Model代表數(shù)據(jù)模型号坡，可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯螃壤。
View代表UI組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI展現(xiàn)筋帖。
ViewModel監(jiān)聽數(shù)據(jù)模型的改變和控制視圖行為。
ViewModel很好的成為了數(shù)據(jù)模型和UI組件的橋梁冤馏，開發(fā)者只需要專注業(yè)務(wù)邏輯日麸，不需要去操作DOM
二、Vue的生命周期
beforeCreate （在實(shí)例創(chuàng)建之前） 在數(shù)據(jù)觀測和初始化事件還沒有開始的時候逮光。
create （完成了數(shù)據(jù)觀測）代箭，屬性和方法的運(yùn)算，初始化事件涕刚，el屬性還沒有顯示出來嗡综。
mounted （載入后）相當(dāng)于原生JS中的window.load事件
beforeUpdate（更新前）在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和補(bǔ)丁之前杜漠。
updated（更新后）數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用极景。
beforeDestroy（銷毀前）在實(shí)例銷毀之前調(diào)用察净。
destroyed（銷毀后）再實(shí)例銷毀之后調(diào)用。
什么是vue生命周期盼樟？
Vue實(shí)例從創(chuàng)建到銷毀的過程氢卡，就是生命周期，從開始創(chuàng)建晨缴，初始化數(shù)據(jù)译秦，編譯模板，掛載DOM击碗，渲染數(shù)據(jù)筑悴， 更新數(shù)據(jù)，銷毀等一系列的過程稍途。
vue的生命周期有什么作用阁吝？
生命周期存有很多鉤子函數(shù)，讓我們在控制vue實(shí)例的過程時更容易形成好的邏輯晰房。
第一次加載頁面會觸發(fā)哪些鉤子求摇？
beforeCreate、created殊者、beforeMount与境、mounted
三、Vue數(shù)據(jù)綁定的原理
vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：通過object.defineProperty（）來劫持各個屬性的setter和getter猖吴，在數(shù)據(jù)變動時發(fā)布消息給訂閱者摔刁，觸發(fā)相應(yīng)監(jiān)聽回調(diào)。當(dāng)一個普通javascript對象傳給vue實(shí)例作為它的data時海蔽，vue會遍歷它的屬性共屈，用object.defineProperty（）將他們轉(zhuǎn)換為getter和setter，這個過程用戶是看不到的党窜，但是vue幫我們?nèi)プ粉櫼蕾囖忠趯傩员辉L問和修改時通知變化。
javascript原生雙向數(shù)據(jù)綁定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
四幌衣、vue組件間的參數(shù)傳遞
- 父組件與子組件傳值
父組件傳給子組件：通過設(shè)置子組件的props方法來設(shè)置接受數(shù)據(jù)
子組件傳給父組件：通過this.$emit（’"父組件事件"矾削，需要傳遞給父組件的值）
- 兄弟間傳值
把父組件作為中間站，用來傳遞事件和接受事件
五豁护、Vue的路由實(shí)現(xiàn)：hash模式和history模式
hash模式：在瀏覽器中#符號后面就是hash值哼凯，用window.location.hash讀取楚里；
特點(diǎn)：
hash在URL中断部，但不被包括在HTTP請求中；用來指導(dǎo)瀏覽器動作班缎，對服務(wù)端安全無用蝴光，hash不會重加載頁面她渴。
在hash模式中，只有#符號之前的內(nèi)容才會被包含在請求中虱疏，所以沒有做到對路由的全覆蓋惹骂，也不會返回404。
history 模式：history采用HTML5的新特性做瞪，而且提供了兩個新方法：pushState（）对粪，replaceState（）可以對瀏覽器歷史記錄進(jìn)行修改，history模式下装蓬，前端的URL必須和實(shí)際向后端請求的URL一致著拭，
六、vue路由的鉤子函數(shù)
首頁可以控制導(dǎo)航跳轉(zhuǎn)牍帚，beforeEach儡遮，afterEach等。
一般用于頁面的title的修改暗赶。
或者需要的頁面調(diào)整頁面的重定向功能鄙币。
to即將前往的路由目標(biāo)對象
from當(dāng)前導(dǎo)航正要離開的路由
next 一定要調(diào)用這個function來resolve這個鉤子，執(zhí)行效果依賴next方法的調(diào)用的參數(shù)蹂随∈伲可以控制網(wǎng)頁的跳轉(zhuǎn)
// 路由攔截(路由守衛(wèi))
router.beforeEach((to, from, next) => {
// 動態(tài)更改頁面標(biāo)題
document.title = to.matched[0].meta.title
// console.log(to);
// 需要驗(yàn)證的路由
if (to.meta.auth) {
const userJson = JSON.parse(localStorage.getItem('userJson')) || {};
if (userJson.token) {
next()
} else {
next('/')
}
} else {
next()
}
next()
})
簡單概括的知識點(diǎn)
css只在當(dāng)前組件起作用？
答：在style標(biāo)簽中寫入“ scoped “
v-if和v-show的區(qū)別岳锁？
答：v-if按條件渲染绩衷，v-show是display的none，頻繁使用的用v-show比較好
route和router的區(qū)別激率？
答：route是路由對象信息咳燕，可以獲取到path、name乒躺、hash招盲、query、fullpath嘉冒、matched等路由參數(shù)宪肖。
router是“路由實(shí)例”對象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等健爬。
vue的兩個核心？
答：數(shù)據(jù)驅(qū)動視圖么介、組件系統(tǒng)
vue的常見指令娜遵？
答：v-for、v-if壤短、v-on设拟、v-model慨仿、v-bind、v-show
vue常見的修飾符纳胧？
答：.prvent提交事件不再重載頁面
.stop阻止單擊事件冒泡
.self當(dāng)事件發(fā)生在該元素本身而不是子元素的時候會觸發(fā)
v-on可以綁定多個事件嗎镰吆？
答：可以的
vue中key值的作用？
答：當(dāng)Vue用v-for更新已渲染的元素列表時跑慕，它默認(rèn)用“就地復(fù)用”策略万皿。如果數(shù)據(jù)項(xiàng)的順序被改變，vue將不會移動DOM元素來匹配數(shù)據(jù)項(xiàng)的順序核行，而是簡單復(fù)用此處每個元素牢硅，并且確保它在特定索引下顯示已被 渲染過的每個元素。key的作用主要是為了高效的更新虛擬DOM
什么是vue的計(jì)算屬性芝雪？
在模板中放入太多的邏輯會讓模板過重且難以維護(hù)减余，在需要對數(shù)據(jù)進(jìn)行復(fù)雜處理，且可能多次使用的情況下惩系，盡量采取計(jì)算屬性的方式位岔。
這樣一來：
- 數(shù)據(jù)處理結(jié)構(gòu)清晰。
- 依賴于數(shù)據(jù)堡牡，數(shù)據(jù)更新抒抬，處理結(jié)果也自動更新。
- 計(jì)算屬性內(nèi)部this指向vue實(shí)例
- 在template調(diào)用時悴侵，直接把計(jì)算屬性當(dāng)做變量使用
vue的單頁應(yīng)用及其優(yōu)缺點(diǎn)瞧剖？
Vue的目標(biāo)通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)數(shù)據(jù)綁定和組合的視圖組件，核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)可免。MVVM抓于、數(shù)據(jù)驅(qū)動、組件化浇借、輕量捉撮、簡潔、高效妇垢、快速巾遭、模塊友好。
缺點(diǎn)：不支持低版本的瀏覽器
一闯估、對于MVVM的理解灼舍？
MVVM是Model View ViewModel的縮寫。
Model代表數(shù)據(jù)模型涨薪，可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯骑素。
View代表UI組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI展現(xiàn)刚夺。
ViewModel監(jiān)聽數(shù)據(jù)模型的改變和控制視圖行為献丑。
ViewModel很好的成為了數(shù)據(jù)模型和UI組件的橋梁末捣，開發(fā)者只需要專注業(yè)務(wù)邏輯，不需要去操作DOM
二创橄、Vue的生命周期
beforeCreate （在實(shí)例創(chuàng)建之前） 在數(shù)據(jù)觀測和初始化事件還沒有開始的時候箩做。
create （完成了數(shù)據(jù)觀測），屬性和方法的運(yùn)算妥畏，初始化事件衅斩，el屬性還沒有顯示出來赏半。
mounted （載入后）相當(dāng)于原生JS中的window.load事件
beforeUpdate（更新前）在數(shù)據(jù)更新之前調(diào)用遭京，發(fā)生在虛擬DOM重新渲染和補(bǔ)丁之前雏门。
updated（更新后）數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。
beforeDestroy（銷毀前）在實(shí)例銷毀之前調(diào)用馍管。
destroyed（銷毀后）再實(shí)例銷毀之后調(diào)用郭赐。
什么是vue生命周期？
Vue實(shí)例從創(chuàng)建到銷毀的過程确沸，就是生命周期捌锭，從開始創(chuàng)建，初始化數(shù)據(jù)罗捎，編譯模板观谦，掛載DOM，渲染數(shù)據(jù)桨菜， 更新數(shù)據(jù)豁状，銷毀等一系列的過程。
vue的生命周期有什么作用倒得？
生命周期存有很多鉤子函數(shù)泻红，讓我們在控制vue實(shí)例的過程時更容易形成好的邏輯。
第一次加載頁面會觸發(fā)哪些鉤子霞掺？
beforeCreate谊路、created、beforeMount菩彬、mounted
三缠劝、Vue數(shù)據(jù)綁定的原理
vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：通過object.defineProperty（）來劫持各個屬性的setter和getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者骗灶，觸發(fā)相應(yīng)監(jiān)聽回調(diào)惨恭。當(dāng)一個普通javascript對象傳給vue實(shí)例作為它的data時，vue會遍歷它的屬性耙旦，用object.defineProperty（）將他們轉(zhuǎn)換為getter和setter脱羡，這個過程用戶是看不到的，但是vue幫我們?nèi)プ粉櫼蕾嚕趯傩员辉L問和修改時通知變化轻黑。
javascript原生雙向數(shù)據(jù)綁定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
四、vue組件間的參數(shù)傳遞
- 父組件與子組件傳值
父組件傳給子組件：通過設(shè)置子組件的props方法來設(shè)置接受數(shù)據(jù)
子組件傳給父組件：通過this.$emit（’"父組件事件"琴昆，需要傳遞給父組件的值）
- 兄弟間傳值
把父組件作為中間站氓鄙，用來傳遞事件和接受事件
五、Vue的路由實(shí)現(xiàn)：hash模式和history模式
hash模式：在瀏覽器中#符號后面就是hash值业舍，用window.location.hash讀榷独埂；
特點(diǎn)：
hash在URL中舷暮，但不被包括在HTTP請求中态罪；用來指導(dǎo)瀏覽器動作，對服務(wù)端安全無用下面，hash不會重加載頁面复颈。
在hash模式中，只有#符號之前的內(nèi)容才會被包含在請求中沥割，所以沒有做到對路由的全覆蓋耗啦，也不會返回404。
history 模式：history采用HTML5的新特性机杜，而且提供了兩個新方法：pushState（）帜讲，replaceState（）可以對瀏覽器歷史記錄進(jìn)行修改，history模式下椒拗，前端的URL必須和實(shí)際向后端請求的URL一致似将，
六、vue路由的鉤子函數(shù)
首頁可以控制導(dǎo)航跳轉(zhuǎn)蚀苛，beforeEach在验，afterEach等。
一般用于頁面的title的修改枉阵。
或者需要的頁面調(diào)整頁面的重定向功能译红。
to即將前往的路由目標(biāo)對象
from當(dāng)前導(dǎo)航正要離開的路由
next 一定要調(diào)用這個function來resolve這個鉤子，執(zhí)行效果依賴next方法的調(diào)用的參數(shù)兴溜≌旌瘢可以控制網(wǎng)頁的跳轉(zhuǎn)
// 路由攔截(路由守衛(wèi))
router.beforeEach((to, from, next) => {
// 動態(tài)更改頁面標(biāo)題
document.title = to.matched[0].meta.title
// console.log(to);
// 需要驗(yàn)證的路由
if (to.meta.auth) {
const userJson = JSON.parse(localStorage.getItem('userJson')) || {};
if (userJson.token) {
next()
} else {
next('/')
}
} else {
next()
}
next()
})
簡單概括的知識點(diǎn)
css只在當(dāng)前組件起作用？
答：在style標(biāo)簽中寫入“ scoped “
v-if和v-show的區(qū)別拙徽？
答：v-if按條件渲染刨沦，v-show是display的none，頻繁使用的用v-show比較好
route和router的區(qū)別膘怕？
答：route是路由對象信息想诅，可以獲取到path、name、hash来破、query篮灼、fullpath、matched等路由參數(shù)徘禁。
router是“路由實(shí)例”對象包括了路由的跳轉(zhuǎn)方法诅诱，鉤子函數(shù)等。
vue的兩個核心送朱？
答：數(shù)據(jù)驅(qū)動視圖娘荡、組件系統(tǒng)
vue的常見指令？
答：v-for驶沼、v-if炮沐、v-on、v-model回怜、v-bind大年、v-show
vue常見的修飾符？
答：.prvent提交事件不再重載頁面
.stop阻止單擊事件冒泡
.self當(dāng)事件發(fā)生在該元素本身而不是子元素的時候會觸發(fā)
v-on可以綁定多個事件嗎鹉戚？
答：可以的
vue中key值的作用鲜戒？
答：當(dāng)Vue用v-for更新已渲染的元素列表時，它默認(rèn)用“就地復(fù)用”策略抹凳。如果數(shù)據(jù)項(xiàng)的順序被改變遏餐，vue將不會移動DOM元素來匹配數(shù)據(jù)項(xiàng)的順序，而是簡單復(fù)用此處每個元素赢底，并且確保它在特定索引下顯示已被 渲染過的每個元素失都。key的作用主要是為了高效的更新虛擬DOM
什么是vue的計(jì)算屬性？
在模板中放入太多的邏輯會讓模板過重且難以維護(hù)幸冻，在需要對數(shù)據(jù)進(jìn)行復(fù)雜處理粹庞，且可能多次使用的情況下，盡量采取計(jì)算屬性的方式洽损。
這樣一來：
- 數(shù)據(jù)處理結(jié)構(gòu)清晰庞溜。
- 依賴于數(shù)據(jù)，數(shù)據(jù)更新碑定，處理結(jié)果也自動更新流码。
- 計(jì)算屬性內(nèi)部this指向vue實(shí)例
- 在template調(diào)用時，直接把計(jì)算屬性當(dāng)做變量使用
vue的單頁應(yīng)用及其優(yōu)缺點(diǎn)延刘？
Vue的目標(biāo)通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)數(shù)據(jù)綁定和組合的視圖組件漫试，核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。MVVM碘赖、數(shù)據(jù)驅(qū)動驾荣、組件化外构、輕量、簡潔播掷、高效审编、快速、模塊友好歧匈。
缺點(diǎn)：不支持低版本的瀏覽器
一割笙、對于MVVM的理解？
MVVM是Model View ViewModel的縮寫眯亦。
Model代表數(shù)據(jù)模型，可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯般码。
View代表UI組件妻率，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI展現(xiàn)。
ViewModel監(jiān)聽數(shù)據(jù)模型的改變和控制視圖行為板祝。
ViewModel很好的成為了數(shù)據(jù)模型和UI組件的橋梁宫静，開發(fā)者只需要專注業(yè)務(wù)邏輯，不需要去操作DOM
二券时、Vue的生命周期
beforeCreate （在實(shí)例創(chuàng)建之前） 在數(shù)據(jù)觀測和初始化事件還沒有開始的時候孤里。
create （完成了數(shù)據(jù)觀測），屬性和方法的運(yùn)算橘洞，初始化事件捌袜，el屬性還沒有顯示出來。
mounted （載入后）相當(dāng)于原生JS中的window.load事件
beforeUpdate（更新前）在數(shù)據(jù)更新之前調(diào)用炸枣，發(fā)生在虛擬DOM重新渲染和補(bǔ)丁之前虏等。
updated（更新后）數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。
beforeDestroy（銷毀前）在實(shí)例銷毀之前調(diào)用适肠。
destroyed（銷毀后）再實(shí)例銷毀之后調(diào)用霍衫。
什么是vue生命周期？
Vue實(shí)例從創(chuàng)建到銷毀的過程侯养，就是生命周期敦跌，從開始創(chuàng)建，初始化數(shù)據(jù)逛揩，編譯模板柠傍，掛載DOM，渲染數(shù)據(jù)息尺， 更新數(shù)據(jù)携兵，銷毀等一系列的過程。
vue的生命周期有什么作用搂誉？
生命周期存有很多鉤子函數(shù)徐紧，讓我們在控制vue實(shí)例的過程時更容易形成好的邏輯。
第一次加載頁面會觸發(fā)哪些鉤子？
beforeCreate并级、created拂檩、beforeMount、mounted
三嘲碧、Vue數(shù)據(jù)綁定的原理
vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：通過object.defineProperty（）來劫持各個屬性的setter和getter稻励，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽回調(diào)愈涩。當(dāng)一個普通javascript對象傳給vue實(shí)例作為它的data時望抽，vue會遍歷它的屬性，用object.defineProperty（）將他們轉(zhuǎn)換為getter和setter履婉，這個過程用戶是看不到的煤篙，但是vue幫我們?nèi)プ粉櫼蕾嚕趯傩员辉L問和修改時通知變化毁腿。
javascript原生雙向數(shù)據(jù)綁定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
四辑奈、vue組件間的參數(shù)傳遞
- 父組件與子組件傳值
父組件傳給子組件：通過設(shè)置子組件的props方法來設(shè)置接受數(shù)據(jù)
子組件傳給父組件：通過this.$emit（’"父組件事件"，需要傳遞給父組件的值）
- 兄弟間傳值
把父組件作為中間站已烤，用來傳遞事件和接受事件
五鸠窗、Vue的路由實(shí)現(xiàn)：hash模式和history模式
hash模式：在瀏覽器中#符號后面就是hash值，用window.location.hash讀瓤杈俊稍计；
特點(diǎn)：
hash在URL中，但不被包括在HTTP請求中裕循；用來指導(dǎo)瀏覽器動作丙猬，對服務(wù)端安全無用，hash不會重加載頁面费韭。
在hash模式中茧球，只有#符號之前的內(nèi)容才會被包含在請求中，所以沒有做到對路由的全覆蓋星持，也不會返回404抢埋。
history 模式：history采用HTML5的新特性，而且提供了兩個新方法：pushState（）督暂，replaceState（）可以對瀏覽器歷史記錄進(jìn)行修改揪垄，history模式下，前端的URL必須和實(shí)際向后端請求的URL一致逻翁，
六饥努、vue路由的鉤子函數(shù)
首頁可以控制導(dǎo)航跳轉(zhuǎn)，beforeEach八回，afterEach等酷愧。
一般用于頁面的title的修改驾诈。
或者需要的頁面調(diào)整頁面的重定向功能。
to即將前往的路由目標(biāo)對象
from當(dāng)前導(dǎo)航正要離開的路由
next 一定要調(diào)用這個function來resolve這個鉤子溶浴，執(zhí)行效果依賴next方法的調(diào)用的參數(shù)乍迄。可以控制網(wǎng)頁的跳轉(zhuǎn)
// 路由攔截(路由守衛(wèi))
router.beforeEach((to, from, next) => {
// 動態(tài)更改頁面標(biāo)題
document.title = to.matched[0].meta.title
// console.log(to);
// 需要驗(yàn)證的路由
if (to.meta.auth) {
const userJson = JSON.parse(localStorage.getItem('userJson')) || {};
if (userJson.token) {
next()
} else {
next('/')
}
} else {
next()
}
next()
})
簡單概括的知識點(diǎn)
css只在當(dāng)前組件起作用士败？
答：在style標(biāo)簽中寫入“ scoped “
v-if和v-show的區(qū)別闯两？
答：v-if按條件渲染，v-show是display的none谅将，頻繁使用的用v-show比較好
route和router的區(qū)別漾狼？
答：route是路由對象信息，可以獲取到path饥臂、name邦投、hash、query擅笔、fullpath、matched等路由參數(shù)屯援。
router是“路由實(shí)例”對象包括了路由的跳轉(zhuǎn)方法猛们，鉤子函數(shù)等。
vue的兩個核心狞洋？
答：數(shù)據(jù)驅(qū)動視圖弯淘、組件系統(tǒng)
vue的常見指令？
答：v-for吉懊、v-if庐橙、v-on、v-model借嗽、v-bind态鳖、v-show
vue常見的修飾符？
答：.prvent提交事件不再重載頁面
.stop阻止單擊事件冒泡
.self當(dāng)事件發(fā)生在該元素本身而不是子元素的時候會觸發(fā)
v-on可以綁定多個事件嗎恶导？
答：可以的
vue中key值的作用浆竭？
答：當(dāng)Vue用v-for更新已渲染的元素列表時，它默認(rèn)用“就地復(fù)用”策略惨寿。如果數(shù)據(jù)項(xiàng)的順序被改變邦泄，vue將不會移動DOM元素來匹配數(shù)據(jù)項(xiàng)的順序，而是簡單復(fù)用此處每個元素裂垦，并且確保它在特定索引下顯示已被 渲染過的每個元素顺囊。key的作用主要是為了高效的更新虛擬DOM
什么是vue的計(jì)算屬性？
在模板中放入太多的邏輯會讓模板過重且難以維護(hù)蕉拢，在需要對數(shù)據(jù)進(jìn)行復(fù)雜處理特碳，且可能多次使用的情況下诚亚，盡量采取計(jì)算屬性的方式。
這樣一來：
- 數(shù)據(jù)處理結(jié)構(gòu)清晰测萎。
- 依賴于數(shù)據(jù)亡电，數(shù)據(jù)更新，處理結(jié)果也自動更新硅瞧。
- 計(jì)算屬性內(nèi)部this指向vue實(shí)例
- 在template調(diào)用時份乒，直接把計(jì)算屬性當(dāng)做變量使用
vue的單頁應(yīng)用及其優(yōu)缺點(diǎn)？
Vue的目標(biāo)通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)數(shù)據(jù)綁定和組合的視圖組件腕唧，核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)或辖。MVVM、數(shù)據(jù)驅(qū)動枣接、組件化颂暇、輕量、簡潔但惶、高效耳鸯、快速、模塊友好膀曾。
缺點(diǎn)：不支持低版本的瀏覽器
一县爬、對于MVVM的理解？
MVVM是Model View ViewModel的縮寫添谊。
Model代表數(shù)據(jù)模型财喳，可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯。
View代表UI組件斩狱，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI展現(xiàn)耳高。
ViewModel監(jiān)聽數(shù)據(jù)模型的改變和控制視圖行為。
ViewModel很好的成為了數(shù)據(jù)模型和UI組件的橋梁所踊，開發(fā)者只需要專注業(yè)務(wù)邏輯泌枪，不需要去操作DOM
二、Vue的生命周期
beforeCreate （在實(shí)例創(chuàng)建之前） 在數(shù)據(jù)觀測和初始化事件還沒有開始的時候秕岛。
create （完成了數(shù)據(jù)觀測）工闺，屬性和方法的運(yùn)算，初始化事件瓣蛀，el屬性還沒有顯示出來陆蟆。
mounted （載入后）相當(dāng)于原生JS中的window.load事件
beforeUpdate（更新前）在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和補(bǔ)丁之前惋增。
updated（更新后）數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用叠殷。
beforeDestroy（銷毀前）在實(shí)例銷毀之前調(diào)用。
destroyed（銷毀后）再實(shí)例銷毀之后調(diào)用诈皿。
什么是vue生命周期林束？
Vue實(shí)例從創(chuàng)建到銷毀的過程像棘，就是生命周期，從開始創(chuàng)建壶冒，初始化數(shù)據(jù)缕题，編譯模板，掛載DOM胖腾，渲染數(shù)據(jù)烟零， 更新數(shù)據(jù)，銷毀等一系列的過程咸作。
vue的生命周期有什么作用锨阿？
生命周期存有很多鉤子函數(shù)，讓我們在控制vue實(shí)例的過程時更容易形成好的邏輯记罚。
第一次加載頁面會觸發(fā)哪些鉤子墅诡？
beforeCreate、created桐智、beforeMount末早、mounted
三、Vue數(shù)據(jù)綁定的原理
vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：通過object.defineProperty（）來劫持各個屬性的setter和getter说庭，在數(shù)據(jù)變動時發(fā)布消息給訂閱者然磷，觸發(fā)相應(yīng)監(jiān)聽回調(diào)。當(dāng)一個普通javascript對象傳給vue實(shí)例作為它的data時口渔，vue會遍歷它的屬性，用object.defineProperty（）將他們轉(zhuǎn)換為getter和setter穿撮，這個過程用戶是看不到的缺脉，但是vue幫我們?nèi)プ粉櫼蕾嚕趯傩员辉L問和修改時通知變化悦穿。
javascript原生雙向數(shù)據(jù)綁定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
四攻礼、vue組件間的參數(shù)傳遞
- 父組件與子組件傳值
父組件傳給子組件：通過設(shè)置子組件的props方法來設(shè)置接受數(shù)據(jù)
子組件傳給父組件：通過this.$emit（’"父組件事件"，需要傳遞給父組件的值）
- 兄弟間傳值
把父組件作為中間站栗柒，用來傳遞事件和接受事件
五礁扮、Vue的路由實(shí)現(xiàn)：hash模式和history模式
hash模式：在瀏覽器中#符號后面就是hash值，用window.location.hash讀人猜佟太伊；
特點(diǎn)：
hash在URL中，但不被包括在HTTP請求中逛钻；用來指導(dǎo)瀏覽器動作僚焦，對服務(wù)端安全無用，hash不會重加載頁面曙痘。
在hash模式中芳悲，只有#符號之前的內(nèi)容才會被包含在請求中立肘，所以沒有做到對路由的全覆蓋，也不會返回404名扛。
history 模式：history采用HTML5的新特性谅年，而且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄進(jìn)行修改肮韧，history模式下融蹂，前端的URL必須和實(shí)際向后端請求的URL一致，
六惹苗、vue路由的鉤子函數(shù)
首頁可以控制導(dǎo)航跳轉(zhuǎn)殿较，beforeEach，afterEach等桩蓉。
一般用于頁面的title的修改淋纲。
或者需要的頁面調(diào)整頁面的重定向功能。
to即將前往的路由目標(biāo)對象
from當(dāng)前導(dǎo)航正要離開的路由
next 一定要調(diào)用這個function來resolve這個鉤子院究，執(zhí)行效果依賴next方法的調(diào)用的參數(shù)洽瞬。可以控制網(wǎng)頁的跳轉(zhuǎn)
// 路由攔截(路由守衛(wèi))
router.beforeEach((to, from, next) => {
// 動態(tài)更改頁面標(biāo)題
document.title = to.matched[0].meta.title
// console.log(to);
// 需要驗(yàn)證的路由
if (to.meta.auth) {
const userJson = JSON.parse(localStorage.getItem('userJson')) || {};
if (userJson.token) {
next()
} else {
next('/')
}
} else {
next()
}
next()
})
簡單概括的知識點(diǎn)
css只在當(dāng)前組件起作用业汰？
答：在style標(biāo)簽中寫入“ scoped “
v-if和v-show的區(qū)別伙窃？
答：v-if按條件渲染，v-show是display的none样漆，頻繁使用的用v-show比較好
route和router的區(qū)別为障？
答：route是路由對象信息，可以獲取到path放祟、name鳍怨、hash、query跪妥、fullpath鞋喇、matched等路由參數(shù)。
router是“路由實(shí)例”對象包括了路由的跳轉(zhuǎn)方法眉撵，鉤子函數(shù)等侦香。
vue的兩個核心？
答：數(shù)據(jù)驅(qū)動視圖纽疟、組件系統(tǒng)
vue的常見指令罐韩？
答：v-for、v-if污朽、v-on伴逸、v-model、v-bind、v-show
vue常見的修飾符错蝴？
答：.prvent提交事件不再重載頁面
.stop阻止單擊事件冒泡
.self當(dāng)事件發(fā)生在該元素本身而不是子元素的時候會觸發(fā)
v-on可以綁定多個事件嗎洲愤？
答：可以的
vue中key值的作用？
答：當(dāng)Vue用v-for更新已渲染的元素列表時顷锰，它默認(rèn)用“就地復(fù)用”策略柬赐。如果數(shù)據(jù)項(xiàng)的順序被改變，vue將不會移動DOM元素來匹配數(shù)據(jù)項(xiàng)的順序官紫，而是簡單復(fù)用此處每個元素肛宋，并且確保它在特定索引下顯示已被 渲染過的每個元素。key的作用主要是為了高效的更新虛擬DOM
什么是vue的計(jì)算屬性束世？
在模板中放入太多的邏輯會讓模板過重且難以維護(hù)酝陈，在需要對數(shù)據(jù)進(jìn)行復(fù)雜處理，且可能多次使用的情況下毁涉，盡量采取計(jì)算屬性的方式沉帮。
這樣一來：
- 數(shù)據(jù)處理結(jié)構(gòu)清晰。
- 依賴于數(shù)據(jù)贫堰，數(shù)據(jù)更新穆壕，處理結(jié)果也自動更新。
- 計(jì)算屬性內(nèi)部this指向vue實(shí)例
- 在template調(diào)用時其屏，直接把計(jì)算屬性當(dāng)做變量使用
vue的單頁應(yīng)用及其優(yōu)缺點(diǎn)喇勋？
Vue的目標(biāo)通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)數(shù)據(jù)綁定和組合的視圖組件，核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)偎行。MVVM川背、數(shù)據(jù)驅(qū)動、組件化蛤袒、輕量熄云、簡潔、高效汗盘、快速皱碘、模塊友好询一。
缺點(diǎn)：不支持低版本的瀏覽器
一隐孽、對于MVVM的理解？
MVVM是Model View ViewModel的縮寫健蕊。
Model代表數(shù)據(jù)模型菱阵，可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯。
View代表UI組件缩功，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI展現(xiàn)晴及。
ViewModel監(jiān)聽數(shù)據(jù)模型的改變和控制視圖行為。
ViewModel很好的成為了數(shù)據(jù)模型和UI組件的橋梁嫡锌，開發(fā)者只需要專注業(yè)務(wù)邏輯虑稼，不需要去操作DOM
二琳钉、Vue的生命周期
beforeCreate （在實(shí)例創(chuàng)建之前） 在數(shù)據(jù)觀測和初始化事件還沒有開始的時候。
create （完成了數(shù)據(jù)觀測）蛛倦，屬性和方法的運(yùn)算歌懒，初始化事件，el屬性還沒有顯示出來溯壶。
mounted （載入后）相當(dāng)于原生JS中的window.load事件
beforeUpdate（更新前）在數(shù)據(jù)更新之前調(diào)用及皂，發(fā)生在虛擬DOM重新渲染和補(bǔ)丁之前。
updated（更新后）數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用且改。
beforeDestroy（銷毀前）在實(shí)例銷毀之前調(diào)用验烧。
destroyed（銷毀后）再實(shí)例銷毀之后調(diào)用。
什么是vue生命周期又跛？
Vue實(shí)例從創(chuàng)建到銷毀的過程碍拆，就是生命周期，從開始創(chuàng)建效扫，初始化數(shù)據(jù)倔监，編譯模板，掛載DOM菌仁，渲染數(shù)據(jù)南誊， 更新數(shù)據(jù)，銷毀等一系列的過程睡毒。
vue的生命周期有什么作用生巡？
生命周期存有很多鉤子函數(shù)，讓我們在控制vue實(shí)例的過程時更容易形成好的邏輯摹迷。
第一次加載頁面會觸發(fā)哪些鉤子疟赊？
beforeCreate、created峡碉、beforeMount近哟、mounted
三、Vue數(shù)據(jù)綁定的原理
vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：通過object.defineProperty（）來劫持各個屬性的setter和getter鲫寄，在數(shù)據(jù)變動時發(fā)布消息給訂閱者吉执，觸發(fā)相應(yīng)監(jiān)聽回調(diào)。當(dāng)一個普通javascript對象傳給vue實(shí)例作為它的data時地来，vue會遍歷它的屬性戳玫，用object.defineProperty（）將他們轉(zhuǎn)換為getter和setter，這個過程用戶是看不到的未斑，但是vue幫我們?nèi)プ粉櫼蕾嚬舅蓿趯傩员辉L問和修改時通知變化。
javascript原生雙向數(shù)據(jù)綁定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
四、vue組件間的參數(shù)傳遞
- 父組件與子組件傳值
父組件傳給子組件：通過設(shè)置子組件的props方法來設(shè)置接受數(shù)據(jù)
子組件傳給父組件：通過this.$emit（’"父組件事件"府阀，需要傳遞給父組件的值）
- 兄弟間傳值
把父組件作為中間站缆镣，用來傳遞事件和接受事件
五、Vue的路由實(shí)現(xiàn)：hash模式和history模式
hash模式：在瀏覽器中#符號后面就是hash值试浙，用window.location.hash讀确丫汀；
特點(diǎn)：
hash在URL中川队，但不被包括在HTTP請求中力细；用來指導(dǎo)瀏覽器動作，對服務(wù)端安全無用固额，hash不會重加載頁面眠蚂。
在hash模式中，只有#符號之前的內(nèi)容才會被包含在請求中斗躏，所以沒有做到對路由的全覆蓋逝慧，也不會返回404。
history 模式：history采用HTML5的新特性啄糙，而且提供了兩個新方法：pushState（）笛臣，replaceState（）可以對瀏覽器歷史記錄進(jìn)行修改，history模式下隧饼，前端的URL必須和實(shí)際向后端請求的URL一致沈堡，
六、vue路由的鉤子函數(shù)
首頁可以控制導(dǎo)航跳轉(zhuǎn)燕雁，beforeEach诞丽，afterEach等。
一般用于頁面的title的修改拐格。
或者需要的頁面調(diào)整頁面的重定向功能僧免。
to即將前往的路由目標(biāo)對象
from當(dāng)前導(dǎo)航正要離開的路由
next 一定要調(diào)用這個function來resolve這個鉤子，執(zhí)行效果依賴next方法的調(diào)用的參數(shù)捏浊《茫可以控制網(wǎng)頁的跳轉(zhuǎn)
// 路由攔截(路由守衛(wèi))
router.beforeEach((to, from, next) => {
// 動態(tài)更改頁面標(biāo)題
document.title = to.matched[0].meta.title
// console.log(to);
// 需要驗(yàn)證的路由
if (to.meta.auth) {
const userJson = JSON.parse(localStorage.getItem('userJson')) || {};
if (userJson.token) {
next()
} else {
next('/')
}
} else {
next()
}
next()
})
簡單概括的知識點(diǎn)
css只在當(dāng)前組件起作用？
答：在style標(biāo)簽中寫入“ scoped “
v-if和v-show的區(qū)別金踪？
答：v-if按條件渲染浊洞，v-show是display的none，頻繁使用的用v-show比較好
route和router的區(qū)別热康？
答：route是路由對象信息沛申，可以獲取到path劣领、name姐军、hash、query、fullpath奕锌、matched等路由參數(shù)著觉。
router是“路由實(shí)例”對象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等惊暴。
vue的兩個核心饼丘？
答：數(shù)據(jù)驅(qū)動視圖、組件系統(tǒng)
vue的常見指令辽话？
答：v-for肄鸽、v-if、v-on油啤、v-model典徘、v-bind、v-show
vue常見的修飾符益咬？
答：.prvent提交事件不再重載頁面
.stop阻止單擊事件冒泡
.self當(dāng)事件發(fā)生在該元素本身而不是子元素的時候會觸發(fā)
v-on可以綁定多個事件嗎逮诲？
答：可以的
vue中key值的作用？
答：當(dāng)Vue用v-for更新已渲染的元素列表時幽告，它默認(rèn)用“就地復(fù)用”策略梅鹦。如果數(shù)據(jù)項(xiàng)的順序被改變，vue將不會移動DOM元素來匹配數(shù)據(jù)項(xiàng)的順序冗锁，而是簡單復(fù)用此處每個元素齐唆，并且確保它在特定索引下顯示已被 渲染過的每個元素。key的作用主要是為了高效的更新虛擬DOM
什么是vue的計(jì)算屬性冻河？
在模板中放入太多的邏輯會讓模板過重且難以維護(hù)蝶念，在需要對數(shù)據(jù)進(jìn)行復(fù)雜處理，且可能多次使用的情況下芋绸，盡量采取計(jì)算屬性的方式媒殉。
這樣一來：
- 數(shù)據(jù)處理結(jié)構(gòu)清晰。
- 依賴于數(shù)據(jù)摔敛，數(shù)據(jù)更新廷蓉，處理結(jié)果也自動更新。
- 計(jì)算屬性內(nèi)部this指向vue實(shí)例
- 在template調(diào)用時马昙，直接把計(jì)算屬性當(dāng)做變量使用
vue的單頁應(yīng)用及其優(yōu)缺點(diǎn)桃犬？
Vue的目標(biāo)通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)數(shù)據(jù)綁定和組合的視圖組件，核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)行楞。MVVM攒暇、數(shù)據(jù)驅(qū)動、組件化子房、輕量形用、簡潔就轧、高效、快速田度、模塊友好妒御。
缺點(diǎn)：不支持低版本的瀏覽器
一、對于MVVM的理解镇饺？
MVVM是Model View ViewModel的縮寫乎莉。
Model代表數(shù)據(jù)模型，可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯奸笤。
View代表UI組件惋啃，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI展現(xiàn)。
ViewModel監(jiān)聽數(shù)據(jù)模型的改變和控制視圖行為监右。
ViewModel很好的成為了數(shù)據(jù)模型和UI組件的橋梁肥橙，開發(fā)者只需要專注業(yè)務(wù)邏輯，不需要去操作DOM
二秸侣、Vue的生命周期
beforeCreate （在實(shí)例創(chuàng)建之前） 在數(shù)據(jù)觀測和初始化事件還沒有開始的時候存筏。
create （完成了數(shù)據(jù)觀測），屬性和方法的運(yùn)算味榛，初始化事件椭坚，el屬性還沒有顯示出來。
mounted （載入后）相當(dāng)于原生JS中的window.load事件
beforeUpdate（更新前）在數(shù)據(jù)更新之前調(diào)用搏色，發(fā)生在虛擬DOM重新渲染和補(bǔ)丁之前善茎。
updated（更新后）數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。
beforeDestroy（銷毀前）在實(shí)例銷毀之前調(diào)用频轿。
destroyed（銷毀后）再實(shí)例銷毀之后調(diào)用垂涯。
什么是vue生命周期？
Vue實(shí)例從創(chuàng)建到銷毀的過程航邢，就是生命周期耕赘，從開始創(chuàng)建，初始化數(shù)據(jù)膳殷，編譯模板操骡，掛載DOM，渲染數(shù)據(jù)赚窃， 更新數(shù)據(jù)册招，銷毀等一系列的過程。
vue的生命周期有什么作用勒极？
生命周期存有很多鉤子函數(shù)是掰，讓我們在控制vue實(shí)例的過程時更容易形成好的邏輯。
第一次加載頁面會觸發(fā)哪些鉤子辱匿？
beforeCreate键痛、created炫彩、beforeMount、mounted
三散休、Vue數(shù)據(jù)綁定的原理
vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：通過object.defineProperty（）來劫持各個屬性的setter和getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者乐尊，觸發(fā)相應(yīng)監(jiān)聽回調(diào)戚丸。當(dāng)一個普通javascript對象傳給vue實(shí)例作為它的data時，vue會遍歷它的屬性扔嵌，用object.defineProperty（）將他們轉(zhuǎn)換為getter和setter限府，這個過程用戶是看不到的，但是vue幫我們?nèi)プ粉櫼蕾嚵《校趯傩员辉L問和修改時通知變化胁勺。
javascript原生雙向數(shù)據(jù)綁定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
四、vue組件間的參數(shù)傳遞
- 父組件與子組件傳值
父組件傳給子組件：通過設(shè)置子組件的props方法來設(shè)置接受數(shù)據(jù)
子組件傳給父組件：通過this.$emit（’"父組件事件"独旷，需要傳遞給父組件的值）
- 兄弟間傳值
把父組件作為中間站署穗，用來傳遞事件和接受事件
五、Vue的路由實(shí)現(xiàn)：hash模式和history模式
hash模式：在瀏覽器中#符號后面就是hash值嵌洼，用window.location.hash讀劝钙！；
特點(diǎn)：
hash在URL中麻养，但不被包括在HTTP請求中褐啡；用來指導(dǎo)瀏覽器動作，對服務(wù)端安全無用鳖昌，hash不會重加載頁面备畦。
在hash模式中，只有#符號之前的內(nèi)容才會被包含在請求中许昨，所以沒有做到對路由的全覆蓋懂盐，也不會返回404。
history 模式：history采用HTML5的新特性糕档，而且提供了兩個新方法：pushState（）允粤，replaceState（）可以對瀏覽器歷史記錄進(jìn)行修改，history模式下翼岁，前端的URL必須和實(shí)際向后端請求的URL一致类垫，
六、vue路由的鉤子函數(shù)
首頁可以控制導(dǎo)航跳轉(zhuǎn)琅坡，beforeEach悉患，afterEach等。
一般用于頁面的title的修改榆俺。
或者需要的頁面調(diào)整頁面的重定向功能售躁。
to即將前往的路由目標(biāo)對象
from當(dāng)前導(dǎo)航正要離開的路由
next 一定要調(diào)用這個function來resolve這個鉤子坞淮，執(zhí)行效果依賴next方法的調(diào)用的參數(shù)∨憬荩可以控制網(wǎng)頁的跳轉(zhuǎn)
// 路由攔截(路由守衛(wèi))
router.beforeEach((to, from, next) => {
// 動態(tài)更改頁面標(biāo)題
document.title = to.matched[0].meta.title
// console.log(to);
// 需要驗(yàn)證的路由
if (to.meta.auth) {
const userJson = JSON.parse(localStorage.getItem('userJson')) || {};
if (userJson.token) {
next()
} else {
next('/')
}
} else {
next()
}
next()
})
簡單概括的知識點(diǎn)
css只在當(dāng)前組件起作用回窘？
答：在style標(biāo)簽中寫入“ scoped “
v-if和v-show的區(qū)別？
答：v-if按條件渲染市袖，v-show是display的none啡直，頻繁使用的用v-show比較好
route和router的區(qū)別？
答：route是路由對象信息苍碟，可以獲取到path酒觅、name、hash微峰、query舷丹、fullpath、matched等路由參數(shù)蜓肆。
router是“路由實(shí)例”對象包括了路由的跳轉(zhuǎn)方法颜凯，鉤子函數(shù)等。
vue的兩個核心仗扬？
答：數(shù)據(jù)驅(qū)動視圖装获、組件系統(tǒng)
vue的常見指令？
答：v-for厉颤、v-if穴豫、v-on、v-model逼友、v-bind精肃、v-show
vue常見的修飾符？
答：.prvent提交事件不再重載頁面
.stop阻止單擊事件冒泡
.self當(dāng)事件發(fā)生在該元素本身而不是子元素的時候會觸發(fā)
v-on可以綁定多個事件嗎帜乞？
答：可以的
vue中key值的作用司抱？
答：當(dāng)Vue用v-for更新已渲染的元素列表時，它默認(rèn)用“就地復(fù)用”策略黎烈。如果數(shù)據(jù)項(xiàng)的順序被改變习柠，vue將不會移動DOM元素來匹配數(shù)據(jù)項(xiàng)的順序，而是簡單復(fù)用此處每個元素照棋，并且確保它在特定索引下顯示已被 渲染過的每個元素资溃。key的作用主要是為了高效的更新虛擬DOM
什么是vue的計(jì)算屬性？
在模板中放入太多的邏輯會讓模板過重且難以維護(hù)烈炭，在需要對數(shù)據(jù)進(jìn)行復(fù)雜處理溶锭，且可能多次使用的情況下，盡量采取計(jì)算屬性的方式符隙。
這樣一來：
- 數(shù)據(jù)處理結(jié)構(gòu)清晰趴捅。
- 依賴于數(shù)據(jù)垫毙，數(shù)據(jù)更新，處理結(jié)果也自動更新拱绑。
- 計(jì)算屬性內(nèi)部this指向vue實(shí)例
- 在template調(diào)用時综芥，直接把計(jì)算屬性當(dāng)做變量使用
vue的單頁應(yīng)用及其優(yōu)缺點(diǎn)？
Vue的目標(biāo)通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)數(shù)據(jù)綁定和組合的視圖組件猎拨，核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)膀藐。MVVM、數(shù)據(jù)驅(qū)動迟几、組件化消请、輕量栏笆、簡潔类腮、高效、快速蛉加、模塊友好蚜枢。
缺點(diǎn)：不支持低版本的瀏覽器
一、對于MVVM的理解针饥？
MVVM是Model View ViewModel的縮寫厂抽。
Model代表數(shù)據(jù)模型，可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯丁眼。
View代表UI組件筷凤，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI展現(xiàn)。
ViewModel監(jiān)聽數(shù)據(jù)模型的改變和控制視圖行為苞七。
ViewModel很好的成為了數(shù)據(jù)模型和UI組件的橋梁藐守，開發(fā)者只需要專注業(yè)務(wù)邏輯，不需要去操作DOM
二蹂风、Vue的生命周期
beforeCreate （在實(shí)例創(chuàng)建之前） 在數(shù)據(jù)觀測和初始化事件還沒有開始的時候卢厂。
create （完成了數(shù)據(jù)觀測），屬性和方法的運(yùn)算惠啄，初始化事件慎恒，el屬性還沒有顯示出來。
mounted （載入后）相當(dāng)于原生JS中的window.load事件
beforeUpdate（更新前）在數(shù)據(jù)更新之前調(diào)用撵渡，發(fā)生在虛擬DOM重新渲染和補(bǔ)丁之前融柬。
updated（更新后）數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。
beforeDestroy（銷毀前）在實(shí)例銷毀之前調(diào)用趋距。
destroyed（銷毀后）再實(shí)例銷毀之后調(diào)用丹鸿。
什么是vue生命周期？
Vue實(shí)例從創(chuàng)建到銷毀的過程棚品，就是生命周期靠欢，從開始創(chuàng)建廊敌，初始化數(shù)據(jù)，編譯模板门怪，掛載DOM骡澈，渲染數(shù)據(jù)， 更新數(shù)據(jù)掷空，銷毀等一系列的過程肋殴。
vue的生命周期有什么作用？
生命周期存有很多鉤子函數(shù)坦弟，讓我們在控制vue實(shí)例的過程時更容易形成好的邏輯护锤。
第一次加載頁面會觸發(fā)哪些鉤子？
beforeCreate酿傍、created烙懦、beforeMount、mounted
三赤炒、Vue數(shù)據(jù)綁定的原理
vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：通過object.defineProperty（）來劫持各個屬性的setter和getter氯析，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽回調(diào)莺褒。當(dāng)一個普通javascript對象傳給vue實(shí)例作為它的data時掩缓，vue會遍歷它的屬性，用object.defineProperty（）將他們轉(zhuǎn)換為getter和setter遵岩，這個過程用戶是看不到的你辣，但是vue幫我們?nèi)プ粉櫼蕾嚕趯傩员辉L問和修改時通知變化尘执。
javascript原生雙向數(shù)據(jù)綁定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
四舍哄、vue組件間的參數(shù)傳遞
- 父組件與子組件傳值
父組件傳給子組件：通過設(shè)置子組件的props方法來設(shè)置接受數(shù)據(jù)
子組件傳給父組件：通過this.$emit（’"父組件事件"，需要傳遞給父組件的值）
- 兄弟間傳值
把父組件作為中間站正卧，用來傳遞事件和接受事件
五蠢熄、Vue的路由實(shí)現(xiàn)：hash模式和history模式
hash模式：在瀏覽器中#符號后面就是hash值，用window.location.hash讀嚷酢签孔；
特點(diǎn)：
hash在URL中，但不被包括在HTTP請求中窘行；用來指導(dǎo)瀏覽器動作饥追，對服務(wù)端安全無用，hash不會重加載頁面罐盔。
在hash模式中但绕，只有#符號之前的內(nèi)容才會被包含在請求中，所以沒有做到對路由的全覆蓋，也不會返回404捏顺。
history 模式：history采用HTML5的新特性六孵，而且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄進(jìn)行修改幅骄，history模式下劫窒，前端的URL必須和實(shí)際向后端請求的URL一致，
六拆座、vue路由的鉤子函數(shù)
首頁可以控制導(dǎo)航跳轉(zhuǎn)主巍，beforeEach，afterEach等挪凑。
一般用于頁面的title的修改孕索。
或者需要的頁面調(diào)整頁面的重定向功能。
to即將前往的路由目標(biāo)對象
from當(dāng)前導(dǎo)航正要離開的路由
next 一定要調(diào)用這個function來resolve這個鉤子躏碳，執(zhí)行效果依賴next方法的調(diào)用的參數(shù)搞旭。可以控制網(wǎng)頁的跳轉(zhuǎn)
// 路由攔截(路由守衛(wèi))
router.beforeEach((to, from, next) => {
// 動態(tài)更改頁面標(biāo)題
document.title = to.matched[0].meta.title
// console.log(to);
// 需要驗(yàn)證的路由
if (to.meta.auth) {
const userJson = JSON.parse(localStorage.getItem('userJson')) || {};
if (userJson.token) {
next()
} else {
next('/')
}
} else {
next()
}
next()
})
簡單概括的知識點(diǎn)
css只在當(dāng)前組件起作用唐断？
答：在style標(biāo)簽中寫入“ scoped “
v-if和v-show的區(qū)別选脊？
答：v-if按條件渲染杭抠，v-show是display的none脸甘，頻繁使用的用v-show比較好
route和router的區(qū)別？
答：route是路由對象信息偏灿，可以獲取到path丹诀、name、hash翁垂、query铆遭、fullpath、matched等路由參數(shù)沿猜。
router是“路由實(shí)例”對象包括了路由的跳轉(zhuǎn)方法枚荣，鉤子函數(shù)等。
vue的兩個核心啼肩？
答：數(shù)據(jù)驅(qū)動視圖橄妆、組件系統(tǒng)
vue的常見指令？
答：v-for祈坠、v-if害碾、v-on、v-model赦拘、v-bind慌随、v-show
vue常見的修飾符？
答：.prvent提交事件不再重載頁面
.stop阻止單擊事件冒泡
.self當(dāng)事件發(fā)生在該元素本身而不是子元素的時候會觸發(fā)
v-on可以綁定多個事件嗎？
答：可以的
vue中key值的作用阁猜？
答：當(dāng)Vue用v-for更新已渲染的元素列表時丸逸，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變剃袍，vue將不會移動DOM元素來匹配數(shù)據(jù)項(xiàng)的順序椭员，而是簡單復(fù)用此處每個元素，并且確保它在特定索引下顯示已被 渲染過的每個元素笛园。key的作用主要是為了高效的更新虛擬DOM
什么是vue的計(jì)算屬性隘击？
在模板中放入太多的邏輯會讓模板過重且難以維護(hù)，在需要對數(shù)據(jù)進(jìn)行復(fù)雜處理研铆，且可能多次使用的情況下埋同，盡量采取計(jì)算屬性的方式。
這樣一來：
- 數(shù)據(jù)處理結(jié)構(gòu)清晰棵红。
- 依賴于數(shù)據(jù)凶赁，數(shù)據(jù)更新，處理結(jié)果也自動更新逆甜。
- 計(jì)算屬性內(nèi)部this指向vue實(shí)例
- 在template調(diào)用時虱肄，直接把計(jì)算屬性當(dāng)做變量使用
vue的單頁應(yīng)用及其優(yōu)缺點(diǎn)？
Vue的目標(biāo)通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)數(shù)據(jù)綁定和組合的視圖組件交煞，核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)咏窿。MVVM、數(shù)據(jù)驅(qū)動素征、組件化集嵌、輕量、簡潔御毅、高效根欧、快速、模塊友好端蛆。
缺點(diǎn)：不支持低版本的瀏覽器
