VUE3.0,DAY32，生命周期销毁流程_vue3 destory-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48681463/article/details/120121176

VUE3.0,DAY32

- - 销毁流程

销毁流程

销毁流程如下所示，就是当vm.$destroy被调用的时候，就启动销毁流程（即页面数据也不更新了，也不用vue管理了等等）。destroy具有销毁的意思。
在这里插入图片描述
我们自定义了一个销毁按钮，当点击的时候就启动销毁流程，如下图所示，先点击自加按钮，n的值变为2，然后点击销毁按钮，看到控制台console打印输出，已销毁已启动，然后此时在点击自加按钮，发现页面没反应了。这就是说vm已经被销毁了。然后vm被kill前，其工作成果还保留在了页面上（实现页面的n值为2）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期销毁流程</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1> 当前的n值是:{
  { n }}</h1>
        <button @click