日韩一欧美一国产一乱,综合精品日韩人妻,国产亚洲品质AV

總結(jié)一些vue相關(guān)的知識(shí)，將筆記整理跟大家分享，有些知識(shí)會(huì)經(jīng)常在前端面試的時(shí)候會(huì)問到，所以做個(gè)記錄，希望對(duì)大家有所幫助，如果有什么問題，可以指出，會(huì)積極修正。
如果大家喜歡，可以點(diǎn)贊或留言我再繼續(xù)更新面試題~~~~，謝謝大家~~~

1、那首先談?wù)勀銓?duì)Vue的理解吧？vue.js是什么？

Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。
vue是一個(gè)漸進(jìn)式框架，相當(dāng)于view層, 雙向數(shù)據(jù)綁定, 他更輕量, 性能上更高效, 比其他框架更容易上手, 學(xué)習(xí)成本低, vue需要一個(gè)el對(duì)象進(jìn)行實(shí)例化,

2、Vue與Angular以及React的區(qū)別？

angular是mvvm框架, 而vue是一個(gè)漸進(jìn)式的框架, 相當(dāng)于view層, 都有雙向數(shù)據(jù)綁定, 但是angular中的雙向數(shù)據(jù)綁定是基于臟檢查機(jī)制, vue的雙向數(shù)據(jù)綁定是基于ES5的getter和setter來實(shí)現(xiàn), 而angular是有自己實(shí)現(xiàn)一套模板編譯規(guī)則,vue比angular更輕量, 性能上更高效, 比angular更容易上手, 學(xué)習(xí)成本低, vue需要一個(gè)el對(duì)象進(jìn)行實(shí)例化, 而angular是整個(gè)html頁面下的,單頁面應(yīng)用, 而vue可以有個(gè)vue實(shí)例
1.與AngularJS的區(qū)別
相同點(diǎn)：
都支持指令：內(nèi)置指令和自定義指令；都支持過濾器：內(nèi)置過濾器和自定義過濾器；都支持雙向數(shù)據(jù)綁定；都不支持低端瀏覽器。
不同點(diǎn)：
AngularJS的學(xué)習(xí)成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡(jiǎn)單、直觀；在性能上，AngularJS依賴對(duì)數(shù)據(jù)做臟檢查，所以Watcher越多越慢；Vue.js使用基于依賴追蹤的觀察并且使用異步隊(duì)列更新，所有的數(shù)據(jù)都是獨(dú)立觸發(fā)的。
2.與React的區(qū)別
相同點(diǎn)：
React采用特殊的JSX語法，Vue.js在組件開發(fā)中也推崇編寫.vue特殊文件格式，對(duì)文件內(nèi)容都有一些約定，兩者都需要編譯后使用；中心思想相同：一切都是組件，組件實(shí)例之間可以嵌套；都提供合理的鉤子函數(shù)，可以讓開發(fā)者定制化地去處理需求；都不內(nèi)置列數(shù)AJAX，Route等功能到核心包，而是以插件的方式加載；在組件開發(fā)中都支持mixins的特性。
不同點(diǎn)：
React采用的Virtual DOM會(huì)對(duì)渲染出來的結(jié)果做臟檢查；Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作Virtual DOM。

1.模板語法不同

Vue使用了基于HTML的模板語法，可以在 HTML模板中使用Vue的指令，如v-for、v- if 等，用于渲染視圖。React則使用了 JSX語法，允許在 JavaScript代碼中嵌入 HTML，用于描述組件的結(jié)構(gòu)和行為。

Angular使用了自己的模板語法，類似于 HTML，但有些語法上的區(qū)別。

2.數(shù)據(jù)綁定方式不同

Vue 使用了雙向數(shù)據(jù)綁定，即數(shù)據(jù)的修改可以自動(dòng)同步到視圖中，視圖中的修改也可以自動(dòng)同步到數(shù)據(jù)中。React 則使用了單向數(shù)據(jù)流，即組件通過 props 接收數(shù)據(jù)，通過 state來管理自己的狀態(tài)。Angular則使用了雙向數(shù)據(jù)綁定和單向數(shù)據(jù)綁定兩種方式，具體取決于開發(fā)者的選擇。

3.組件化方式不同

Vue和React都是基于組件的方式來構(gòu)建應(yīng)用程序的。Vue 的組件化方式比較簡(jiǎn)單，每個(gè)組件包含模板、狀態(tài)和方法。React的組件化方式則更加靈活，每個(gè)組件只包含render 方法，可以通過props和state來管理組件的數(shù)據(jù)和狀態(tài)。Angular 也是基于組件的方式，但它使用了更加復(fù)雜的依賴注入機(jī)制來管理組件的依賴和狀態(tài)。

4.狀態(tài)管理方式不同

Vue使用了Vuex來管理應(yīng)用程序的狀態(tài)，包括狀態(tài)的存儲(chǔ)、修改和同步等。React 則使用了Redux或MobX來管理應(yīng)用程序的狀態(tài)。Angular自帶了自己的狀態(tài)管理機(jī)制，包括服務(wù)、RxJS等。

3、vue 的生命周期？

實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。
應(yīng)用場(chǎng)景
beforeCreate：在new一個(gè)vue實(shí)例后，只有一些默認(rèn)的生命周期鉤子和默認(rèn)事件，其他的東西都還沒創(chuàng)建。在beforeCreate生命周期執(zhí)行的時(shí)候，data和methods中的數(shù)據(jù)都還沒有初始化。不能在這個(gè)階段使用data中的數(shù)據(jù)和methods中的方法
create：data 和 methods都已經(jīng)被初始化好了，如果要調(diào)用 methods 中的方法，或者操作 data 中的數(shù)據(jù)，最早可以在這個(gè)階段中操作
beforeMount：執(zhí)行到這個(gè)鉤子的時(shí)候，在內(nèi)存中已經(jīng)編譯好了模板了，但是還沒有掛載到頁面中，此時(shí)，頁面還是舊的
mounted：執(zhí)行到這個(gè)鉤子的時(shí)候，就表示Vue實(shí)例已經(jīng)初始化完成了。此時(shí)組件脫離了創(chuàng)建階段，進(jìn)入到了運(yùn)行階段。如果我們想要通過插件操作頁面上的DOM節(jié)點(diǎn)，最早可以在和這個(gè)階段中進(jìn)行
beforeUpdate：當(dāng)執(zhí)行這個(gè)鉤子時(shí)，頁面中的顯示的數(shù)據(jù)還是舊的，data中的數(shù)據(jù)是更新后的，頁面還沒有和最新的數(shù)據(jù)保持同步
updated：頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了，都是最新的
beforeDestory：Vue實(shí)例從運(yùn)行階段進(jìn)入到了銷毀階段，這個(gè)時(shí)候上所有的 data 和 methods ，指令，過濾器 ……都是處于可用狀態(tài)。還沒有真正被銷毀
destroyed：這個(gè)時(shí)候上所有的 data 和 methods ，指令，過濾器 ……都是處于不可用狀態(tài)。組件已經(jīng)被銷毀了。

4、vue生命周期的作用是什么？

它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過程時(shí)更容易形成好的邏輯。

5、vue生命周期總共有幾個(gè)階段？

它可以總共分為8個(gè)階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后

6、第一次頁面加載會(huì)觸發(fā)哪幾個(gè)鉤子？

beforeCreate， created， beforeMount， mounted

7、vue獲取數(shù)據(jù)在哪個(gè)周期函數(shù)？

一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 時(shí)候才能操作.

8、mvvm 框架是什么？

vue是實(shí)現(xiàn)了雙向數(shù)據(jù)綁定的mvvm框架，當(dāng)視圖改變更新模型層，當(dāng)模型層改變更新視圖層。在vue中，使用了雙向綁定技術(shù)，就是View的變化能實(shí)時(shí)讓Model發(fā)生變化，而Model的變化也能實(shí)時(shí)更新到View。

9、Vue中雙向數(shù)據(jù)綁定是如何實(shí)現(xiàn)的？

vue 雙向數(shù)據(jù)綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布訂閱模式的方式來實(shí)現(xiàn)的，也就是說數(shù)據(jù)和視圖同步，數(shù)據(jù)發(fā)生變化，視圖跟著變化，視圖變化，數(shù)據(jù)也隨之發(fā)生改變；
核心：關(guān)于VUE雙向數(shù)據(jù)綁定，其核心是 Object.defineProperty()方法。

原理：vue .js 則是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的?式，Object.defineProperty()來劫持各個(gè)屬性的 setter，消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)

10、vue是如何實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的呢？（響應(yīng)式數(shù)據(jù)原理）?

參考：https://blog.csdn.net/kzj0916/article/details/108298865
原理：
相信用過vue的都知道，vue中data中定義的數(shù)據(jù)會(huì)隨著我們通過方法改變?cè)摂?shù)據(jù)的同時(shí)，頁面上相關(guān)此數(shù)據(jù)的也會(huì)相應(yīng)的刷新，實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)?？赡阒浪侨绾螌?shí)現(xiàn)這一功能的嗎？下面讓我們來了解了解它是如何做到這神奇操作的。

Object.defineProperty 監(jiān)聽修改讀取數(shù)據(jù)：
Object.defineProperty(obj, prop, descriptor) 可傳入三個(gè)值，其作用是該方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性，并返回此對(duì)象。
第一個(gè)值傳入要修改的對(duì)象
第二個(gè)值傳入該對(duì)象中要修改的key
第三個(gè)值是一個(gè)對(duì)象，里面有set 和get兩種方法 set為值發(fā)生修改是所做的操作 get為讀取改值時(shí)的操作
默認(rèn)配置如下

現(xiàn)在我們來研究下vue是如何利用Object.defineProperty 監(jiān)聽修改讀取數(shù)據(jù)的
我們創(chuàng)建一個(gè)對(duì)象，并利用Object.keys（）將對(duì)象中的key返回到一個(gè)數(shù)組中，并對(duì)該數(shù)組forEach遍歷
將key對(duì)應(yīng)值先取過來，對(duì)這個(gè)對(duì)象中每個(gè)不同的key通過Object.defineProperty修改并監(jiān)聽數(shù)據(jù)的變化，在修改該 key對(duì)應(yīng)的value值時(shí)，調(diào)用set方法打印下監(jiān)聽xxxx數(shù)據(jù)改變并將修改值賦給value
在讀取該key對(duì)應(yīng)的value值時(shí)，調(diào)用get方法打印下獲取xxxx對(duì)應(yīng)的值并直接返回當(dāng)前value值

11、vue中是如何檢測(cè)數(shù)組變化的呢？

vue.set()

12、vue組件中的data為什么是函數(shù)？

因?yàn)镴avaScript的特性所導(dǎo)致，在component中，data必須以函數(shù)的形式存在，不可以是對(duì)象。
組建中的data寫成一個(gè)函數(shù)，數(shù)據(jù)以函數(shù)返回值的形式定義，這樣每次復(fù)用組件的時(shí)候，都會(huì)返回一份新的data，相當(dāng)于每個(gè)組件實(shí)例都有自己私有的數(shù)據(jù)空間，它們只負(fù)責(zé)各自維護(hù)的數(shù)據(jù)，不會(huì)造成混亂。而單純的寫成對(duì)象形式，就是所有的組件實(shí)例共用了一個(gè)data，這樣改一個(gè)全都改了。

13、分別簡(jiǎn)述computed和watch的使用場(chǎng)景?

computed:
　　　　當(dāng)一個(gè)屬性受多個(gè)屬性影響的時(shí)候就需要用到computed
　　　　最典型的栗子：購物車商品結(jié)算的時(shí)候
　　watch:
　　　　當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候就需要用watch(當(dāng)一個(gè)屬性發(fā)生變化時(shí)，需要執(zhí)行對(duì)應(yīng)的操作，一對(duì)多)
　　　　栗子：搜索數(shù)據(jù)

14、created和mounted的區(qū)別?

created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。
mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。

15、vue-router的兩種模式？

hash模式：即地址欄 URL 中的 # 符號(hào)；

hash 模式是開發(fā)中默認(rèn)的模式，它的 URL 帶著一個(gè)#，例如：http://www.aaa.com/#/vue，它的 hash 值就是#/vue。

history模式：window.history對(duì)象打印出來可以看到里邊提供的方法和記錄長(zhǎng)度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）。
history 模式的URL中沒有#，它使用的是傳統(tǒng)的路由分發(fā)模式，即用戶在輸入一個(gè)URL時(shí)，服務(wù)器會(huì)接收這個(gè)請(qǐng)求，并解析這個(gè)URL，然后做出相應(yīng)的邏輯處理。

Hash 模式
在 hash 模式下，URL 中的 hash 值作為路由路徑。該模式可以兼容較老的瀏覽器，并且無需后端服務(wù)器的支持。在使用 hash 模式時(shí)，我們可以實(shí)現(xiàn)單頁應(yīng)用的效果，從而提高頁面的性能。但是，該模式的缺點(diǎn)是 URL 中會(huì)帶有 # 號(hào)，可能不太友好，對(duì)于一些 URL 形式有要求的場(chǎng)景，不適用。在使用 hash 模式時(shí)，需要注意一些需要刷新頁面的操作，例如在頁面中使用錨點(diǎn)進(jìn)行定位時(shí)，需要使用 JavaScript 來實(shí)現(xiàn)。

History 模式
在 history 模式下，URL 中的路徑作為路由路徑，不會(huì)帶有 # 號(hào)。該模式的優(yōu)點(diǎn)是 URL 美觀，更符合一些場(chǎng)景的要求。此外，由于使用了 HTML5 中新增的 History API，可以實(shí)現(xiàn)前進(jìn)和后退操作，提高用戶體驗(yàn)。但是，該模式需要后端服務(wù)器的支持，而且需要正確地配置 URL 路徑映射，否則會(huì)導(dǎo)致頁面刷新時(shí)出現(xiàn) 404 錯(cuò)誤。

Abstract 模式
在 abstract 模式下，路由器不會(huì)監(jiān)聽 URL 變化，而是通過調(diào)用路由器 API 進(jìn)行導(dǎo)航。該模式的優(yōu)點(diǎn)是可以在不需要瀏覽器 API 的情況下使用路由，比如在 Node.js 等非瀏覽器環(huán)境下。但是，由于需要手動(dòng)管理路由的變化，使用起來比較麻煩，并且不適用于大多數(shù)場(chǎng)景。

模式之間的區(qū)別
三種路由模式的區(qū)別主要在于 URL 的形式和后端服務(wù)器的支持情況。對(duì)于需要兼容較老瀏覽器的場(chǎng)景，可以選擇 hash 模式；對(duì)于需要美觀 URL 的場(chǎng)景，可以選擇 history 模式；如果需要在非瀏覽器環(huán)境下使用路由，可以選擇 abstract 模式。

在使用 Vue Router 時(shí)，我們需要根據(jù)項(xiàng)目的實(shí)際需求來選擇路由模式。如果需要兼容較老的瀏覽器，或者是單頁應(yīng)用場(chǎng)景，可以選擇 hash 模式；如果需要美觀 URL，或者需要使用瀏覽器的前進(jìn)和后退功能，可以選擇 history 模式；如果需要在非瀏覽器環(huán)境下使用路由，可以選擇 abstract 模式。

16、params和query的區(qū)別?

用法：query要用path來引入，params要用name來引入，接收參數(shù)都是類似的，分別是this.$route.query.name和this.$route.params.name。
url地址顯示：query更加類似于我們ajax中g(shù)et傳參，params則類似于post，說的再簡(jiǎn)單一點(diǎn)，前者在瀏覽器地址欄中顯示參數(shù)，后者則不顯示
注意點(diǎn)：query刷新不會(huì)丟失query里面的數(shù)據(jù)、params刷新會(huì)丟失params里面的數(shù)據(jù)。

//query語法：
this.$router.push({path:"地址",query:{id:"123"}}); //這是傳遞參數(shù)
this.$route.query.id； //這是接受參數(shù)
//params語法：
this.$router.push({name:"地址",params:{id:"123"}}); //這是傳遞參數(shù)
this.$route.params.id; //這是接受參數(shù)

17、組件之間傳值？

父?jìng)髯樱簆rops
子傳父：$emit方法
兄弟傳值:eventBus
$children / $parent
$ref
vuex

18、$nextTick的使用?

當(dāng)你修改了data的值然后馬上獲取這個(gè)dom元素的值，是不能獲取到更新后的值，
你需要使用$nextTick這個(gè)回調(diào)，讓修改后的data值渲染更新到dom元素之后在獲取，才能成功。

// 修改數(shù)據(jù)
vm.msg = 'Hello'
// DOM 還未更新
Vue.nextTick(function () {
  // DOM 更新
})

19、< keep-alive></ keep-alive>的作用是什么?

keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。

20、為什么使用key?

需要使用key來給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)，Diff算法就可以正確的識(shí)別此節(jié)點(diǎn)。
作用主要是為了高效的更新虛擬DOM。

21、v-show和v-if指令的共同點(diǎn)和不同點(diǎn)？

共同點(diǎn)：都能控制元素的顯示和隱藏；
不同點(diǎn)：實(shí)現(xiàn)本質(zhì)方法不同，v-show本質(zhì)就是通過控制css中的display設(shè)置為none，控制隱藏，只會(huì)編譯一次；v-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素，若初始值為false，就不會(huì)編譯了。而且v-if不停的銷毀和創(chuàng)建比較消耗性能。
總結(jié)：如果要頻繁切換某節(jié)點(diǎn)，使用v-show(切換開銷比較小，初始開銷較大)。如果不需要頻繁切換某節(jié)點(diǎn)使用v-if（初始渲染開銷較小，切換開銷比較大）。

22、如何讓CSS只在當(dāng)前組件中起作用？

在組件中的style前面加上scoped

23、如何獲取dom?

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

24、說出幾種vue當(dāng)中的指令和它的用法？

v-model雙向數(shù)據(jù)綁定；
v-for循環(huán)；
v-if v-show 顯示與隱藏；
v-on事件；v-once: 只綁定一次。

25、v-modal的使用？

v-model用于表單數(shù)據(jù)的雙向綁定，其實(shí)它就是一個(gè)語法糖，這個(gè)背后就做了兩個(gè)操作：
v-bind綁定一個(gè)value屬性；
v-on指令給當(dāng)前元素綁定input事件。

26、請(qǐng)說出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法？

assets文件夾是放靜態(tài)資源；components是放組件；router是定義路由相關(guān)的配置; app.vue是一個(gè)應(yīng)用主組件；main.js是入口文件。

27、assets和static的區(qū)別？

相同點(diǎn)：assets和static兩個(gè)都是存放靜態(tài)資源文件。項(xiàng)目中所需要的資源文件圖片，字體圖標(biāo)，樣式文件等都可以放在這兩個(gè)文件下，這是相同點(diǎn)
不同點(diǎn)：assets中存放的靜態(tài)資源文件在項(xiàng)目打包時(shí)，也就是運(yùn)行npm run build時(shí)會(huì)將assets中放置的靜態(tài)資源文件進(jìn)行打包上傳，所謂打包簡(jiǎn)單點(diǎn)可以理解為壓縮體積，代碼格式化。而壓縮后的靜態(tài)資源文件最終也都會(huì)放置在static文件中跟著index.html一同上傳至服務(wù)器。static中放置的靜態(tài)資源文件就不會(huì)要走打包壓縮格式化等流程，而是直接進(jìn)入打包好的目錄，直接上傳至服務(wù)器。因?yàn)楸苊饬藟嚎s直接進(jìn)行上傳，在打包時(shí)會(huì)提高一定的效率，但是static中的資源文件由于沒有進(jìn)行壓縮等操作，所以文件的體積也就相對(duì)于assets中打包后的文件提交較大點(diǎn)。在服務(wù)器中就會(huì)占據(jù)更大的空間。
建議：將項(xiàng)目中template需要的樣式文件js文件等都可以放置在assets中，走打包這一流程。減少體積。而項(xiàng)目中引入的第三方的資源文件如iconfoont.css等文件可以放置在static中，因?yàn)檫@些引入的第三方文件已經(jīng)經(jīng)過處理，我們不再需要處理，直接上傳。

28、v-on可以監(jiān)聽多個(gè)方法嗎？

可以，例子：< input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。

29、vue的兩個(gè)核心點(diǎn)

數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)
數(shù)據(jù)驅(qū)動(dòng)：ViewModel，保證數(shù)據(jù)和視圖的一致性。
組件系統(tǒng)：應(yīng)用類UI可以看作全部是由組件樹構(gòu)成的。

30、vue和jQuery的區(qū)別

jQuery是使用選擇器($)選取DOM對(duì)象，對(duì)其進(jìn)行賦值、取值、事件綁定等操作，其實(shí)和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對(duì)象，而數(shù)據(jù)和界面是在一起的。比如需要獲取label標(biāo)簽的內(nèi)容：$("lable").val();,它還是依賴DOM元素的值。
Vue則是通過Vue對(duì)象將數(shù)據(jù)和View完全分離開來了。對(duì)數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM對(duì)象，可以說數(shù)據(jù)和View是分離的，他們通過Vue對(duì)象這個(gè)vm實(shí)現(xiàn)相互的綁定。這就是傳說中的MVVM。

31、delete和Vue.delete刪除數(shù)組的區(qū)別

delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了數(shù)組改變了數(shù)組的鍵值。

32、axios的特點(diǎn)有哪些

從瀏覽器中創(chuàng)建XMLHttpRequests；
node.js創(chuàng)建http請(qǐng)求；
支持Promise API；
攔截請(qǐng)求和響應(yīng)；
轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)；
取消請(qǐng)求；
自動(dòng)換成json。
axios中的發(fā)送字段的參數(shù)是data跟params兩個(gè)，兩者的區(qū)別在于params是跟請(qǐng)求地址一起發(fā)送的，data的作為一個(gè)請(qǐng)求體進(jìn)行發(fā)送
params一般適用于get請(qǐng)求，data一般適用于post put 請(qǐng)求。

33、vue初始化頁面閃動(dòng)問題

使用vue開發(fā)時(shí)，在vue初始化之前，由于div是不歸vue管的，所以我們寫的代碼在還沒有解析的情況下會(huì)容易出現(xiàn)花屏現(xiàn)象，看到類似于{{message}}的字樣，雖然一般情況下這個(gè)時(shí)間很短暫，但是我們還是有必要讓解決這個(gè)問題的。
首先：在css里加上[v-cloak] {
display: none;
}。
如果沒有徹底解決問題，則在根元素加上style="display: none;" :style="{display: 'block'}"

34、vue更新數(shù)組時(shí)觸發(fā)視圖更新的方法

push()；pop()；shift()；unshift()；splice()； sort()；reverse()

35、vue常用的修飾符?

.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，防止執(zhí)行預(yù)設(shè)的行為（如果事件可取消，則取消該事件，而不停止事件的進(jìn)一步傳播）；
.capture：與事件冒泡的方向相反，事件捕獲由外到內(nèi)；
.self：只會(huì)觸發(fā)自己范圍內(nèi)的事件，不包含子元素；
.once：只會(huì)觸發(fā)一次。

36、vuex相關(guān)問題

參考：https://blog.csdn.net/u012967771/article/details/114132555

37、vuex是什么？怎么使用？哪種功能場(chǎng)景使用它？

vue框架中狀態(tài)管理。在main.js引入store，注入。
新建了一個(gè)目錄store.js，….. export 。
場(chǎng)景有：?jiǎn)雾搼?yīng)用中，組件之間的狀態(tài)。音樂播放、登錄狀態(tài)、加入購物車

38、關(guān)于VueX

VueX是適用于在Vue項(xiàng)目開發(fā)時(shí)使用的狀態(tài)管理工具。試想一下，如果在一個(gè)項(xiàng)目開發(fā)中頻繁的使用組件傳參的方式來同步data中的值，一旦項(xiàng)目變得很龐大，管理和維護(hù)這些值將是相當(dāng)棘手的工作。為此，Vue為這些被多個(gè)組件頻繁使用的值提供了一個(gè)統(tǒng)一管理的工具——VueX。在具有VueX的Vue項(xiàng)目中，我們只需要把這些值定義在VueX中，即可在整個(gè)Vue項(xiàng)目的組件中使用。

39、使用Vuex的目的

實(shí)現(xiàn)多組件狀態(tài)管理。多個(gè)組件之間需要數(shù)據(jù)共享時(shí)，Vuex是個(gè)很好的幫手哦

40、Vuex 的五大核心

其中state和mutation是必須的，其他可根據(jù)需求來加
1、state：負(fù)責(zé)狀態(tài)管理，類似于vue中的data，用于初始化數(shù)據(jù) //狀態(tài)管理
2、mutation：專用于修改state中的數(shù)據(jù)，通過commit觸發(fā) //修改state
3、action：可以處理異步，通過dispatch觸發(fā)，不能直接修改state，首先在組件中通過dispatch觸發(fā)action，然后在action函數(shù)內(nèi)部commit觸發(fā)mutation，通過mutation修改state狀態(tài)值 //異步操作
4、getter：Vuex中的計(jì)算屬性，相當(dāng)于vue中的computed,依賴于state狀態(tài)值，狀態(tài)值一旦改變，getter會(huì)重新計(jì)算，也就是說，當(dāng)一個(gè)數(shù)據(jù)依賴于另一個(gè)數(shù)據(jù)發(fā)生變化時(shí)，就要使用getter
5、module：模塊化管理 //模塊

// 導(dǎo)入vue及vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 掛載vuex
Vue.use(Vuex)

// 創(chuàng)建vuex對(duì)象并向外暴露
export default new Vuex.Store({
  // 全局屬性變量
  state: {
  },
  // 全局同步方法, 調(diào)用方法,this.$store.commit("xxx")
  mutations: {
  },
  // 異步方法 調(diào)用方法,this.$store.dispatch("xxx") 
  actions: {
  },
  // Vuex屬性計(jì)算,在視圖里面當(dāng)變量使用
  getters: {
  },
  // 模塊化注冊(cè)
  modules: {
  }
})

action與mutation的區(qū)別？

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

1、流程順序

“相應(yīng)視圖—>修改State”拆分成兩部分，視圖觸發(fā)Action，Action再觸發(fā)Mutation。

2、角色定位

基于流程順序，二者扮演不同的角色。

Mutation：專注于修改State，理論上是修改State的唯一途徑。

Action：業(yè)務(wù)代碼、異步請(qǐng)求。

3、限制

角色不同，二者有不同的限制。

Mutation：必須同步執(zhí)行。

Action：可以異步，但不能直接操作State。

41、solt插槽

1、默認(rèn)插槽

子組件用<slot>標(biāo)簽來確定渲染的位置標(biāo)簽里面可以放DOM結(jié)構(gòu)，當(dāng)父組件使用的時(shí)候沒有往插槽傳入內(nèi)容，標(biāo)簽內(nèi) DOM結(jié)構(gòu)就會(huì)顯示在頁面父組件在使用的時(shí)候，直接在子組件的標(biāo)簽內(nèi)寫入內(nèi)容即可

子組件Child.vue

  <template> 
      <slot>
          <p>插槽內(nèi)容<p> 
      </slot>
  </template>

父組件

  <Child> 
      <div>默認(rèn)插槽</div>
  </Child>

2、具名插槽

子組件用name屬性來表示插槽的名字，不傳為默認(rèn)插槽
父組件中在使用時(shí)在默認(rèn)插槽的基礎(chǔ)上加上slot屬性,值為子組件插槽name屬性值

子組件Child.vue

  <template> 
      <slot>插槽內(nèi)容</slot>
      <slot name="content">插槽內(nèi)容</slot>
  </template>

父組件

  <Child> 
      <template v-slot:default>具名插槽</template>
        <!-- 具名插槽用插槽名做參數(shù)  -->
      <template v-slot:content>內(nèi)容 ...</template>
  </Child>

3、作用域插槽

子組件在作用域上綁定屬性來將子組件的信息傳給父組件使用，這些屬性會(huì)被掛在父組件v-slot 接受的對(duì)象上
父組件中在使用時(shí)通過v-slot:簡(jiǎn)寫：＃獲取子組件的信息，在內(nèi)容中使用

子組件Child.vue

  <template> 
      <slot name="footer" testProps="子組件的值 ">
          <h3>沒傳footer插槽</h3>
      </slot>
  </template>

父組件

  <Child> 
      <!-- 把v-slot的值指定為作用域![]()上下文對(duì)象  -->
      <template v-slot:default="slotProps">來自子組件數(shù)據(jù) ：{{slotProps.testProps}}</template>
      <template #default="slotProps">來自子組件數(shù)據(jù) ![]()  {{slotProps.testProps}}</template>
  </Child>

42、vue2和vue3的區(qū)別

根節(jié)點(diǎn)不同
- vue2中必須要有根標(biāo)簽
- vue3中可以沒有根標(biāo)簽，會(huì)默認(rèn)將多個(gè)根標(biāo)簽包裹在一個(gè)fragement虛擬標(biāo)簽中，有利于減少內(nèi)存。
組合式API和選項(xiàng)式API
- 在vue2中采用選項(xiàng)式API，將數(shù)據(jù)和函數(shù)集中起來處理，將功能點(diǎn)切割了當(dāng)邏輯復(fù)雜的時(shí)候不利于代碼閱讀。
- 在vue3中采用組合式API，將同一個(gè)功能的代碼集中起來處理，使得代碼更加有序，有利于代碼的書寫和維護(hù)。
生命周期的變化
- Vue2 中的生命周期：beforeCreate 組件創(chuàng)建之前；created 組建創(chuàng)建之后；beforeMount 組件掛載到頁面之前執(zhí)行；Mounted 組件掛載到頁面之后執(zhí)行，beforeUpdate 組件更新之前；updated組件更新之后
- Vue3 中的生命周期：setup 開始創(chuàng)建組件；onBeforeMount 組件掛載到頁面之前執(zhí)行；onMounted 組件掛載到頁面之后執(zhí)行；onBeforeUpdate 組件更新之前；onUpdated 組件更新之后；
- 整體來看，變化不大，只是名字大部分需要 + on，功能上類似
- beforeCreate -> 使用setup()
- created -> 使用setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
v-if和v-for優(yōu)先級(jí)已更改
- vue2在同一元素v-for優(yōu)先級(jí)高于v-if,
- vue3則相反，仍不建議在同一標(biāo)簽同時(shí)使用
watch監(jiān)聽數(shù)組
- vue3當(dāng)中，如果想要監(jiān)聽數(shù)組內(nèi)容的變化那么必須要寫deep。
響應(yīng)式原理不同
- vue2通過Object.definedProperty()的get()和set()來做數(shù)據(jù)劫持、結(jié)合和發(fā)布訂閱者模式來實(shí)現(xiàn)，Object.definedProperty()會(huì)遍歷每一個(gè)屬性。
- vue3通過proxy代理的方式實(shí)現(xiàn)。
- proxy的優(yōu)勢(shì)：不需要像Object.definedProperty()的那樣遍歷每一個(gè)屬性，有一定的性能提升proxy可以理解為在目標(biāo)對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪問都必須通過這一層攔截。這個(gè)攔截可以對(duì)外界的訪問進(jìn)行過濾和改寫。
- 當(dāng)屬性過多的時(shí)候利用Object.definedProperty()要通過遍歷的方式監(jiān)聽每一個(gè)屬性。利用proxy則不需要遍歷，會(huì)自動(dòng)監(jiān)聽所有屬性，有利于性能的提升
插槽方式不同
- 在vue3中匿名插槽和在vue2中一樣
- 具名插槽使用方式不同：vue2使用slot='',vue3使用v-slot:''
- 作用域插槽使用方式不同：vue2中在父組件中使用slot-scope="data"從子組件獲取數(shù)據(jù)，vue3中在父組件中使用 #data 或者 #default="{data}"獲取

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

vue面試總結(jié)

1、那首先談?wù)勀銓?duì)Vue的理解吧？vue.js是什么？

2、Vue與Angular以及React的區(qū)別？

3、vue 的生命周期？

4、vue生命周期的作用是什么？

5、vue生命周期總共有幾個(gè)階段？

6、第一次頁面加載會(huì)觸發(fā)哪幾個(gè)鉤子？

7、vue獲取數(shù)據(jù)在哪個(gè)周期函數(shù)？

8、mvvm 框架是什么？

9、Vue中雙向數(shù)據(jù)綁定是如何實(shí)現(xiàn)的？

10、vue是如何實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的呢？（響應(yīng)式數(shù)據(jù)原理）?

11、vue中是如何檢測(cè)數(shù)組變化的呢？

12、vue組件中的data為什么是函數(shù)？

13、分別簡(jiǎn)述computed和watch的使用場(chǎng)景?

14、created和mounted的區(qū)別?

15、vue-router的兩種模式？

16、params和query的區(qū)別?

17、組件之間傳值？

18、$nextTick的使用?

19、< keep-alive></ keep-alive>的作用是什么?

20、為什么使用key?

21、v-show和v-if指令的共同點(diǎn)和不同點(diǎn)？

22、如何讓CSS只在當(dāng)前組件中起作用？

23、如何獲取dom?

24、說出幾種vue當(dāng)中的指令和它的用法？

25、v-modal的使用？

26、請(qǐng)說出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法？

27、assets和static的區(qū)別？

28、v-on可以監(jiān)聽多個(gè)方法嗎？

29、vue的兩個(gè)核心點(diǎn)

30、vue和jQuery的區(qū)別

31、delete和Vue.delete刪除數(shù)組的區(qū)別

32、axios的特點(diǎn)有哪些

33、vue初始化頁面閃動(dòng)問題

34、vue更新數(shù)組時(shí)觸發(fā)視圖更新的方法

35、vue常用的修飾符?

36、vuex相關(guān)問題

37、vuex是什么？怎么使用？哪種功能場(chǎng)景使用它？

38、關(guān)于VueX

39、使用Vuex的目的

40、Vuex 的五大核心

41、solt插槽

1、默認(rèn)插槽

2、具名插槽

3、作用域插槽

42、vue2和vue3的區(qū)別

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1、那首先談?wù)勀銓?duì)Vue的理解吧？vue.js是什么？

2、Vue與Angular以及React的區(qū)別？

3、vue 的生命周期？

4、vue生命周期的作用是什么？

5、vue生命周期總共有幾個(gè)階段？

6、第一次頁面加載會(huì)觸發(fā)哪幾個(gè)鉤子？

7、vue獲取數(shù)據(jù)在哪個(gè)周期函數(shù)？

8、mvvm 框架是什么？

9、Vue中雙向數(shù)據(jù)綁定是如何實(shí)現(xiàn)的？

10、vue是如何實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的呢？（響應(yīng)式數(shù)據(jù)原理）?

11、vue中是如何檢測(cè)數(shù)組變化的呢？

13、分別簡(jiǎn)述computed和watch的使用場(chǎng)景?

14、created和mounted的區(qū)別?

15、vue-router的兩種模式？

16、params和query的區(qū)別?

17、組件之間傳值？

18、$nextTick的使用?

19、< keep-alive></ keep-alive>的作用是什么?

20、為什么使用key?

21、v-show和v-if指令的共同點(diǎn)和不同點(diǎn)？

22、如何讓CSS只在當(dāng)前組件中起作用？

24、說出幾種vue當(dāng)中的指令和它的用法？

25、v-modal的使用？

26、請(qǐng)說出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法？

27、assets和static的區(qū)別？

28、v-on可以監(jiān)聽多個(gè)方法嗎？

29、vue的兩個(gè)核心點(diǎn)

31、delete和Vue.delete刪除數(shù)組的區(qū)別

32、axios的特點(diǎn)有哪些

34、vue更新數(shù)組時(shí)觸發(fā)視圖更新的方法

35、vue常用的修飾符?

36、vuex相關(guān)問題

37、vuex是什么？怎么使用？哪種功能場(chǎng)景使用它？

38、關(guān)于VueX

39、使用Vuex的目的

41、solt插槽

1、默認(rèn)插槽

2、具名插槽

3、作用域插槽