vue的生命周期及其钩子

一、vue3中的钩子。

1. onupdated,在响应式数据更新，进而dom树更新后调用。

2. onBeforeupdated,在响应式数据更新，进而dom树更新前调用。

3. onUnmounted，组件卸载时调用。

• 调用时机：路由进行切换时会触发。
• 可以做的事情：可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。
• 保持组件的活性，不被卸载，只是被缓存起来，防止数据被清理。keeplive要结合使用，动态路由组件。

    <div class="row">
    <div class="col-xs-offset-2 col-xs-8">
      <div class="page-header"><h2>Vue Router Demo</h2></div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2 col-xs-offset-2">
      <div class="list-group">
        <router-link to="/home" class="list-group-item">Go to Home</router-link>
        <router-link to="/about" class="list-group-item">Go to About</router-link>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="panel">
        <div class="panel-body">
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component"></component>
            </keep-alive>
          </router-view>
        </div>
      </div>
    </div>
  </div>

• 进而引出两个钩子函数，

  onActivated() 如果该组件是活性组件，则在该组件被插入dom后调用。

  onDeactivate() 移除时，调用。

4. onBeforeMount()当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。

• 调用时机：自动或自动。
• 可以做的事：

5. onBeforeUnmount()注册一个钩子，在组件实例被卸载之前调用，当这个钩子被调用时，组件实例依然还保有全部的功能。

6. onMounted() 在组件挂载完成后执行。