关于vue.js的部分总结
生活随笔
收集整理的這篇文章主要介紹了
关于vue.js的部分总结
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.MVVM和MVC的區(qū)別:
MVVM:是Model-View-ViewModel的簡寫,即模型-視圖-視圖模型
模型:后端傳遞的數(shù)據(jù)
試圖:所看到的頁面
視圖模型:mvvm模式的核心,它是連接view和model的橋梁。
兩個(gè)實(shí)現(xiàn)方向:
1)模型===》視圖:后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁面,實(shí)現(xiàn)方式(數(shù)據(jù)綁定)
2)視圖===》模型:即將所看到的頁面轉(zhuǎn)化成后端的數(shù)據(jù),實(shí)現(xiàn)的方式是(DOM 事件監(jiān)聽)
MVC:MVC是Model-View-Controller的簡寫,即模型-視圖-控制器
controller指的是頁面業(yè)務(wù)邏輯,使用MVC的目的就是將M和V代碼分離
使用MVVM模式有幾大好處:
1). 低耦合。View可以獨(dú)立于Model變化和修改,一個(gè)ViewModel可以綁定到不同的View上,當(dāng)View變化的時(shí)候Model可以不變,當(dāng)Model變化的時(shí)候View也可以不變。
2). 可重用性??梢园岩恍┮晥D的邏輯放在ViewModel里面,讓很多View重用這段視圖邏輯。
3). 獨(dú)立開發(fā)。開發(fā)人員可以專注與業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)(ViewModel)。設(shè)計(jì)人員可以專注于界面(View)的設(shè)計(jì)。
4). 可測(cè)試性??梢葬槍?duì)ViewModel來對(duì)界面(View)進(jìn)行測(cè)試
2.vue的生命周期
八個(gè):創(chuàng)建前、創(chuàng)建后、載入前、載入后、更新前、更新后、銷毀前、銷毀后
生命周期的作用:讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過程時(shí)更容易形成好的邏輯
DOM 渲染在 載入后(mounted) 中就已經(jīng)完成了。
3.vue實(shí)現(xiàn)雙向綁定原理
vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是:采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式,通過Object.defineProperty()
來劫持各個(gè)屬性的setter,getter,在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者,觸發(fā)相應(yīng)監(jiān)聽回調(diào)。
4.Vue組件間的參數(shù)傳遞
1)父組件與子組件傳值
父===》子:子組件通過props方法接受數(shù)據(jù);
子===》父:子組件通過$emit方法傳遞參數(shù),觸發(fā)父組件event
2)非父子組件間的數(shù)據(jù)傳遞,兄弟組件傳值
eventBus,就是創(chuàng)建一個(gè)事件中心,相當(dāng)于中轉(zhuǎn)站,可以用它來傳遞事件和接收事件
VUEX項(xiàng)目較大時(shí)
5.Vue與React的區(qū)別
6.vue路由的鉤子函數(shù)
首頁可以控制導(dǎo)航跳轉(zhuǎn),beforeEach,afterEach等,一般用于頁面title的修改。
一些需要登錄才能調(diào)整頁面的重定向功能。
beforeEach主要有3個(gè)參數(shù)to、from、next
to:route即將進(jìn)入的目標(biāo)路由對(duì)象
from:route當(dāng)前導(dǎo)航正要離開的路由
next:function一定要調(diào)用該方法resolve這個(gè)鉤子。執(zhí)行效果依賴next方法的調(diào)用參數(shù)。可以控制網(wǎng)頁的跳轉(zhuǎn)。
全局導(dǎo)航鉤子:
router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)
組件內(nèi)鉤子:
beforeRouteEnter,
beforeRouteUpdate,
beforeRouteLeave
單獨(dú)路由獨(dú)享組件:
beforeEnter
7.vuex是什么?怎么使用?哪種功能場(chǎng)景使用它?
只用來讀取的狀態(tài)集中放在store中; 改變狀態(tài)的方式是提交mutations,這是個(gè)同步的事物; 異步邏輯應(yīng)該封裝在action中。
在main.js引入store,注入。新建了一個(gè)目錄store,….. export 。
場(chǎng)景有:單頁應(yīng)用中,組件之間的狀態(tài)、音樂播放、登錄狀態(tài)、加入購物車
vuex 的mutation和action的特性是什么?有什么區(qū)別?
mutation用于修改state的數(shù)據(jù),是同步的。
action 類似于 muation, 不同在于:action 提交的是 mutation,而不是直接變更狀態(tài)
action 可以包含任意異步操作
8.css只在當(dāng)前組件起作用
在style標(biāo)簽中寫入scoped即可:<style scoped></style>
9.v-if 和 v-show 區(qū)別
v-if按照條件是否渲染,v-show是display的block或none
v-show的值無論為true或false,元素都會(huì)存在與html代碼中,而只有當(dāng)v-if的值為true,元素才會(huì)存在HTML中
v-show指令只是設(shè)置了元素css的style值
10.$route和$router的區(qū)別
$route是“路由信息對(duì)象”,包括path,params,hash,query,fullPath,matched,name等路由信息參數(shù)
$router是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法,鉤子函數(shù)等
11.vue.js的兩個(gè)核心是什么?vue幾種常用的指令?
數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)
指令:v-for、v-if、v-bind、v-on、v-show、v-else
12.vue常用的修飾符?
prevent:提交事件不再重載頁面
stop:阻止事件冒泡
self:當(dāng)事件發(fā)生在該元素本身而不是子元素的時(shí)候會(huì)觸發(fā)
capture:事件偵聽,事件發(fā)生的時(shí)候會(huì)調(diào)用
13.對(duì)keep-alive的了解
keep-alive是 Vue 內(nèi)置的一個(gè)組件,可以使被包含的組件保留狀態(tài),或避免重新渲染。
keep-alive加入了兩個(gè)屬性:include(包含的組件緩存) 與 exclude(排除的組件不緩存,優(yōu)先級(jí)大于include)
<keep-alive include='include_components' exclude='exclude_components'>
<component>
<!-- 該組件是否緩存取決于include和exclude屬性 -->
</component>
</keep-alive>
參數(shù)解釋:
include - 字符串或正則表達(dá)式,只有名稱匹配的組件會(huì)被緩存
exclude - 字符串或正則表達(dá)式,任何名稱匹配的組件都不會(huì)被緩存
include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“,”分隔字符串、正則表達(dá)式、數(shù)組。當(dāng)使用正則或者是數(shù)組時(shí),要記得使用v-bind 。
13.vue.js是什么?
是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級(jí)框架不同的是,Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。
Vue 的核心庫只關(guān)注視圖層,并且非常容易學(xué)習(xí),非常容易與其它庫或已有項(xiàng)目整合。另一方面,
Vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。
Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件
14.vue.js特性
MVVM、組件化、指令系統(tǒng)、支持虛擬DOM
虛擬dom:虛擬DOM是用Object來代表一顆節(jié)點(diǎn),這個(gè)Object叫做VNode,然后使用兩個(gè)VNode進(jìn)行對(duì)比,根據(jù)對(duì)比后的結(jié)果修改真實(shí)DOM。
每次渲染都會(huì)生成一個(gè)新的VNode,然后和上一次渲染時(shí)用的VNode進(jìn)行對(duì)比。然后將這一次新生成的VNode緩存,用來進(jìn)行下一次對(duì)比。
虛擬dom的缺點(diǎn):
1. 代碼更多,體積更大
2. 內(nèi)存占用增大
3. 小量的單一的dom修改使用虛擬dom成本反而更高,不如直接修改真實(shí)dom快
15.vue.js的特點(diǎn)
簡潔:頁面由HTML模板+Json數(shù)據(jù)+Vue實(shí)例組成
數(shù)據(jù)驅(qū)動(dòng):自動(dòng)計(jì)算屬性和追蹤依賴的模板表達(dá)式
組件化:用可復(fù)用、解耦的組件來構(gòu)造頁面
輕量:代碼量小,不依賴其他庫
快速:精確有效批量DOM更新
模板友好:可通過npm,bower等多種方式安裝,很容易融入
16.Vue 項(xiàng)目時(shí)為什么要在組件中寫 key,其作用是什么?
在開發(fā)過程中,我們需要保證某個(gè)元素的 key 在其同級(jí)元素中具有唯一性。
在 Diff 算法中 會(huì)借助元素的 Key 值來判斷該元素是新近創(chuàng)建的還是被移動(dòng)而來的元素,
從而減少不必要的元素重渲染。
17.computed 和 watched 的區(qū)別:
computed 是計(jì)算屬性,依賴其他屬性計(jì)算值,并且 computed 的值有緩存,只有當(dāng)計(jì)算值變化才會(huì)返回內(nèi)容。
watch 監(jiān)聽到值的變化就會(huì)執(zhí)行回調(diào),在回調(diào)中可以進(jìn)行一些邏輯操作。
18.axios是什么?怎么使用?描述使用它實(shí)現(xiàn)登錄功能的流程?
請(qǐng)求后臺(tái)資源的模塊。npm install axios -S裝好,然后發(fā)送的是跨域,需在配置文件中config/index.js進(jìn)行設(shè)置。
后臺(tái)如果是Tp5則定義一個(gè)資源路由。js中使用import進(jìn)來,然后.get或.post。返回在.then函數(shù)中如果成功,
失敗則是在.catch函數(shù)中
MVVM:是Model-View-ViewModel的簡寫,即模型-視圖-視圖模型
模型:后端傳遞的數(shù)據(jù)
試圖:所看到的頁面
視圖模型:mvvm模式的核心,它是連接view和model的橋梁。
兩個(gè)實(shí)現(xiàn)方向:
1)模型===》視圖:后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁面,實(shí)現(xiàn)方式(數(shù)據(jù)綁定)
2)視圖===》模型:即將所看到的頁面轉(zhuǎn)化成后端的數(shù)據(jù),實(shí)現(xiàn)的方式是(DOM 事件監(jiān)聽)
MVC:MVC是Model-View-Controller的簡寫,即模型-視圖-控制器
controller指的是頁面業(yè)務(wù)邏輯,使用MVC的目的就是將M和V代碼分離
使用MVVM模式有幾大好處:
1). 低耦合。View可以獨(dú)立于Model變化和修改,一個(gè)ViewModel可以綁定到不同的View上,當(dāng)View變化的時(shí)候Model可以不變,當(dāng)Model變化的時(shí)候View也可以不變。
2). 可重用性??梢园岩恍┮晥D的邏輯放在ViewModel里面,讓很多View重用這段視圖邏輯。
3). 獨(dú)立開發(fā)。開發(fā)人員可以專注與業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)(ViewModel)。設(shè)計(jì)人員可以專注于界面(View)的設(shè)計(jì)。
4). 可測(cè)試性??梢葬槍?duì)ViewModel來對(duì)界面(View)進(jìn)行測(cè)試
2.vue的生命周期
八個(gè):創(chuàng)建前、創(chuàng)建后、載入前、載入后、更新前、更新后、銷毀前、銷毀后
生命周期的作用:讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過程時(shí)更容易形成好的邏輯
DOM 渲染在 載入后(mounted) 中就已經(jīng)完成了。
3.vue實(shí)現(xiàn)雙向綁定原理
vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是:采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式,通過Object.defineProperty()
來劫持各個(gè)屬性的setter,getter,在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者,觸發(fā)相應(yīng)監(jiān)聽回調(diào)。
4.Vue組件間的參數(shù)傳遞
1)父組件與子組件傳值
父===》子:子組件通過props方法接受數(shù)據(jù);
子===》父:子組件通過$emit方法傳遞參數(shù),觸發(fā)父組件event
2)非父子組件間的數(shù)據(jù)傳遞,兄弟組件傳值
eventBus,就是創(chuàng)建一個(gè)事件中心,相當(dāng)于中轉(zhuǎn)站,可以用它來傳遞事件和接收事件
VUEX項(xiàng)目較大時(shí)
5.Vue與React的區(qū)別
6.vue路由的鉤子函數(shù)
首頁可以控制導(dǎo)航跳轉(zhuǎn),beforeEach,afterEach等,一般用于頁面title的修改。
一些需要登錄才能調(diào)整頁面的重定向功能。
beforeEach主要有3個(gè)參數(shù)to、from、next
to:route即將進(jìn)入的目標(biāo)路由對(duì)象
from:route當(dāng)前導(dǎo)航正要離開的路由
next:function一定要調(diào)用該方法resolve這個(gè)鉤子。執(zhí)行效果依賴next方法的調(diào)用參數(shù)。可以控制網(wǎng)頁的跳轉(zhuǎn)。
全局導(dǎo)航鉤子:
router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)
組件內(nèi)鉤子:
beforeRouteEnter,
beforeRouteUpdate,
beforeRouteLeave
單獨(dú)路由獨(dú)享組件:
beforeEnter
7.vuex是什么?怎么使用?哪種功能場(chǎng)景使用它?
只用來讀取的狀態(tài)集中放在store中; 改變狀態(tài)的方式是提交mutations,這是個(gè)同步的事物; 異步邏輯應(yīng)該封裝在action中。
在main.js引入store,注入。新建了一個(gè)目錄store,….. export 。
場(chǎng)景有:單頁應(yīng)用中,組件之間的狀態(tài)、音樂播放、登錄狀態(tài)、加入購物車
vuex 的mutation和action的特性是什么?有什么區(qū)別?
mutation用于修改state的數(shù)據(jù),是同步的。
action 類似于 muation, 不同在于:action 提交的是 mutation,而不是直接變更狀態(tài)
action 可以包含任意異步操作
8.css只在當(dāng)前組件起作用
在style標(biāo)簽中寫入scoped即可:<style scoped></style>
9.v-if 和 v-show 區(qū)別
v-if按照條件是否渲染,v-show是display的block或none
v-show的值無論為true或false,元素都會(huì)存在與html代碼中,而只有當(dāng)v-if的值為true,元素才會(huì)存在HTML中
v-show指令只是設(shè)置了元素css的style值
10.$route和$router的區(qū)別
$route是“路由信息對(duì)象”,包括path,params,hash,query,fullPath,matched,name等路由信息參數(shù)
$router是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法,鉤子函數(shù)等
11.vue.js的兩個(gè)核心是什么?vue幾種常用的指令?
數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)
指令:v-for、v-if、v-bind、v-on、v-show、v-else
12.vue常用的修飾符?
prevent:提交事件不再重載頁面
stop:阻止事件冒泡
self:當(dāng)事件發(fā)生在該元素本身而不是子元素的時(shí)候會(huì)觸發(fā)
capture:事件偵聽,事件發(fā)生的時(shí)候會(huì)調(diào)用
13.對(duì)keep-alive的了解
keep-alive是 Vue 內(nèi)置的一個(gè)組件,可以使被包含的組件保留狀態(tài),或避免重新渲染。
keep-alive加入了兩個(gè)屬性:include(包含的組件緩存) 與 exclude(排除的組件不緩存,優(yōu)先級(jí)大于include)
<keep-alive include='include_components' exclude='exclude_components'>
<component>
<!-- 該組件是否緩存取決于include和exclude屬性 -->
</component>
</keep-alive>
參數(shù)解釋:
include - 字符串或正則表達(dá)式,只有名稱匹配的組件會(huì)被緩存
exclude - 字符串或正則表達(dá)式,任何名稱匹配的組件都不會(huì)被緩存
include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“,”分隔字符串、正則表達(dá)式、數(shù)組。當(dāng)使用正則或者是數(shù)組時(shí),要記得使用v-bind 。
13.vue.js是什么?
是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級(jí)框架不同的是,Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。
Vue 的核心庫只關(guān)注視圖層,并且非常容易學(xué)習(xí),非常容易與其它庫或已有項(xiàng)目整合。另一方面,
Vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。
Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件
14.vue.js特性
MVVM、組件化、指令系統(tǒng)、支持虛擬DOM
虛擬dom:虛擬DOM是用Object來代表一顆節(jié)點(diǎn),這個(gè)Object叫做VNode,然后使用兩個(gè)VNode進(jìn)行對(duì)比,根據(jù)對(duì)比后的結(jié)果修改真實(shí)DOM。
每次渲染都會(huì)生成一個(gè)新的VNode,然后和上一次渲染時(shí)用的VNode進(jìn)行對(duì)比。然后將這一次新生成的VNode緩存,用來進(jìn)行下一次對(duì)比。
虛擬dom的缺點(diǎn):
1. 代碼更多,體積更大
2. 內(nèi)存占用增大
3. 小量的單一的dom修改使用虛擬dom成本反而更高,不如直接修改真實(shí)dom快
15.vue.js的特點(diǎn)
簡潔:頁面由HTML模板+Json數(shù)據(jù)+Vue實(shí)例組成
數(shù)據(jù)驅(qū)動(dòng):自動(dòng)計(jì)算屬性和追蹤依賴的模板表達(dá)式
組件化:用可復(fù)用、解耦的組件來構(gòu)造頁面
輕量:代碼量小,不依賴其他庫
快速:精確有效批量DOM更新
模板友好:可通過npm,bower等多種方式安裝,很容易融入
16.Vue 項(xiàng)目時(shí)為什么要在組件中寫 key,其作用是什么?
在開發(fā)過程中,我們需要保證某個(gè)元素的 key 在其同級(jí)元素中具有唯一性。
在 Diff 算法中 會(huì)借助元素的 Key 值來判斷該元素是新近創(chuàng)建的還是被移動(dòng)而來的元素,
從而減少不必要的元素重渲染。
17.computed 和 watched 的區(qū)別:
computed 是計(jì)算屬性,依賴其他屬性計(jì)算值,并且 computed 的值有緩存,只有當(dāng)計(jì)算值變化才會(huì)返回內(nèi)容。
watch 監(jiān)聽到值的變化就會(huì)執(zhí)行回調(diào),在回調(diào)中可以進(jìn)行一些邏輯操作。
18.axios是什么?怎么使用?描述使用它實(shí)現(xiàn)登錄功能的流程?
請(qǐng)求后臺(tái)資源的模塊。npm install axios -S裝好,然后發(fā)送的是跨域,需在配置文件中config/index.js進(jìn)行設(shè)置。
后臺(tái)如果是Tp5則定義一個(gè)資源路由。js中使用import進(jìn)來,然后.get或.post。返回在.then函數(shù)中如果成功,
失敗則是在.catch函數(shù)中
轉(zhuǎn)載于:https://www.cnblogs.com/52cyd/p/11228019.html
總結(jié)
以上是生活随笔為你收集整理的关于vue.js的部分总结的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Mac终端Terminal使用
- 下一篇: oracle学习笔记5:pl/sql流程