Vue详细入门（语法【二】）

上官花雨2024-10-17 12:56

今天的学习目标！！！

  • el挂载点
  • data数据对象
  • [Vue 实例生命周期](#Vue 实例生命周期)
    • [1. beforeCreate](#1. beforeCreate)
    • [2. created](#2. created)
    • [3. beforeMount](#3. beforeMount)
    • [4. mounted](#4. mounted)
    • [5. beforeUpdate](#5. beforeUpdate)
    • [6. updated](#6. updated)
    • [7. beforeDestroy](#7. beforeDestroy)
    • [8. destroyed](#8. destroyed)

在前面Vue详细入门（语法【一】）当中我们学习了什么是Vue，Vue是怎么使用的嘞，Vue有哪些指令，它的核心语法有哪些？今天我们学习 <script>中的el挂载点、data数据对象、Vue 实例生命周期吧 (^-^)

el挂载点

那什么是el挂载点嘞？el怎么写嘞？

在Vue中，el挂载点是指Vue实例所管理的DOM元素。Vue会管理el选项命中的元素及其内部的后代元素。以下是关于el挂载点的详细解释和代码示例：

一、el挂载点的概念

  1. 定义： el是element的缩写，代表Vue实例的挂载点。它指定了一个在页面上已经存在的DOM元素，Vue实例会管理这个元素及其内部的后代元素。
  2. 作用： Vue实例通过el挂载点，将数据和模板渲染到指定的DOM元素中，从而实现数据的动态绑定和页面的动态更新。

二、el挂载点的代码示例

  1. 使用ID选择器：
html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>el挂载点示例</title>  
</head>  
<body>  
    <div id="app">{{ message }}</div>  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script>  
        var vue = new Vue({  
            el: "#app",  
            data: {  
                message: "Hello Vue!"  
            }  
        });  
    </script>  
</body>  
</html>

在这个示例中，Vue实例通过el选项挂载到ID为app的div元素上，并将message数据渲染到这个元素中。

  1. 使用其他选择器：
    虽然可以使用其他选择器（如类选择器、标签选择器等），但通常建议使用ID选择器，因为ID在页面中是唯一的，可以避免选择到多个元素导致的意外行为。不过，为了演示目的，这里给出一个使用类选择器的示例：
html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>el挂载点示例</title>  
</head>  
<body>  
    <div class="app">{{ message }}</div>  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script>  
        var vue = new Vue({  
            el: ".app",  
            data: {  
                message: "Hello Vue with Class Selector!"  
            }  
        });  
    </script>  
</body>  
</html>

在这个示例中，Vue实例通过el选项挂载到类名为app的div元素上，并将message数据渲染到这个元素中。

但请注意，如果页面中有多个类名为app的元素，Vue只会挂载到第一个匹配的元素上。

  1. 限制：
    不能使用html和body标签作为挂载点，因为Vue需要管理一个具体的DOM元素及其后代元素，而不是整个页面。
    挂载点必须在Vue实例创建之前就已经存在于页面中。

el挂载点是Vue实例与DOM元素之间的桥梁，它允许Vue实例管理特定的DOM元素及其后代元素，并将数据和模板渲染到这些元素中。在使用时，建议优先选择ID选择器作为挂载点，以避免选择到多个元素导致的意外行为。

data数据对象

在Vue.js中，data 数据对象是 Vue 实例的一个核心部分。它是一个普通的 JavaScript 对象，用于存储应用的状态或数据。Vue 实例会将这些数据绑定到模板上，并在数据发生变化时自动更新视图。

以下是一个简单的 Vue 实例，其中包含了 data 数据对象：

html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Vue Data Object Example</title>  
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>  
</head>  
<body>  
    <div id="app">  
        <p>{{ message }}</p>  
        <input v-model="message" placeholder="Edit the message">  
    </div>  
  
    <script>  
        var app = new Vue({  
            el: '#app',  
            data: {  
                message: 'Hello Vue!'  
            }  
        });  
    </script>  
</body>  
</html>

在这个例子中：

  1. 我们创建了一个新的 Vue 实例，并将其挂载到页面上具有 id="app" 的元素上。
  2. 在 Vue 实例的 data 对象中，我们定义了一个名为 message 的属性，并为其赋值为 'Hello Vue!'。
  3. 在模板中，我们使用双大括号 {{ }} 语法来绑定 message 数据到段落 <p>元素上。
  4. 我们还使用 v-model 指令将输入框的值与 message 数据进行双向绑定，这意味着当用户在输入框中输入文本时，message 数据的值会实时更新，并且视图也会相应地更新。

data 数据对象中的属性可以在 Vue 实例的模板中通过插值表达式 {{ }}、指令（如 v-bind、v-model 等）或计算属性、方法等方式进行访问和使用。

需要注意的是，在 Vue 3 中，创建 Vue 实例的方式略有不同，通常是通过 createApp 函数来创建的，但 data 数据对象的使用方式基本相同。以下是一个 Vue 3 的例子：

html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Vue 3 Data Object Example</title>  
    <script src="https://unpkg.com/vue@next"></script>  
</head>  
<body>  
    <div id="app">  
        <p>{{ message }}</p>  
        <input v-model="message" placeholder="Edit the message">  
    </div>  
  
    <script>  
        const { createApp } = Vue;  
        createApp({  
            data() {  
                return {  
                    message: 'Hello Vue 3!'  
                };  
            }  
        }).mount('#app');  
    </script>  
</body>  
</html>

在这个 Vue 3 的例子中，data 是一个函数，它返回一个对象，这个对象包含了应用的状态或数据。这种方式使得每个 Vue 实例都能维护一份被返回对象的独立的拷贝，这是 Vue 3 中组合式API和响应式系统的一个基础概念。

Vue 实例生命周期

在 Vue.js 中，一个组件或实例的生命周期指的是从创建、更新到销毁的整个过程。Vue 提供了一组钩子函数（生命周期钩子），允许你在组件生命周期的不同阶段执行代码。以下是一些主要的生命周期钩子及其用途：

1. beforeCreate

在Vue.js中，beforeCreate是Vue实例生命周期钩子函数之一。它是实例初始化之后、数据观测 (data observer) 和event/watcher 事件/侦听器配置之前被调用的。

换句话说，在这个阶段，Vue实例已经被创建，但是数据还没有被绑定（即，数据 (data)、计算属性 (computed)、方法 (methods)、监听 (watchers) 等属性都还没有被初始化），并且还没有开始模板编译或挂载。

在beforeCreate钩子中，你无法访问到组件的data、computed、methods等选项，因为此时它们还未被初始化。这个钩子通常用于执行一些初始化的任务，比如设置一些全局的变量或插件。

下面是一个简单的示例，展示了如何在Vue实例中使用beforeCreate钩子：

javascript 复制代码 
new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!'  
  },  
  beforeCreate() {  
    console.log('beforeCreate hook called');  
    console.log('this.message:', this.message); // undefined，因为data还未被初始化  
  },  
  created() {  
    console.log('created hook called');  
    console.log('this.message:', this.message); // 'Hello Vue!'，此时data已经被初始化  
  },  
  template: '<div>{{ message }}</div>'  
});

在这个例子中，当Vue实例被创建时，beforeCreate钩子首先被调用。由于此时data还未被初始化，所以尝试访问this.message会得到undefined。紧接着，created钩子被调用，此时data已经被初始化，因此可以正确地访问到this.message的值。

beforeCreate钩子的使用场景包括但不限于：

  • 插件初始化（尤其是那些不需要访问实例数据的插件）。
  • 注入全局变量或配置。
  • 执行一些在实例创建早期就需要进行的任务。

需要注意：由于beforeCreate钩子中无法访问到组件的data和methods等，因此它通常不是处理数据逻辑的最佳位置。通常，created钩子是一个更好的选择，因为它在数据已经被初始化之后被调用。

2. created

  • 在实例创建完成后被立即调用。
  • 此时实例已完成以下初始化：数据观测、属性和方法的运算、事件/回调的配置、watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

在Vue.js中，created是Vue实例生命周期中的一个重要钩子（hook）。当Vue实例被创建后，并且完成了数据观测（data observer）的设置、属性和方法的运算、事件/回调的配置，以及$watch事件回调的初始化之后，created钩子会被调用。简而言之，在created阶段，Vue实例的data、computed、methods和watch等选项都已经被初始化完毕，但是模板还没有开始渲染，也没有挂载到DOM上。

created钩子通常用于执行一些依赖于实例数据的初始化任务，比如从服务器获取数据、设置初始状态等。在这个阶段，你可以安全地访问实例的data、computed属性和methods方法。

下面是一个简单的Vue实例，展示了created钩子的使用：

javascript 复制代码 
new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!',  
    list: []  
  },  
  created() {  
    console.log('created hook called');  
    console.log('this.message:', this.message); // 'Hello Vue!'，此时data已经被初始化  
  
    // 示例：从服务器获取数据  
    this.fetchData();  
  },  
  methods: {  
    fetchData() {  
      // 这里通常是一个异步请求，比如使用axios或fetch  
      // 为了简化，我们用一个setTimeout来模拟异步请求  
      setTimeout(() => {  
        this.list = [1, 2, 3, 4, 5]; // 假设这是从服务器获取的数据  
        console.log('Data fetched:', this.list);  
      }, 1000);  
    }  
  },  
  template: `  
    <div>  
      <p>{{ message }}</p>  
      <ul>  
        <li v-for="item in list" :key="item">{{ item }}</li>  
      </ul>  
    </div>  
  `  
});

在这个例子中，当Vue实例被创建后，created钩子会被调用。在created钩子中，我们访问了this.message，并调用了一个名为fetchData的方法，该方法模拟了一个从服务器获取数据的异步请求。由于created钩子在模板渲染和DOM挂载之前被调用，因此在这个钩子中执行异步请求是安全的，并且可以避免在模板渲染时因为数据未准备好而导致的错误。

需要注意：虽然created钩子是一个执行异步请求的好地方，但是如果你需要在数据获取后更新DOM，那么你可能需要在mounted钩子中执行这些操作，因为mounted钩子是在模板渲染和DOM挂载完成后被调用的。

3. beforeMount

在Vue.js中，beforeMount是Vue实例生命周期的一个钩子（hook），它在模板编译/渲染成为虚拟DOM之前被调用，但是此时还没有挂载到真实的DOM上。在这个阶段，Vue实例已经完成了对模板的解析，即将开始渲染过程，但尚未将渲染结果插入到DOM中。

beforeMount钩子通常用于在挂载之前执行一些逻辑，比如对即将渲染的模板进行最后的修改，或者记录一些状态信息。不过，由于在这个阶段模板还没有挂载到DOM上，因此你不能在这个钩子中直接操作DOM元素。

下面是一个简单的Vue实例，展示了beforeMount钩子的使用：

javascript 复制代码 
new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!'  
  },  
  beforeMount() {  
    console.log('beforeMount hook called');  
    console.log('Element not mounted yet:', this.$el); // 这是一个空的或未定义的元素，因为还没有挂载  
  },  
  mounted() {  
    console.log('mounted hook called');  
    console.log('Element mounted:', this.$el); // 此时可以访问到真实的DOM元素  
  },  
  template: '<div>{{ message }}</div>'  
});

在这个例子中，当Vue实例被创建并准备挂载时，beforeMount钩子首先被调用。由于此时模板还没有被挂载到DOM上，因此this.$el（Vue实例关联的DOM元素）可能是一个空的或未定义的元素。紧接着，Vue实例会完成模板的渲染和挂载过程，然后调用mounted钩子。在mounted钩子中，你可以安全地访问到真实的DOM元素。

需要注意：由于beforeMount钩子在模板挂载之前被调用，因此在这个钩子中进行的任何对模板的修改都不会影响到最终的渲染结果。如果你需要在模板渲染之前修改模板，你应该在创建Vue实例之前或通过其他方式（如Vue指令、计算属性等）进行修改。

此外，beforeMount钩子通常不是执行异步请求的好地方，因为在这个阶段模板还没有挂载到DOM上，用户还看不到任何内容。通常，异步请求应该在created钩子或mounted钩子中执行，具体取决于你的需求。

4. mounted

  • 在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
  • 如果根实例挂载到了文档内，当 mounted 被调用时，组件已经替换掉挂载点。
  • 此时，组件已经完成了渲染，可以进行 DOM 操作。

在Vue.js中，mounted是Vue实例生命周期的一个钩子（hook），它在模板编译/渲染成为虚拟DOM，并且这个虚拟DOM已经被挂载（mounted）到真实的DOM上之后被调用。简而言之，mounted钩子是在Vue实例被完全初始化并插入到DOM中之后执行的，此时你可以安全地操作DOM元素、执行依赖于DOM的操作，或者触发依赖于DOM的回调函数。

mounted钩子通常用于执行需要在DOM元素可用时才能进行的操作，比如初始化第三方库、获取DOM元素的尺寸或位置、设置滚动监听器等。

下面是一个简单的Vue实例，展示了mounted钩子的使用：

javascript 复制代码 
new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!'  
  },  
  mounted() {  
    console.log('mounted hook called');  
    console.log('Element mounted:', this.$el); // 此时可以访问到真实的DOM元素  
  
    // 示例：操作DOM元素  
    this.$el.querySelector('p').style.color = 'red'; // 将第一个<p>元素的文本颜色设置为红色  
  
    // 示例：初始化第三方库（比如jQuery插件）  
    // $(this.$el).someJQueryPlugin();  
  },  
  template: `  
    <div>  
      <p>{{ message }}</p>  
    </div>  
  `  
});

在这个例子中，当Vue实例被创建、模板被渲染并挂载到DOM上之后，mounted钩子会被调用。在mounted钩子中，我们通过this.$el访问到了Vue实例关联的DOM元素，并修改了第一个

元素的文本颜色为红色。

需要注意：虽然mounted钩子是一个执行依赖于DOM操作的好地方，但是你应该尽量避免在这个钩子中进行过多的计算或异步请求，因为这些操作可能会阻塞页面的渲染。如果你的Vue实例需要在创建时从服务器获取数据，那么通常推荐在created钩子中执行这些异步请求，然后在mounted钩子中处理DOM相关的逻辑。

此外，由于mounted钩子只会在Vue实例被挂载时调用一次，因此如果你需要在组件的生命周期内多次操作DOM，你可能需要使用Vue的watch选项或计算属性来响应数据的变化，并在这些选项或属性的回调函数中执行DOM操作。

5. beforeUpdate

  • 数据更新时调用，发生在虚拟 DOM 打补丁之前。
  • 可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

在 Vue.js 中，beforeUpdate 是 Vue 实例或组件生命周期的一个钩子函数。它在响应式数据更新之前被调用，即当 Vue 准备重新渲染 DOM 以反映数据变化之前，这个钩子会被触发。

beforeUpdate 钩子非常有用，因为它允许你在组件的 DOM 即将被更新但由于数据变化还未实际更新之前执行一些逻辑。在这个阶段，你可以访问现有的 DOM 元素（因为它们尚未被新的虚拟 DOM 替换），并且你可以访问组件的当前状态（包括更新前的数据）。

需要注意：你应该避免在这个阶段进行 DOM 操作，因为 Vue 正在准备更新 DOM，并且你的更改可能会被 Vue 的后续渲染所覆盖。相反，你可以使用这个钩子来：

  • 记录组件的状态或数据，以便在更新后进行比较。
  • 取消或清理在 created 或 mounted 钩子中设置的任何定时器、事件监听器或外部资源，这些资源可能会因为数据更新而不再需要。
  • 执行任何与即将发生的数据更新相关的逻辑，但不直接涉及 DOM 操作。

下面是一个简单的示例，展示了如何在 Vue 组件中使用 beforeUpdate 钩子：

javascript 复制代码 
<template>  
  <div>  
    <p>{{ message }}</p>  
    <button @click="updateMessage">Update Message</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello, Vue!'  
    };  
  },  
  beforeUpdate() {  
    console.log('beforeUpdate hook called');  
    console.log('Current message:', this.message); // 这将显示更新前的消息  
  },  
  methods: {  
    updateMessage() {  
      this.message = 'Message has been updated!';  
    }  
  }  
};  
</script>

在这个示例中，当点击按钮时，updateMessage 方法会被调用，它会更新 message 数据。在数据更新之前，beforeUpdate 钩子会被触发，并且你可以在控制台中看到更新前的消息值。然后，Vue 会更新 DOM 以反映新的 message 值。

6. updated

  • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用这个钩子。
  • 当这个钩子被调用时，组件 DOM 已经更新，所以现在你可以执行依赖于 DOM 的操作。

在 Vue.js 中，updated 是 Vue 实例或组件生命周期的一个钩子函数。它在响应式数据更新后、DOM 被重新渲染并替换之后被调用。也就是说，当 Vue 完成了 DOM 的更新，以反映组件的数据变化时，updated 钩子会被触发。

updated 钩子非常有用，因为它允许你在组件的 DOM 已经更新之后执行一些逻辑。在这个阶段，你可以安全地访问和操作更新后的 DOM 元素，因为 Vue 已经完成了对它们的渲染。

需要注意：虽然 updated 钩子提供了在 DOM 更新后执行代码的机会，但你应该尽量避免在这个钩子中进行复杂的 DOM 操作或大量的计算，因为这可能会影响应用的性能。如果可能的话，最好使用 Vue 的响应式系统来更新视图，而不是直接操作 DOM。

下面是一个简单的示例，展示了如何在 Vue 组件中使用 updated 钩子：

javascript 复制代码 
<template>  
  <div>  
    <p ref="messageElement">{{ message }}</p>  
    <button @click="updateMessage">Update Message</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello, Vue!'  
    };  
  },  
  updated() {  
    console.log('updated hook called');  
    console.log('Updated message element text:', this.$refs.messageElement.textContent);  
    // 注意：虽然你可以在这里访问和操作 DOM，但最好避免这样做，除非绝对必要。  
    // 更好的做法是使用 Vue 的响应式数据和方法来更新视图。  
  },  
  methods: {  
    updateMessage() {  
      this.message = 'Message has been updated!';  
    }  
  }  
};  
</script>

在这个示例中，当点击按钮时，updateMessage 方法会被调用，它会更新 message 数据。在数据更新并且 DOM 被重新渲染之后，updated 钩子会被触发。你可以在控制台中看到更新后的消息元素文本内容。然而，请注意，直接访问和操作 DOM（如上面的示例中所示）通常不是最佳实践。更好的做法是使用 Vue 的模板语法和响应式数据来更新视图。如果确实需要访问 DOM 元素，可以使用 Vue 提供的 ref 属性来获取对 DOM 元素的引用，但请尽量保持这种操作简单且高效。

7. beforeDestroy

在Vue.js中，beforeDestroy是Vue实例生命周期的一个钩子（hook），它在Vue实例销毁之前被调用。在这个阶段，实例仍然完全可用，但是Vue已经开始进行一些清理工作了，比如移除事件监听器、子实例和解除所有的观察（watchers、子watcher、事件回调等）。beforeDestroy钩子为你提供了一个机会，在实例被销毁之前执行一些清理工作，比如清除定时器、取消网络请求或清理第三方库创建的任何资源。

需要注意：在这个阶段，虽然实例仍然存在，但是它所关联的任何DOM元素都已经被从真实DOM中移除了（在Vue 2.x中，如果你使用了keep-alive组件，则DOM元素可能仍然保留）。因此，你不应该在这个钩子中尝试操作DOM元素。

下面是一个简单的Vue实例，展示了beforeDestroy钩子的使用：

javascript 复制代码 
new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!'  
  },  
  beforeDestroy() {  
    console.log('beforeDestroy hook called');  
  
    // 示例：清除定时器  
    if (this.timer) {  
      clearInterval(this.timer);  
      this.timer = null;  
    }  
  
    // 示例：取消网络请求（如果使用了axios或fetch等）  
    // if (this.request) {  
    //   this.request.cancel(); // 假设你有一个取消请求的方法  
    // }  
  },  
  mounted() {  
    // 示例：设置一个定时器，每秒更新一次数据（仅用于演示）  
    this.timer = setInterval(() => {  
      // 实际上这里不会更新message，因为Vue实例很快就会被销毁  
      // 但这个定时器会在beforeDestroy钩子中被清除  
      console.log('Timer tick');  
    }, 1000);  
  },  
  template: `  
    <div>  
      <p>{{ message }}</p>  
      <!-- 一个按钮或其他机制来销毁Vue实例（在真实应用中，这通常是通过路由导航或父组件的v-if控制） -->  
      <button @click="destroyInstance">Destroy Instance</button>  
    </div>  
  `,  
  methods: {  
    destroyInstance() {  
      // 注意：在真实应用中，你通常不会手动销毁Vue实例，而是通过Vue Router的导航或其他机制来控制组件的销毁和重建。  
      // 这里我们手动销毁实例仅用于演示beforeDestroy钩子的调用。  
      this.$destroy(); // 这将触发beforeDestroy和destroyed钩子  
      // 通常情况下，你还需要从DOM中移除根元素，但这在这里不是必需的，因为这只是一个演示。  
      // 如果你是在单文件组件（.vue文件）中工作，Vue Router会为你处理这些事情。  
    }  
  }  
});  
  
// 注意：上面的代码示例中包含了一个手动销毁Vue实例的方法（destroyInstance），  
// 这在真实的应用场景中是不常见的。在大多数情况下，Vue实例的销毁是由Vue Router或父组件通过v-if等指令控制的。  
// 因此，上面的代码主要用于演示目的，展示了如何在beforeDestroy钩子中执行清理工作。

在这个例子中，我们创建了一个Vue实例，并在mounted钩子中设置了一个定时器。然后，我们提供了一个destroyInstance方法，用于手动销毁Vue实例。当调用destroyInstance方法时，beforeDestroy钩子会被触发，我们可以在其中清除定时器，以防止内存泄漏。

然而，需要强调的是，在真实的应用中，你通常不会手动销毁Vue实例。相反，你会使用Vue Router进行页面导航，或者通过父组件的v-if指令来控制子组件的显示和隐藏，Vue会自动为你处理组件的销毁和重建工作。在这些情况下，beforeDestroy钩子仍然会被自动调用，你可以在其中执行必要的清理工作。

8. destroyed

在Vue.js中，destroyed是Vue实例生命周期的一个钩子（hook），它在Vue实例被完全销毁之后被调用。当$destroy实例方法被调用，或者父实例被销毁（如果当前实例是子实例的话），或者v-if指令的条件变为false时，Vue实例就会开始销毁过程。在这个过程中，Vue会解除所有的数据绑定、移除所有的事件监听器、销毁所有的子实例，以及调用beforeDestroy钩子。一旦这些清理工作完成，destroyed钩子就会被调用。

destroyed钩子为你提供了一个机会，在Vue实例被完全销毁之后执行一些最终的清理工作。然而，由于在这个阶段Vue实例已经被完全销毁，因此你不能在这个钩子中访问实例的数据、计算属性、方法或监听的事件。此外，与beforeDestroy钩子不同，此时实例关联的DOM元素也已经被从真实DOM中完全移除了。

下面是一个简单的Vue实例，展示了destroyed钩子的使用：

javascript 复制代码 
new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!'  
  },  
  beforeDestroy() {  
    console.log('beforeDestroy hook called');  
    // 在这里执行一些清理工作，比如清除定时器、取消网络请求等  
  },  
  destroyed() {  
    console.log('destroyed hook called');  
    // 在这里执行一些最终的清理工作，但请注意，此时Vue实例已经被完全销毁了  
    // 你不能访问this.message、this.$el等实例属性和方法  
  },  
  mounted() {  
    // 设置一个定时器，用于演示（在实际应用中，你可能会有其他需要清理的资源）  
    this.timer = setInterval(() => {  
      console.log('Timer is still running...');  
    }, 1000);  
  
    // 提供一个方法来手动销毁Vue实例（仅用于演示）  
    this.$el.querySelector('button').addEventListener('click', () => {  
      this.$destroy(); // 触发销毁过程  
      // 在真实应用中，你可能还需要从DOM中移除这个元素，但Vue Router或父组件通常会为你处理这些事情  
    });  
  },  
  template: `  
    <div>  
      <p>{{ message }}</p>  
      <button>Destroy Vue Instance</button> <!-- 用于手动触发销毁的按钮 -->  
    </div>  
  `  
});  
  
// 注意：上面的代码示例中，我们直接在mounted钩子中给按钮添加了一个点击事件监听器，  
// 这在真实的应用场景中可能不是最佳实践。更好的做法是使用Vue的模板语法和事件绑定来处理这种情况。  
// 此外，上面的代码仅用于演示目的，展示了如何在destroyed钩子中执行最终的清理工作。  
// 在真实的应用中，你应该避免手动销毁Vue实例，而是让Vue Router或父组件来控制组件的销毁和重建。

然而，需要强调的是，上面的代码示例并不是Vue.js应用的典型用法。在真实的应用中，你通常不会手动给DOM元素添加事件监听器，也不会手动销毁Vue实例。相反，你会使用Vue的模板语法和指令系统来绑定事件和处理用户交互，同时让Vue Router或父组件来控制组件的生命周期。在这些情况下，Vue会自动为你处理组件的销毁和重建工作，并在适当的时候调用beforeDestroy和destroyed钩子。

如果你确实需要在组件销毁时执行一些清理工作，你应该在beforeDestroy或destroyed钩子中执行这些操作。但是，请记住，在destroyed钩子中，你不能访问Vue实例的任何属性或方法，因为此时实例已经被完全销毁了。因此，大多数清理工作应该在beforeDestroy钩子中完成。

以下是一个完整的 Vue 实例，展示了如何使用这些生命周期钩子：

javascript 复制代码 
new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!'  
  },  
  beforeCreate() {  
    console.log('beforeCreate');  
  },  
  created() {  
    console.log('created');  
    // 可以在这里进行数据的初始化  
  },  
  beforeMount() {  
    console.log('beforeMount');  
  },  
  mounted() {  
    console.log('mounted');  
    // 可以在这里进行 DOM 操作或初始化第三方库  
  },  
  beforeUpdate() {  
    console.log('beforeUpdate');  
  },  
  updated() {  
    console.log('updated');  
    // 可以在这里进行 DOM 操作或更新  
  },  
  beforeDestroy() {  
    console.log('beforeDestroy');  
    // 可以在这里进行清理操作  
  },  
  destroyed() {  
    console.log('destroyed');  
    // 可以在这里进行最终的清理操作  
  }  
});

请注意，生命周期钩子的调用顺序对于调试和确保代码在正确的时机执行是非常重要的。

相关推荐
栈老师不回家13 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙19 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器，日期选择器
前端·javascript·vue.js
一颗松鼠23 分钟前
JavaScript 闭包是什么？简单到看完就理解！
开发语言·前端·javascript·ecmascript
小远yyds43 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果1 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长1 小时前
基于vue框架的的流浪宠物救助系统25128（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~2 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解