vue的生命周期和函数式组件

vue的生命周期

生命周期 创建阶段

创建阶段生命周期的顺序：beforeCreate-->data-->created-->beforeMount-->render-->mounted

注意：vue并不承诺子组件的dom也会挂载到我们的真实dom上，所以我们需要用到this.$nextTick来把操作dom的事情放到回调中。

更新阶段

更新阶段生命周期的顺序：beforeUpdate-->render-->updated

销毁阶段

销毁阶段生命周期的顺序：beforeDestory-->destroyed

函数式组件

functional : true

无状态、无实例、没有this上下文、无生命周期

其实可以认为是一个简单的方法，一般是用来做展示用的。比如：vue中并没有提供临时变量，虽然computed帮我们在很大程度上避免了这些事情，但是计算属性有一个限制就是我们依赖的数据必须是响应式数据  ，而且我们还可能会需要一些全局的数据，为了避免重复计算，我们可以在模版中借助函数式组件做 临时变量。

export default {

    functional: true,

    render: (h, ctx) => {

        return ctx.scopedSlots.default && ctx.scopedSlots.default(ctx.props || {});

    }

};

在render的时候把传递的属性返回给调用方。

<TempVar 

    :var1="`hello ${name}`" 

    :var2="destroyClock ? 'hello vue' : 'hello world'" 

> 

        <template v-slot="{ var1, var2 }">

             {{ var1 }} 

             {{ var2 }}

         </template>

 </TempVar>

var1,var2作为临时变量，在template中随时可以使用。