vue之生命周期钩子及父子间传值

vue生命周期钩子函数（目前有11个，8个常用的）

（1）beforeCreate（创建前）

　　详　　细：在实例初始化之后，数据观测和event/watcher事件配置之前被调用

　　组件状态：实例初始化之后，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据

　　最佳实践：常用于初始化非响应式变量

 

（2）created（创建后）

　　在实例创建完成后被立即调用；

　　实例已完成：数据观测，属性和方法的运算，watch/event事件回调；

　　挂载还没开始，$el属性（视图）目前不可见。

　　（$el --> Vue实例使用的跟DOM元素）

　　组件状态：实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组

　　最佳实践：常用于简单的ajax请求，页面的初始化

 

 （3）beforeMount（载入前）

　　在挂载开始之前被调用：相关的render函数首次被调用

　　（在服务端渲染期间不被调用）

　　组件状态：在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数

 

（4）mounted（载入后）

　　el被新创建的vm.$el替换，并挂载到实例上去之后调用

　　所有的子组件不一定都会被挂载，想要等整个视图都渲染完毕，可以用vm.$nextTick替换掉mounted：

　　mounted:function(){

　　　　this.$nextTick(function(){

　　　　})

　　}

　　（在服务端渲染期间不被调用）

　　组件状态：实例挂载在DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问（视图可见，子组件不一定全部被挂载）

　　最佳实践：常用于获取VNode信息和操作，ajax请求

 

（5）beforeUpdate（更新前）

　　（在服务端渲染期间不被调用，因为只有初次渲染会在服务端进行）

　　组件状态：响应式数据更新时调用，发生在虚拟DOM打补丁之前

　　最佳实践：适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器

 

（6）updated（更新后）

　　（在服务端渲染期间不被调用）

　　详细：updated不承诺所有的子组件都一起被重绘，等重绘完毕，可以用vm.$nextTick替换updated（同mounted）

　　组件状态：虚拟DOM重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作

　　最佳实践：避免在这个钩子函数中操作数据，可能会陷入死循环（可增加开关操作解决）

 

（7）beforeDestroy（销毁前）

　　（在服务端渲染期间不被调用）

　　当切换组件（当前组件未缓存）时，会执行beforeDestroy/updated钩子函数

　　组件状态：实例销毁之前调用，这一步，实例仍然可以使用，this仍能获取到实例

　　最佳实践：常用于销毁定时器、解除绑定全局时间、销毁插件对象等操作

 

（8）destroyed（销毁后）

　　（在服务端渲染期间不被调用）

　　组件状态：实例销毁后调用，调用后，vue实例指示的所有东西都会解除绑定，所有的事件监听器都被移除，所有的子实例也会被销毁

 

注意：（1）created阶段的ajax请求和mounted请求的区别：前者视图未出现，如果请求信息过多，页面会长时间处于白屏信息；

　　　（2）mounted不会承诺所有的子组件也都一起被挂载，如果希望等到整个视图都渲染完毕，可以用vm.$nextTick;

 

父子组件生命周期

　　父传子：props

　　父：

<sub-table :tableData="tableData"/>

　　子：SubTable.vue

　　props:{
　　　　tableData:Array
　　}（简写）

　　或

　　props:{
　　　　tableData:{
　　　　　　type:Array,
　　　　　　default: []
　　　　}
　　}

　　（1）仅当子组件完成挂载后，父组件才会挂载　　

　　（2）当子组件完成挂载后，父组件会主动执行一次beforeUpdate/updated钩子函数（仅首次）

　　（3）父子组件在data变化中是分别监控的，但是在更新props中的数据是关联的（可实践）

　　（4）销毁父组件时，先将子组件销毁后才会销毁父组件

 

当父组件数据变化，子组件触发更新

用watch监听父组件