生命周期:一个组件从创建到销毁的过程就是生命周期 生命周期钩子函数
beforeCreate()
created()
beforeMount()
mounted()
beforeUpdata()
updated()
beforeDestroy()
destroyed()
四个阶段:
创建
挂载
更新
销毁
一.组件初始化的时候会执行哪些生命周期函数?beforeCreate() created() beforeMount() mounted()
二.哪些输入那个命周期函数会执行多次?beforeUpdata() updated()
beforeCreate() 当组件实例化的时候,做的一个初始化操作 注意当前生命周期是组件还没有实例化完毕,因此你是访问不到当前组件的data或者methods的属性和方法,以及其他生命周期函数(应用:初始化的loading)
created() 创建后
1.当created执行完毕之后,会将data以及methods身上所有的属性和方法偶读添加到vm的实例身上
2.created生命周期函数中会将data身上所有的属性都添加上一个getter/setter方法 让data的属性具有响应式的特性
3.当前生命周期函数中可以用来进行ajax数据的请求
beforeMount() 挂载前
1.数据和模板还未进行结合,可以对数据做最后的一次处理
2.在这个生命周期函数中访问不到真实的DOM结构
mounted() 挂载后
1.数据与模板进行相结合,生成了真实的DOM树
2.在这个生命周期函数中我们可以通过this.$refs.属性名称 获取到真实的DOM结构对DOM进行处理
3.一般情况下我们都会在当前生命周期函数中做方法的实例化
beforeUpdata() 更新前
1.更新的数据和模板还未进行结合,可以对数据做最后的修改
2.在当前生命周期函数中也可以获取到真实的DOM结构
updated() 更新后
1.更新的数据和模板进行相结合,在这个生命周期函数中我们可以获取到数据更新后的DOM结构,以及对数据的更新做一个监听
beforeDestroy() 销毁前(应用:事件监听的解绑,事件的移除...)
1.在当前生命周期函数中依旧是可以访问到DOM结构的
destroyed() 销毁后
1.在当前生命周期函数中访问不到真实的DOM结构了
2.在这个生命周期中会将当前vm与DOM之间的关联全部断开
组件传值
一.父传子
传递:当父组件给子组件进行传值的时候,给子组件的标签上加一个自定义属性 值为需要传递的数据
接收:在子组件内部通过props进行接收,props进行接收的方式有两种,一种是数组一种是对象
数组接收:
props:["自定义属性"]
对象接收:
props:{
自定义属性:{
type:类型,
default:"默认值",
required:必须传递true
}
}
二.子传父
接收:当子组件给父组件进行传值的时候,首先给子组件标签绑定一个自定义方法,值为一个函数,注意这个函数不需要加(), 传递过来的值通过这个函数就可以接收到
传递:在子组件内部通过this.$emit("自定义方法名称",需要传递的参数)来进行传递数据
三.非父子组件传值
a.公共的Vue实例
1.首先需要让所有子组件都拥有共同的事件订阅的方法 Vue.prototype.Observer = new Vue();
2.给需要传值的组件调用this.Observer.$emit("事件名称",传递的值)
3.给需要接收的组件调用this.Observer.$on("事件名称",回调函数)
b.EventBus(自己了解)
c.手动封装$on $emit $off 事件订阅
on(事件名称,回调函数)
1.判断事件名称是否存在,如果存在直接将这个函数添加到数组中去
2.当不存在的时候,创建一个数组,然后将函数添加到数组中去
emit(事件名称,需要传递的参数)
1.半段事件名称是否存在,如果不存在则不做触发
2.入过存在,遍历数组将数组中的函数同意进行触发,然后将徐亚传递的参数传递给所有的函数
off(事件名称,需要解绑的函数)
1.判断时间名称是否存在,如果不存在则不做处理
2.如果存在,再去判断第二个参数是否存在,如果存在则将这个函数从数组中移除,如果不存在,将整个数组清空