VUE 鉤子函式 引數

2021-09-30 20:49:41 字數 1323 閱讀 6888

乙個指令定義物件可以提供如下幾個鉤子函式 (均為可選):

****[指令繫結到元素上執行]bind:只呼叫一次,指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。

*****[插入到父節點執行]inserted:被繫結元素插入父節點時呼叫 (僅保證父節點存在,但不一定已被插入文件中)。

*****[資料更新執行]update:所在元件的 vnode 更新時呼叫,但是可能發生在其子 vnode 更新之前。指令的值可能發生了改變,也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函式引數見下)。

我們會在稍後討論渲染函式時介紹更多 vnodes 的細節。

componentupdated:指令所在元件的 vnode 及其子 vnode 全部更新後呼叫。

unbind:只呼叫一次,指令與元素解綁時呼叫。

接下來我們來看一下鉤子函式的引數 (即 el、binding、vnode 和 oldvnode)。

bind

指令第一次繫結到元素上呼叫,一次性的,可以作為初始化的準備工作

inserted

被繫結元素插入父節點時呼叫

鉤子函式引數

指令鉤子函式會被傳入以下引數:

el:指令所繫結的元素,可以用來直接操作 dom 。

binding:乙個物件,包含以下屬性:

name:指令名,不包括 v- 字首。

value:指令的繫結值,例如:v-my-directive="1 + 1" 中,繫結值為 2。

oldvalue:指令繫結的前乙個值,僅在 update 和 componentupdated 鉤子中可用。無論值是否改變都可用。

expression:字串形式的指令表示式。例如 v-my-directive="1 + 1" 中,表示式為 "1 + 1"。

arg:傳給指令的引數,可選。例如 v-my-directive:foo 中,引數為 "foo"。

modifiers:乙個包含修飾符的物件。例如:v-my-directive.foo.bar 中,修飾符物件為 。

oldvnode:上乙個虛擬節點,僅在 update 和 componentupdated 鉤子中可用。

el

dom元素

binding

物件name

指令名 v-for --> for && v-model --> model

value

等號右側變數或者常量的值

expression

等號右側字面值,是什麼就是什麼

modifiers

.stop.prevent -->

vue 鉤子函式

一共有十乙個,但是常見的八個,常用的三四個 beforecreate 建立之前 常用 vue建立之前,data未生產。在beforecreate前,所有的options都會先存到vm.options中,在beforecreate之後,將 options裡的data,props,methods等等乙個...

vue 鉤子函式

beforerouteenter to,from,next 1 this undefined 2 this.data undefined 3 methods 裡面的方法 undefined 4 如果有快取,該方法不會被呼叫 beforecreate 1 如果有快取,該方法不會被呼叫 2 this.d...

vue鉤子函式

前言 鉤子就好像是把人的出生到死亡分成乙個個階段,你肯定是在出生階段起名字,而不會在成年或者死亡的階段去起名字。或者說你想在出生階段去 也是不行的。元件也是一樣,每個階段它的內部構造是不一樣的。所以一般特定的鉤子做特定的事,比如ajax獲取資料就可以在mounted階段。一 vue生命週期簡介 咱們...