生命周期
1.又名:生命周期函数 生命周期回调函数 生命周期钩子
2.是什么 Vue在关键时刻帮我们调用的一些特殊名称的函数
3.生命周期函数的名字不可更改 但函数的具体内容是程序员根据需求编写的
4.生命周期函数中的this指向是vm或组件实例对象
beforeCreate 在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用
created 在实例创建完成后被立即同步调用
beforeMount 在挂载开始之前被调用
Mounted 在实例挂载完成后被调用
beforeUpdate 在数据发生改变后
Updated 在数据更改导致的虚拟DOM 重新渲染和更新完毕之后被调用
beforeUnmount 在卸载组件实例之前调用
Unmounted 卸载组件实例后调用
Activated 被 keep-alive 缓存的组件激时调用
Deactivated 被 keep-alive 缓存的组件失活时调用
errorCaptured 在捕获一个来自后代组件的错误时被调用
组件
如何注册组件
1.局部注册 靠new Vue的时候传入components选项
2.全局注册 靠 Vue.component('组件名',组件)
编写组件标签
<student></student> student是组件名
//创建student组件
const student = Vue.extend({
// el:"#root", //一定不要写配置项 因为最终组件是谁需要 谁使用
template:`
<div>
<h2>学生姓名称 {{studentName}}</h2>
<h2>学生年龄 {{age}}</h2>
</div>`,
data(){
return {
studentName:'张三',
age:18
}}})
组件标签
第一种写法 <School></School>
第二种写法 <School/>
不使用脚手架时 <School/>会导致后续组件不能渲染
一个简写方式
const School = Vue.extend(options) 可简写为 const School = options
关于VueComponent
1.school组件本质是一个名为VueComponent的构造函数 且不是程序员定义的 是Vue.extend生成的
2.我们只需要写<school/> 或 <school></school>Vue解析时会帮我们创建school组建的实例对象
即Vue帮我们执行的 new VueCompoent(options)
3.每次调用Vue.extend 返回的都是一个全新的VueCompoent
4.关于this指向
1.组件配置
data函数 methods中的函数 watch函数 computed中的函数 他们的this均是VueCompoent
2.new Vue(options)配置中
data函数 methods中的函数 watch函数 computed中的函数 他们的this均是Vue实例对象
5. VueCompoent
