vue复习之生命周期函数与组件传值方法

vue复习之生命周期函数与组件传值方法

###生命周期有哪些&＃xff1f;分别做了些什么&＃xff1f;

1. beforeCreate&＃xff1a; 开始创建vue实例
2. created&＃xff1a;此时进行了vue实例的配置&＃xff1a;如获取了数据的obsever&＃xff0c;data&＃xff0c;方法&＃xff0c;监听器&＃xff0c;计算属性&＃xff0c;监听属性。给实例开始了配置和属性。此阶段可以进行数据资源的获取。
3. beforeMount&＃xff1a;此时开始了计算实例的template模板&＃xff0c;准备渲染和挂载&＃xff0c;实例节点还未生成。
4. mounted&＃xff1a;vm节点已经生成&＃xff0c;页面渲染结束。此时可以进行DOM节点的获取。
5. beforeUpdate&＃xff1a;这个节点主要视为更新做准备&＃xff0c;通过Diff算法来计算生成虚拟DOM。
6. updated&＃xff1a;将虚拟节点打补丁到vue实例上&＃xff0c;实现更新。这个阶段数据变化就会导致DOM更新&＃xff0c;而DOM变化又会引起vue实例变化&＃xff0c;所以开发不能在此次进行数据修改
7. beforeDestory&＃xff1a;开始准备销毁vue实例&＃xff0c;此时vm还是可以访问。
8. destoryed&＃xff1a;销毁vue实例&＃xff0c;销毁子组件实例&＃xff0c;解绑所有的事件与属性&＃xff0c;监听器等。这一步可以销毁所有可能还在的属性&＃xff0c;如定时器等。

组件通信有哪些方法&＃xff1f;

转载自vue组件间通信六种方式&＃xff08;完整版&＃xff09;

1. props&＃xff0c;$emit&＃xff0c;子组件通过props接收&＃xff0c;通过 emit响应返回数据
2. vuex&＃xff0c;
3. $parent $childrenref\&＃xff0c;父组件通过$children获取直接子组件&＃xff0c;而子组件通过$parent获取直接父组件&＃xff0c;而ref是直接获取组件实例。
4. 非父子组件&＃xff0c;bus. $emit设置属性\&＃xff0c;$bus.$on获取组件&＃xff0c;基本思想&＃xff1a;通过一个公共组件来接收属性&＃xff0c;属性名不能重复。
5. $attrs\&＃xff1a;子组件用来接收父组件定义的所有非样式和props的属性\&＃xff0c;$lisenter&＃xff1a;依赖监听父组件所有的事件。
6. 祖孙组件&＃xff1a;祖组件使用provide来提供属性&＃xff0c;孙组件使用inject来接收。