vue是什么
用于構(gòu)建用戶界面的漸進(jìn)式開源JS框架，是創(chuàng)建單頁應(yīng)用的Web框架
核心特征：
- 數(shù)據(jù)驅(qū)動mvvm
- 組件化
- 指令系統(tǒng)
SPA與MPA
SPA
單頁應(yīng)用：
動態(tài)重寫當(dāng)前頁面數(shù)據(jù)用以用戶交互
MPA：
多頁應(yīng)用，每一個頁面都是主頁面
SPA首加載慢：
原因：網(wǎng)絡(luò)延時，資源體積太大
解決辦法：減小入口文件體積，Gzip壓縮，靜態(tài)資源緩存
v-if和v-show
作用：都是控制元素顯示與否
不同點：
作用機理，v-if控制的是元素是否渲染，而v-show控制css的display屬性，故頻繁改變現(xiàn)隱狀態(tài)使用v-show可以減少消耗
Vue實例掛載過程
- 調(diào)用_init方法(其中定義set、get、delete、destory方法；定義on,off,emit事件；定義update,forceupdate,destoryed生命周期)
- 調(diào)用$mount掛載實例對象
- 掛載是執(zhí)行mountcomponent方法
- 調(diào)用render函數(shù)創(chuàng)建虛擬dom
- 調(diào)用updatemount將虛擬DOM掛載到真實DOM，并渲染到頁面中
v-if和v-for
不建議同時作用于同一元素，v-for優(yōu)先級高于v-if，故每次都會現(xiàn)循環(huán)渲染，在邏輯判斷
路由懶加載
整個網(wǎng)頁默認(rèn)是剛打開就去加載所有頁面，路由懶加載就是只加載你當(dāng)前點擊的那個模塊。
按需去加載路由對應(yīng)的資源，提高首屏加載速度（tip:首頁不用設(shè)置懶加載，而且一個頁面加載過后再次訪問不會重復(fù)加載）。
實現(xiàn)原理：將路由相關(guān)的組件，不再直接導(dǎo)入了，而是改寫成異步組件的寫法，只有當(dāng)函數(shù)被調(diào)用的時候，才去加載對應(yīng)的組件內(nèi)容。
未啟用：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})復(fù)制
ES 提出的import方法啟用：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const HelloWorld =()=>import("@/components/HelloWorld")
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})復(fù)制
簡化：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//const HelloWorld =()=>inport("@/components/HelloWorld")
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:()=>import("@/components/HelloWorld")
}
]
})復(fù)制
為什么data是函數(shù)不是對象
- 根實例對象
data可以是對象也可以是函數(shù)（根實例是單例），不會產(chǎn)生數(shù)據(jù)污染情況 - 組件實例對象
data必須為函數(shù)，目的是為了防止多個組件實例對象之間共用一個data，產(chǎn)生數(shù)據(jù)污染。采用函數(shù)的形式，initData時會將其作為工廠函數(shù)都會返回全新data對象
vue2和vue3雙向綁定
vue2：
通過 object.defineProperty 實現(xiàn)，這種方法不會監(jiān)聽到屬性變化和數(shù)組變化，會造成
問題：動態(tài)給vue的data添加一個新的屬性時頁面不會刷新
Object.defineProperty原理：
let obj={}
Object.defineProperty(obk,'foo',{
get(){
return val
},
set(newVal){
if(newVal!=val){
val = newVal
}
}
})復(fù)制
? 所以set只能對初始化是已經(jīng)存在的屬性進(jìn)行賦值，無法攔截到新增屬性；
解決方法
- Vue.set()
- object.assign()
- forceUpdate()強制刷新
vue3
針對vue2中的問題，Vue3 使用了ES6新增的Proxy代理來攔截變化，可以監(jiān)聽到屬性以及數(shù)組變化
Vue中組件和插件
組件
定義：每一個.vue文件都可以視作一個組件，方便調(diào)試， 利于維護(hù)等；
編寫模式：
每一個vue文件模板：
<template></template>
<script>
exprot default{
}
</script>
<style></style>復(fù)制
我們還可以通過template屬性來編寫一個組件，如果組件內(nèi)容多，我們可以在外部定義template組件內(nèi)容，如果組件內(nèi)容并不多，我們可直接寫在template屬性上
<template id="testComponent"> // 組件顯示的內(nèi)容
<div>component!</div>
</template>
Vue.component('componentA',{
template: '#testComponent'
template: `<div>component</div>` // 組件內(nèi)容少可以通過這種形式
})復(fù)制
注冊形式：
Vue組件之間的通信方式
- 父子關(guān)系的組件數(shù)據(jù)傳遞選擇
props與$emit進(jìn)行傳遞，也可選擇ref - 兄弟關(guān)系的組件數(shù)據(jù)傳遞可選擇bus，其次可以選擇parent進(jìn)行傳遞
- 祖先與后代組件數(shù)據(jù)傳遞可選擇
attrs與listeners或者Provide與Inject - 復(fù)雜關(guān)系的組件數(shù)據(jù)傳遞可以通過
vuex存放共享的變量
vue的mixin
mixin（混入），提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。
本質(zhì)其實就是一個js對象，它可以包含我們組件中任意功能選項，如data、components、methods、created、computed等等
我們只要將共用的功能以對象的方式傳入 mixins選項中，當(dāng)組件使用 mixins對象時所有mixins對象的選項都將被混入該組件本身的選項中來
在Vue中我們可以局部混入跟全局混入
vue中key的原理
- 當(dāng)我們在使用
v-for時，需要給單元加上key - 用
+new Date()生成的時間戳作為key，手動強制觸發(fā)重新渲染
keep-alive
某些情況下不需要對組件重新加載，使用 kepp-alive使得組件可以緩存起來
使用方法：
路由中設(shè)置是否緩存
{
path:'list',
name:'itemList',
component:()=>import('@/conponents/list'),
meta:{
keepalive:true,
title:'標(biāo)題頁'
}
}復(fù)制
<div>
<keep-alive>
<router-view v-if='$route.meta.keepalive'></router-view>
</keep-alive>
</div>復(fù)制
Vue常用的修飾符
vue中修飾符分為以下五種：
- 表單修飾符
- 事件修飾符
- 鼠標(biāo)按鍵修飾符
- 鍵值修飾符
- v-bind修飾符
表單修飾符
lazy
在我們填完信息，光標(biāo)離開標(biāo)簽的時候，才會將值賦予給value，也就是在change事件之后再進(jìn)行信息同步
<input type='text' v-model.lazy="message">復(fù)制
trim
自動過濾用戶輸入的首空格字符，而中間的空格不會過濾
<input type='text' v-model.trim="value">復(fù)制
number
自動將輸入的值轉(zhuǎn)為number
<input type="number" v-model.number="value">復(fù)制
事件修飾符
stop
阻止冒泡事件，相當(dāng)與調(diào)用event.stopPropagation()
<button @click.stop="on">
點擊
</button>復(fù)制
prevent
阻止默認(rèn)事件
<button @click.prevent="on">
dian
</button>復(fù)制
once
只觸發(fā)一次
<button @click.once="shout(1)">ok</button>復(fù)制
鼠標(biāo)按鈕修飾符
鼠標(biāo)按鈕修飾符針對的就是左鍵、右鍵、中鍵點擊，有如下：
- left 左鍵點擊
- right 右鍵點擊
- middle 中鍵點擊
<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>復(fù)制
v-bind修飾符
async
能對props進(jìn)行一個雙向綁定
//父組件
<comp :myMessage.sync="bar"></comp>
//子組件
this.$emit('update:myMessage',params);復(fù)制
自定義指令
實現(xiàn)
自定義指令有全局注冊與局部注冊
全局注冊
Vue.directive第一個參數(shù)是指令的名字（不需要寫上v-前綴），第二個參數(shù)可以是對象數(shù)據(jù)，也可以是一個指令函數(shù)
局部注冊
局部注冊通過在組件options選項中設(shè)置directive屬性
使用自定義指令可以滿足我們?nèi)粘Ｒ恍﹫鼍?，這里給出幾個自定義指令的案例：
- 防抖
- 圖片懶加載
- 一鍵 Copy的功能
diff算法
作用：同級樹節(jié)點的高效比較算法
特點：同級比較，循環(huán)從兩邊向中間
新舊VNode節(jié)點如下圖所示：
第一次循環(huán)后，發(fā)現(xiàn)舊節(jié)點D與新節(jié)點D相同，直接復(fù)用舊節(jié)點D作為diff后的第一個真實節(jié)點，同時舊節(jié)點endIndex移動到C，新節(jié)點的 startIndex 移動到了 C
第二次循環(huán)后，同樣是舊節(jié)點的末尾和新節(jié)點的開頭(都是 C)相同，同理，diff 后創(chuàng)建了 C 的真實節(jié)點插入到第一次創(chuàng)建的 B 節(jié)點后面。同時舊節(jié)點的 endIndex 移動到了 B，新節(jié)點的 startIndex 移動到了 E
第三次循環(huán)中，發(fā)現(xiàn)E沒有找到，這時候只能直接創(chuàng)建新的真實節(jié)點 E，插入到第二次創(chuàng)建的 C 節(jié)點之后。同時新節(jié)點的 startIndex 移動到了 A。舊節(jié)點的 startIndex 和 endIndex 都保持不動
第四次循環(huán)中，發(fā)現(xiàn)了新舊節(jié)點的開頭(都是 A)相同，于是 diff 后創(chuàng)建了 A 的真實節(jié)點，插入到前一次創(chuàng)建的 E 節(jié)點后面。同時舊節(jié)點的 startIndex 移動到了 B，新節(jié)點的startIndex 移動到了 B
第五次循環(huán)中，情形同第四次循環(huán)一樣，因此 diff 后創(chuàng)建了 B 真實節(jié)點 插入到前一次創(chuàng)建的 A 節(jié)點后面。同時舊節(jié)點的 startIndex移動到了 C，新節(jié)點的 startIndex 移動到了 F
新節(jié)點的 startIndex 已經(jīng)大于 endIndex 了，需要創(chuàng)建 newStartIdx 和 newEndIdx 之間的所有節(jié)點，也就是節(jié)點F，直接創(chuàng)建 F 節(jié)點對應(yīng)的真實節(jié)點放到 B 節(jié)點后面
Axios
定義：是輕量級的Http庫，基于XMLHttpRequest,支持promise
封裝
項目中對于請求的header，超時時間，不同環(huán)境的不同api地址等問題，統(tǒng)一管理便于代碼維護(hù)
設(shè)置請求前綴
if(a){
axios.defaults.baseURL='a'
}else{
axios.defaults.baseURL='b'
}復(fù)制
封裝請求
//get
export function httpGet({
url,
params = {}
}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params
}).then(res => resolve(res)).catch(err => reject(err))
})
}
//post
export function httpPost({
url,
params = {},
data = {}
}) {
return new Promise((resolve, reject) => {
axios({
url,
method: 'POST',
data: data,
params
}).then((res) => {
resilve(res)
}).catch((err) => {
reject(err)
})
})
}復(fù)制
攔截器interceptors
請求攔截器
如有token時header加入token
axios.intercepter.request.use(config => {
let token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = token
}
return config
})復(fù)制
響應(yīng)攔截器
axios.intercepter.response.use(response=>{
if(response.status==400){
return Promise.reject(response)
}else{
// ...
}
})復(fù)制
SSR解決了什么問題？有做過SSR嗎？你是怎么做的
SSR主要解決了以下兩種問題：
- seo：搜索引擎優(yōu)先爬取頁面
HTML結(jié)構(gòu)，使用ssr時，服務(wù)端已經(jīng)生成了和業(yè)務(wù)想關(guān)聯(lián)的HTML，有利于seo - 首屏呈現(xiàn)渲染：用戶無需等待頁面所有
js加載完成就可以看到頁面視圖（壓力來到了服務(wù)器，所以需要權(quán)衡哪些用服務(wù)端渲染，哪些交給客戶端）
vue要做權(quán)限管理該怎么做？如果控制到按鈕級別的權(quán)限怎么做？
接口權(quán)限
后端JWT，登錄完拿到token，將token存起來，通過axios請求攔截器進(jìn)行攔截，每次請求的時候頭部攜帶token
路由權(quán)限控制
Vue項目中你是如何解決跨域
跨域本質(zhì)是瀏覽器基于同源策略的一種安全手段
同源策略：
- 協(xié)議
- 主機
- 端口
解決跨域的方法有很多，下面列舉了三種：
- JSONP
- CORS
- PROXY
cors
后端方案
django模塊：django-cors-headers
pip install django-cors-headers復(fù)制
Proxy
- webpack可以設(shè)置
- 服務(wù)端設(shè)置
- nginx設(shè)置反向代理
特性以及部分原理 自定義指令（directive） 除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。有時候我們想對dom進(jìn)行操作的時候，就可以使用自定義指令，比如設(shè)置標(biāo)題樣式并且讓標(biāo)題一直固定在頁面上方，可以使用全局注冊或者局部注冊。然后你可以在模板中任何元素上使用新的 v-title property。
//全局注冊
<div id="app">
<div v-title>hello world</div>
</div>
<script>
Vue.directive('title', {
inserted: function (el) {
console.log(el)
el.style.position = 'fixed'
el.style.top = '50px'
el.style.left = '48%'
el.style.color = '#409EFF'
}
})
new Vue({
el: '#app',
data: {
message: 'hello!'
}
})
</script>
<style>
#app{
height: 1000px
}
</style>
//局部注冊
new Vue({
el: '#app',
directives: {
title: {
inserted: function (el) {
console.log(el)
el.style.position = 'fixed'
el.style.top = '50px'
el.style.left = '48%'
el.style.color = '#409EFF'
}
}
}
})復(fù)制
irective鉤子函數(shù)參數(shù)
指令鉤子函數(shù)會被傳入以下參數(shù)：
- el：指令所綁定的元素，可以用來直接操作 DOM。
- binding：一個對象，包含以下 property：
- name：指令名，不包括 v- 前綴。
- value：指令的綁定值，例如：v-my-directive=”1 + 1” 中，綁定值為 2。
- oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
- expression：字符串形式的指令表達(dá)式。例如 v-my-directive=”1 + 1” 中，表達(dá)式為 “1 + 1”。
- arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 “foo”。
- modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
- vnode：Vue 編譯生成的虛擬節(jié)點。移步 VNode API 來了解更多詳情。
- oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。
我們打印下函數(shù)傳入的參數(shù)，其實簡單來說就是el就是綁定dom元素，binging指令：后所攜帶的具體內(nèi)容，VNode就當(dāng)還未生成的節(jié)點好了。
<div v-title:arr="message">hello world</div>
Vue.directive('title', {
inserted: function (el, binding, vnode) {
console.log(el, binding, vnode)
el.style.position = 'fixed'
el.style.top = '50px'
el.style.left = '48%'
el.style.color = '#409EFF'
}
})
復(fù)制代碼復(fù)制
鉤子函數(shù)
一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選)：
- bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。
- inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。
- update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。
- componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用
- unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。
我們可以測試下鉤子函數(shù)的調(diào)用時機：
<div id="app">
<div id="txt" v-title:data="sum">value: {{sum}}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
sum: 0
},
directives: {
title: {
bind: (el, bind) => { console.log(bind.value, 'a') },// 第一次綁定元素時調(diào)用
inserted: (el, bind) => { console.log(bind.value, 'b') },// 當(dāng)被綁定的元素插入到 DOM 中時……
update: (el, bind) => { console.log(bind.value, 'c') },// 所在組件VNode發(fā)生更新時調(diào)用
componentUpdated: (el, bind) => { console.log(bind.value, 'd') }, // 指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用
unbind: (el, bind) => { console.log(bind.value, 'e') } // 只調(diào)用一次，指令與元素解綁時調(diào)用
}
},
mounted() {
console.log(this.sum, '???')
let timer = setInterval(() => {
this.sum++
}, 200)
setTimeout(() => {
clearInterval(timer)
}, 3000)
}
})
</script>復(fù)制
指令大致原理
在頁面渲染的過程中，分別有創(chuàng)建(create)、激活(avtivate)、更新(update)、移除(remove)、銷毀(destroy)，在這些過程中，框架在每個時段都會調(diào)用相應(yīng)的鉤子函數(shù)，這些hooks中一部分的函數(shù)就包含了我們的指令。源碼部分我了解的不多，給大家推薦一篇vue指令原理相關(guān)博文www.cnblogs.com/gerry2019/p…
混入
官方是這樣定義的：混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項。當(dāng)組件使用混入對象時，所有混入對象的選項將被“混合”進(jìn)入該組件本身的選項。其實就是vue實例的一個復(fù)用。實用場景：公共組件或者功能，例如獲取用戶白名單、菜單返回、公共基礎(chǔ)table。 值得注意的點：
- 當(dāng)組件和混入對象含有同名選項時，這些選項將以恰當(dāng)?shù)姆绞交旌稀１热?，?shù)據(jù)對象在內(nèi)部會進(jìn)行淺合并 (一層屬性深度)，在和組件的數(shù)據(jù)發(fā)生沖突時以組件數(shù)據(jù)優(yōu)先。
- 同名鉤子函數(shù)將混合為一個數(shù)組，因此都將被調(diào)用。另外，混入對象的鉤子將在組件自身鉤子之前調(diào)用。
- 值為對象的選項，例如 methods, components 和 directives，將被混合為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
復(fù)制代碼復(fù)制
高階組件
一個函數(shù)接受一個組件為參數(shù)，返回一個包裝后的組件。其實在vue中，組件可以當(dāng)做一個函數(shù)，那從本質(zhì)上來說，高階組件就是高階函數(shù)（JavaScript的函數(shù)其實都指向某個變量。既然變量可以指向函數(shù)，函數(shù)的參數(shù)能接收變量，那么一個函數(shù)就可以接收另一個函數(shù)作為參數(shù)，這種函數(shù)就稱之為高階函數(shù)）
高階函數(shù)
舉例一個最簡單的高階函數(shù)計算次方
function pow(x, y, f){
return f(x, y);
}
pow(3, 3, Math.pow)
復(fù)制代碼復(fù)制
在es6中也有很多高階函數(shù)，如map、reduce、filter。
高階組件的例子
<div id="app">
<hoc></hoc>
</div>
<script>
const view = {
template: `<span>
<span>test hoc ...</span>
</span>`,
props: ["result", "loading"],
};
const test = (wrapped, txt = 'hello') => {
return {
render(h) {
const args = {
props: {
result: this.result,
loading: this.loading,
},
};
const wrapper = h("div", [
h(wrapped, args),
'loading'
]);
return wrapper
}
}
}
const hoc = test(view, 'hui')
console.log(hoc);
new Vue({
el: '#app',
components: {
hoc
},
data: {
sum: 0
}
})
</script>
復(fù)制代碼復(fù)制
值得注意的點
- 高階組件(HOC)應(yīng)該是無副作用的純函數(shù)，且不應(yīng)該修改原組件,就是組件是一個新的組件，不會對原組件做修改。
- 高階組件(HOC)不關(guān)心你傳遞的數(shù)據(jù)(props)是什么，并且被包裝組件(WrappedComponent)不關(guān)心數(shù)據(jù)來源
- 高階組件(HOC)接收到的 props 應(yīng)該透傳給被包裝組件(WrappedComponent)
- 在高階組件中渲染函數(shù)向子組件中傳遞作用域插槽時候要注意上下文
動態(tài)組件 異步組件 遞歸組件
動態(tài)組件
可以在同組件之間進(jìn)行動態(tài)切換， 動態(tài)切換可以通過 Vue 的 元素加一個特殊的 is attribute 來實現(xiàn)：
<!-- 組件會在 `currentTabComponent` 改變時改變 -->
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Components Example</title>
<script src="https://unpkg.com/vue"></script>
<style>
.tab-button {
padding: 6px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px solid #ccc;
cursor: pointer;
background: #f0f0f0;
margin-bottom: -1px;
margin-right: -1px;
}
.tab-button:hover {
background: #e0e0e0;
}
.tab-button.active {
background: #e0e0e0;
}
.tab {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div id="dynamic-component-demo" class="demo">
<button
v-for="tab in tabs"
v-bind:key="tab"
v-bind:class="['tab-button', { active: currentTab === tab }]"
v-on:click="currentTab = tab"
>
{{ tab }}
</button>
<component v-bind:is="currentTabComponent" class="tab"></component>
</div>
<script>
Vue.component("tab-home", {
template: "<div>Home component</div>"
});
Vue.component("tab-posts", {
template: "<div>Posts component</div>"
});
Vue.component("tab-archive", {
template: "<div>Archive component</div>"
});
new Vue({
el: "#dynamic-component-demo",
data: {
currentTab: "Home",
tabs: ["Home", "Posts", "Archive"]
},
computed: {
currentTabComponent: function() {
return "tab-" + this.currentTab.toLowerCase();
}
}
});
</script>
</body>
</html>
復(fù)制代碼復(fù)制
異步組件
在大型應(yīng)用中，我們可能需要將應(yīng)用分割成小一些的代碼塊，并且只在需要的時候才從服務(wù)器加載一個模塊。為了簡化，Vue 允許你以一個工廠函數(shù)的方式定義你的組件，這個工廠函數(shù)會異步解析你的組件定義。Vue 只有在這個組件需要被渲染的時候才會觸發(fā)該工廠函數(shù)，且會把結(jié)果緩存起來供未來重渲染。
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// 向 `resolve` 回調(diào)傳遞組件定義
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
復(fù)制代碼復(fù)制
在vue-cli中在使用異步組件
const first =()=>import(/* webpackChunkName: "group-foo" */ "../components/first.vue");
復(fù)制代碼復(fù)制
vue中部分鉤子函數(shù)(@hook)
Vue 實例同時在其事件接口中提供了其它的方法。我們可以：
通過 $on(eventName, eventHandler) 偵聽一個事件
通過 $once(eventName, eventHandler) 一次性偵聽一個事件
通過 $off(eventName, eventHandler) 停止偵聽一個事件
你通常不會用到這些，但是當(dāng)你需要在一個組件實例上手動偵聽事件時，它們是派得上用場的。它們也可以用于代碼組織工具。例如，你可能經(jīng)?？吹竭@種集成一個第三方庫的模式。官網(wǎng)提供一個案例：在不使用beforeDestroy鉤子清picker
//案例一
mounted: function () {
var picker = new Pikaday({
field: this.$refs.input,
format: 'YYYY-MM-DD'
})
this.$once('hook:beforeDestroy', function () {
picker.destroy()
})
}
//案例二
//在父組件在子組件渲染階段做一些操作
<child
@hook:mounted="handle"
@hook:beforeUpdated="xxx"
@hook:updated="xxx"
/>
method () {
handle() {
// do something...
}
},
復(fù)制代碼復(fù)制
在vue生命周期中周期都有對應(yīng)的鉤子函數(shù)
插件
插件通常用來為 Vue 添加全局功能。插件的功能范圍沒有嚴(yán)格的限制——一般有下面幾種：
- 添加全局方法或者 property。如：vue-custom-element
- 添加全局資源：指令/過濾器/過渡等。如 vue-touch
- 通過全局混入來添加一些組件選項。如 vue-router
- 添加 Vue 實例方法，通過把它們添加到 Vue.prototype 上實現(xiàn)。
- 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。如 vue-router
自定義插件文章來源：http://www.zghlxwxcb.cn/news/detail-507547.html
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 邏輯...
}
// 2. 添加全局資源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
...
})
// 3. 注入組件選項
Vue.mixin({
created: function () {
// 邏輯...
}
...
})
// 4. 添加實例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 邏輯...
}
}
復(fù)制代碼復(fù)制文章來源地址http://www.zghlxwxcb.cn/news/detail-507547.html
到了這里，關(guān)于vue知識點的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
