Vue.js知識點

獨立構建和運行時構建

有兩種構建方式,獨立構建和運行構建。它們的區別在于前者包含模板編譯器而后者不包含。

模板編譯器的職責是將模板字符串編譯為純JavaScript的渲染函數。如果你想要在組件中使用template選項,你就需要編譯器。

生命周期

具體查看官網的流程圖,要注意的是created和mounted區別,created是vm實例已創建但未掛載,因此一些DOM操作應該放在mounted中。異步請求放在created或者mounted暫時沒發現什么區別,如您知道有什么區別,請評論指出。

計算(computed)屬性

模板內的表達式不應該包含太多的邏輯,對于任何復雜邏輯,都應當使用計算屬性

computed屬性和methods不同的是計算屬性是基于它們的依賴進行緩存的。

computed屬性和computed屬性,通常更好的想法是使用computed屬性而不是命令式的watch回調。雖然計算屬性在大多數情況下更合適,但有時也需要一個自定義的watcher。當你想要在數據變化響應時,執行異步操作或開銷較大的操作,這是很有用的。

數組更新檢測

數組的變異方法(mutation method,會改變被這些方法調用的原始數組)會觸發視圖更新,有以下七個:

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

當使用非變異方法時,可以用新數組替換舊數組,或者使用Vue.set方法。

對象更新

可以用新對象替換舊對象,或者使用Vue.set方法

Vue.set(vm.someObject,'foo','bar')

this.someObject = Object.assign({},this.someObject, {a:1,b:2})

事件處理器

Vue.js為v-on提供了事件修飾符和按鍵修飾符

表單控件綁定

可以用v-model指令在表單控件元素上創建雙向數據綁定。常見修飾符有.lazy、.number、.trim。

也可以使用自定義事件的表單輸入組件。

組件

Vue組件的API來自三部分:props,events和slots:

Props允許外部環境傳遞數據給組件

Events允許組件觸發外部環境的副作用

Slots允許外部環境將額外的內容組合在組件中。

1)組件的data屬性必須是函數

2)父子組件

在Vue.js中,父子組件的關系可以總結為 props down, events up 。父組件通過props向下傳遞數據給子組件,子組件通過events給父組件發送消息。

prop是單向綁定的:當父組件的屬性變化時,將傳導給子組件,但是不會反過來。這是為了防止子組件無意修改了父組件的狀態——這會讓應用的數據流難以理解。

另外,每次父組件更新時,子組件的所有prop都會更新為最新值。這意味著你不應該在子組件內部改變prop。如果你這么做了,Vue會在控制臺給出警告。

為什么我們會有修改prop中數據的沖動呢?通常是這兩種原因:

1.prop作為初始值傳入后,子組件想把它當作局部數據來用;

2.prop作為初始值傳入,由子組件處理成其它數據輸出。

對這兩種原因,正確的應對方式是:

1.定義一個局部變量,并用prop的值初始化它:

props: ['initialCounter'],

data:function(){

????????return{ counter:this.initialCounter }

}

2.定義一個計算屬性,處理prop的值并返回。

props:['size'],

computed: {

????????????normalizedSize:function() {? ?

?????????????????return this.size.trim().toLowerCase()??

????}

}

注意在JavaScript中對象和數組是引用類型,指向同一個內存空間,如果prop是一個對象或數組,在子組件內部改變它會影響父組件的狀態。

3)非父子組件

有時候兩個組件也需要通信(非父子關系)。在簡單的場景下,可以使用一個空的Vue實例作為中央事件總線。在復雜的情況下,我們應該考慮使用專門的狀態管理模式。

4).sync修飾符

在一些情況下,我們可能會需要對一個prop進行『雙向綁定』。

2.0中移除了.sync,Vue2.3.0+又將其添加回來了,但是這次它只是作為一個編譯時的語法糖存在,它會被擴展為一個自動更新父組件屬性的v-on偵聽器。

5)使用slot進行內容分發

作用域插槽:接收從子組件中傳遞的prop對象。作用域插槽更具代表性的用例是列表組件,允許組件自定義應該如何渲染列表每一項

6)動態組件、is特性和keep-alive指令

7)子組件索引

盡管有props和events,但是有時仍然需要JavaScript中直接訪問子組件。為此可以使用ref為子組件指定一個索引ID。

異步更新隊列

雖然 Vue.js 通常鼓勵開發人員沿著“數據驅動”的方式思考,避免直接接觸 DOM,但是有時我們確實要這么做。為了在數據變化之后等待 Vue 完成更新 DOM ,可以在數據變化之后立即使用 Vue.nextTick(callback) 。這樣回調函數在 DOM 更新完成后就會調用。

過渡效果

Vue在插入、更新或者移除DOM時,提供多種不同方式的應用過渡效果。包括以下工具:

在CSS過渡和動畫中自動應用class

可以配合使用第三方CSS動畫庫,如Animate.css

在過渡鉤子函數中使用JavaScript直接操作DOM

可以配合使用第三方JavaScript動畫庫,如Velocity.js

1)單元素/組件的過渡

Vue提供了transition的封裝組件,在下列情形中,可以給任何元素和組件添加過渡

條件渲染(使用v-if)

條件展示(使用v-show)

動態組件

組件根節點

2)多個元素的過渡

對于原生標簽可以使用 v-if/v-else

3)多個組件的過渡

多個組件的過渡我們可以使用動態組件。

4)列表過渡

Render函數和JSX

自定義指令

和Angular的指令類似,主要操作DOM,下面是一個滾動加載的指令,holder暫時沒想到什么更好的處理方法:

混合

混合是一種靈活的分布式復用Vue組件的方式。混合對象可以包含任意組件選項。以組件使用混合對象時,所有混合對象的選項將被混入該組件本身的選項。

插件

1)創建插件

Vue.js的插件應當有一個公開方法install。這個方法的第一個參數是Vue構造器 , 第二個參數是一個可選的選項對象。

2)使用插件

通過全局方法Vue.use()使用插件:

// 調用`MyPlugin.install(Vue)`Vue.use(MyPlugin)

也可以傳入一個選項對象:

Vue.use(MyPlugin, {someOption: true })

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容