? ? ? ? ? ? ? ? ? ? ? ?生命周期
? ? ? ? 1.又名:生命周期函數(shù) 生命周期回調(diào)函數(shù) 生命周期鉤子
? ? ? ? 2.是什么 Vue在關(guān)鍵時刻幫我們調(diào)用的一些特殊名稱的函數(shù)
? ? ? ? 3.生命周期函數(shù)的名字不可更改 但函數(shù)的具體內(nèi)容是程序員根據(jù)需求編寫的
? ? ? ? 4.生命周期函數(shù)中的this指向是vm或組件實(shí)例對象
? ? ? ? beforeCreate 在實(shí)例初始化之后、進(jìn)行數(shù)據(jù)偵聽和事件/偵聽器的配置之前同步調(diào)用
? ? ? ?created 在實(shí)例創(chuàng)建完成后被立即同步調(diào)用
? ? ? ? ?beforeMount 在掛載開始之前被調(diào)用
? ? ? Mounted 在實(shí)例掛載完成后被調(diào)用
? ? ? beforeUpdate 在數(shù)據(jù)發(fā)生改變后
? ? ?Updated 在數(shù)據(jù)更改導(dǎo)致的虛擬DOM 重新渲染和更新完畢之后被調(diào)用
? ? ? beforeUnmount? 在卸載組件實(shí)例之前調(diào)用
? ? ?Unmounted? ? 卸載組件實(shí)例后調(diào)用
? ? ? Activated? ? ? ? 被 keep-alive 緩存的組件激時調(diào)用
? ? ? Deactivated? ? ? 被 keep-alive 緩存的組件失活時調(diào)用
? ? ? errorCaptured? 在捕獲一個來自后代組件的錯誤時被調(diào)用
? ? ? ? ? ? ? ? ? ? 組件
如何注冊組件
? ? ? ? 1.局部注冊 靠new Vue的時候傳入components選項(xiàng)
? ? ? ? 2.全局注冊 靠 Vue.component('組件名',組件)
? ? ? ? 編寫組件標(biāo)簽
? ? ? ? ?<student></student> ?student是組件名
//創(chuàng)建student組件
const student = Vue.extend({
? ? // el:"#root", ? ? ?//一定不要寫配置項(xiàng) ?因?yàn)樽罱K組件是誰需要 誰使用
? ? template:`
? ? <div>
? ? ? ? <h2>學(xué)生姓名稱 {{studentName}}</h2>
? ? ? ?<h2>學(xué)生年齡 {{age}}</h2>
? ? </div>`,
? ? data(){
? ? ? ? return {
? ? ? ? ?studentName:'張三',
? ? ? ? ? age:18 ?
? ? ? ? }}})
?組件標(biāo)簽
? ? ? ? 第一種寫法 ?<School></School>
? ? ? ? 第二種寫法 ? <School/>
? ? ? ? 不使用腳手架時 ?<School/>會導(dǎo)致后續(xù)組件不能渲染
? ? ? ? 一個簡寫方式
? ? ? ? const School = Vue.extend(options) ? 可簡寫為 const School = options
?關(guān)于VueComponent
? ? ? ? 1.school組件本質(zhì)是一個名為VueComponent的構(gòu)造函數(shù) 且不是程序員定義的 是Vue.extend生成的
? ? ? ? 2.我們只需要寫<school/> 或 <school></school>Vue解析時會幫我們創(chuàng)建school組建的實(shí)例對象
? ? ? ? 即Vue幫我們執(zhí)行的 new VueCompoent(options)
? ? ? ? 3.每次調(diào)用Vue.extend 返回的都是一個全新的VueCompoent
? ? ? ? 4.關(guān)于this指向
? ? ? ? 1.組件配置
? ? ? ? data函數(shù) methods中的函數(shù) watch函數(shù) computed中的函數(shù) 他們的this均是VueCompoent
? ? ? ? 2.new Vue(options)配置中
? ? ? ? ?data函數(shù) methods中的函數(shù) watch函數(shù) computed中的函數(shù) 他們的this均是Vue實(shí)例對象
? ? ? ? 5. VueCompoent
