生命周期、插槽

介绍: 每个 Vue 实例/组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中的某些阶段也会运行一些特定的函数,这些函数就被叫做生命周期钩子，这给了用户在不同阶段添加自己的代码的机会。

生命周期钩子函数详解(前面带*号的生命周期表示非常用生命周期)

*beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。该生命周期中无法访问data 计算属性 props

new Vue({
           el: '#app',
           data: {
               name: '小明',
               age: 18
           },
           beforeCreate() {
               console.log(
                   '组件被实例化后触发,但是该生命周期阶段数据还没有初始化完成',
                   this,
                   this.$data // undefined
               )
           }
       })

created: 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 目前尚不可用。(在这个生命周期中不要操作页面中DOM元素,因为元素还没有被渲染出来)

new Vue({
            el: '#app',
            data: {
                name: '小明',
                age: 18
            },
            created() {
                console.log(
                    '组件被实例化后触发,data/计算属性/watch/methods已经配置完成,这里可以执行一些初始网络请求操作',
                    this,
                    this.$data 
                )
                this.getDataFromServer()
            },
            methods: {
                getDataFromServer() {
                    console.log('开启网络请求,向服务器请求数据')
                }
            }
        })

*beforeMount: 在挂载(渲染)开始之前被调用: 相关的 render 函数首次被调用。

mounted: 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

注意: mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick

new Vue({
            el: '#app',
            data: {
                name: '小明',
                age: 18
            },
            beforeMount() {
                console.log('实例将要被渲染',this.$refs) // this.$refs空对象
            },
            mounted() {
                console.log('组件挂载完毕,挂载的意思就是实例第一次渲染完成,这里是一个操作DOM的好时机', this.$refs) 
                //this.$refs元素已经获取完毕 
                this.$nextTick(()=> {
                    // 这里所有子组件全部挂载完毕
                })
            }
        })

beforeUpdate: 数据更新时调用，发生在虚拟 DOM更新渲染之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在DOM更新渲染之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意: updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick

 new Vue({
            el: '#app',
            data: {
                name: '小明',
                age: 18
            },
          beforeUpdate() {},  
          updated: function () {
              // 不能保证所有子组件更新完毕
              this.$nextTick(function () {
                //保证所有子组件更新完毕
              })
            }
        }) 

beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。(在该生命周期中我们仍然可以访问,实例对象的属性 方法 计算属性 DOM节点等)。

该生命周期中应该去做一些清理工作如：解绑计时器，取消网络请求，清理掉哪些原生事件监听或者在mounted阶段创建DOM节点

new Vue({
            el: '#app',
            data: {
                name: '小明',
                age: 18,
                index: 0
            },
            mounted() {
                // 模拟启动轮播图
               this.timer = setInterval(() => {
                   this.index++
               }, 1000);
            },
            beforeDestroy() {
                // 解绑计时器
                clearInterval(this.timer)
            }
})

*destroyed: 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

activated: 被 keep-alive 缓存的组件激活时调用。

deactivated: 被 keep-alive 缓存的组件停用时调用。

<div id="app">
        <keep-alive>
            <component :is="show? 'demo': 'test'"></component>
        </keep-alive>
       
        <button @click="show = !show">show/hidden</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                show: true
            },
            components: {
                demo: {
                    template: '<div>我是一个demo组件</div>',
                    mounted() {
                        console.log('组件第一次挂载完毕')
                    },
                    beforeDestroy() {
                        console.log('组件将要被销毁')
                    },
                    activated() {
                        console.log('demo组件被激活')
                    },
                    deactivated() {
                        console.log('demo组件被停用')
                    }
                },
                test: {
                    template: '<h2 @click="count++">count{{count}}</h2>',
                    data() {
                        return {
                            count: 7
                        }
                    },
                    activated() {
                        console.log('test组件被激活')
                    },
                    deactivated() {
                        console.log('test组件被停用')
                    }
                }
            }
        })
    </script>

插槽

概念: Vue 实现了一套内容分发的 API，为组件提供了一个 <slot> 元素作为承载分发内容的出口。

语法:

 <script>
 Vue.component('login-component',{
                 template: `
                 <div>
                     <div>
                         // 分发内容的内容会被承载到这个slot标签位置 
                         <slot></slot>
                     </div>
                     <p>
                         账号: <input>
                     </p>
                     <p>
                         密码: <input type="password">
                     </p>
                     <button>登录</button>
                 </div>
                `
             })
 </script> 
 
 // 这时你可以这样使用组件       
 <login-component>
          <h2>科技</h2>
 </login-component>      
 // 渲染在浏览器的结果是  
 <div>
         <div>
             <!--分发内容的内容会被承载到这个slot标签位置 -->
            <h2>科技</h2>
         </div>
         <p>
             账号: <input>
         </p>
         <p>
             密码: <input type="password">
         </p>
         <button>登录</button>
 </div>      
     

注意:

1. 如果 <login-component> 的 template 中没有包含一个 <slot> 元素，则该组件对称标签内部的任何内容都会被抛弃。

2. <slot> 元素内部可以设置后备内容,如果当前组件对称标签内部没有插入任何内容的话,组件最终会渲染后备内容

  Vue.component('login-component',{
     
                 template: `
                 <div>
                     <div>
                         <slot>后备内容</slot>
                     </div>
                     <p>
                         账号: <input>
                     </p>
                     <p>
                         密码: <input type="password">
                     </p>
                     <button>登录</button>
                 </div>
                 `
             })

具名插槽

概念: 有时我们组件需要多个插槽。可以将不同的组件插入到不同插槽内部，实现方法是使用具名插槽，给组件中的<slot> 元素设置一个name属性。在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令将对应的内容插入到指定的<slot> 元素上

语法:

<script>
     Vue.component('login-component',{
     
         template: `
                 <div>
                     <div>
                         <slot>后备内容</slot>
                     </div>
                     <p>
                         账号: <slot name="user"></slot>
                     </p>
                     <p>
                         密码: <slot name="psd"></slot>
                     </p>
         
                     <button>登录</button>
                     <slot></slot>
                 </div>
                 `
     })
 </script>
 
 <login-component>
     <h2>科技</h2>
     
     <template v-slot:user>    
     <!-- 这里所有的内容都会被插入到name="user" 插槽中 -->
         <div>
             123
         </div>
     </template>
     
     
     <input slot="psd" type="password" placeholder="这个元素会被插入到name=psd 插槽中">
     <component-a slot="psd"></component-a> 
     
 </login-component>
 

注意：跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 v-slot: 替换为字符 #。
例: v-slot:header 可以被缩写为 #header

  <login-component>
                 <h2>科技</h2>
     
                 <template #user>    
                     这里所有的内容都会被插入到name="user" 插槽中
                     <div>
                         123
                     </div>
                 </template>
     
     
                 <template #psd>    
                    <input type="password" placeholder="这个元素会被插入到name=psd 插槽中">
                 </template>
     </login-component>

注意：插槽在项目开发中不太常用，常用于一些UI库的开发。如果想对插槽有更深的了解可以查阅官方文档