当前位置： 首页 > news >正文

Vue基础知识21-30

news 来源：原创 2025/6/18 22:28:20

21. Vue 生命周期钩子函数有哪些，它们的执行顺序和作用是什么？

答：Vue 实例从创建到销毁的整个过程称为生命周期，期间有多个钩子函数可供开发者在特定阶段执行自定义逻辑。主要的生命周期钩子函数及其执行顺序和作用如下：

vue

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

<head>
  <meta charset="UTF-8">
  <title>Vue Lifecycle Hooks</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      },
      beforeCreate() {
        console.log('beforeCreate: 实例初始化之后，数据观测和 event/watcher 事件配置之前被调用');
      },
      created() {
        console.log('created: 实例已经创建完成之后被调用，在这一步，实例已经完成了数据观测、property 和 method 的计算、watch/event 事件回调的配置等。然而，挂载阶段还没有开始，$el property 目前不可用');
      },
      beforeMount() {
        console.log('beforeMount: 在挂载开始之前被调用，相关的 render 函数首次被调用');
      },
      mounted() {
        console.log('mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内');
      },
      beforeUpdate() {
        console.log('beforeUpdate: 数据更新时调用，发生在虚拟 DOM 打补丁之前');
      },
      updated() {
        console.log('updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子');
      },
      beforeDestroy() {
        console.log('beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用');
      },
      destroyed() {
        console.log('destroyed: 实例已经完全销毁，所有的事件监听器和子实例也已经被销毁');
      }
    });
  </script>
</body>

</html>

使用效果：打开页面后，在浏览器的控制台会依次输出各个生命周期钩子函数中的日志信息，展示了 Vue 实例从创建到销毁的完整过程。
解析：这些生命周期钩子函数按照特定的顺序依次执行，开发者可以根据需求在不同的钩子函数中编写代码，例如在 created 钩子中进行数据的初始化请求，在 mounted 钩子中操作 DOM 等。

22. 如何在 Vue 中进行路由导航，以 Vue Router 为例说明？

答：Vue Router 是 Vue.js 官方的路由管理器，用于实现单页面应用（SPA）的路由功能。以下是一个简单的示例：

html

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

<head>
  <meta charset="UTF-8">
  <title>Vue Router Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
  <script>
    // 定义路由组件
    const Home = { template: '<div>Home Page</div>' };
    const About = { template: '<div>About Page</div>' };

    // 定义路由
    const routes = [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ];

    // 创建路由实例
    const router = new VueRouter({
      routes
    });

    // 创建并挂载根实例
    new Vue({
      router
    }).$mount('#app');
  </script>
</body>

</html>

使用效果：页面上会显示两个链接 “Home” 和 “About”，点击 “Home” 链接会显示 “Home Page”，点击 “About” 链接会显示 “About Page”。
解析：首先定义了两个路由组件 Home 和 About，然后配置了路由规则 routes，将路径和对应的组件进行映射。接着创建了 VueRouter 实例，并将其传递给 Vue 实例。在模板中使用 <router-link> 进行导航，<router-view> 用于显示当前路由对应的组件。

23. Vuex 是什么，如何使用它来管理应用状态？

答：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。以下是一个简单的使用示例：

html

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

<head>
  <meta charset="UTF-8">
  <title>Vuex Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.js"></script>
</head>

<body>
  <div id="app">
    <p>{{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">Increment</button>
  </div>
  <script>
    // 创建一个 store 实例
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment(state) {
          state.count++;
        }
      }
    });

    // 创建并挂载根实例
    new Vue({
      store
    }).$mount('#app');
  </script>
</body>

</html>

使用效果：页面上会显示一个数字 “0” 和一个按钮 “Increment”，点击按钮，数字会递增。
解析：首先创建了一个 Vuex.Store 实例，其中 state 用于存储应用的状态，这里是 count。mutations 用于定义修改状态的方法，这里的 increment 方法将 count 的值加 1。在 Vue 实例中通过 store 选项引入该 store，在模板中可以通过 $store.state 访问状态，通过 $store.commit 触发 mutations 中的方法来修改状态。

24. 如何在 Vue 中进行表单输入绑定？

答：Vue 提供了 v-model 指令用于实现表单输入元素和数据之间的双向绑定。

vue

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

<head>
  <meta charset="UTF-8">
  <title>Form Input Binding</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <input v-model="message" placeholder="Type something">
    <p>You typed: {{ message }}</p>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: ''
      }
    });
  </script>
</body>

</html>

使用效果：在输入框中输入内容时，下方的段落会实时显示输入的内容。
解析：v-model 指令会根据输入元素的类型自动选取正确的方法来更新数据。在这个例子中，输入框的输入值会同步到 message 数据中，同时 message 数据的变化也会反映到输入框中。

25. Vue 中的过渡和动画是如何实现的？

答：Vue 提供了过渡和动画的功能，通过 <transition> 和 <transition-group> 组件结合 CSS 类名或 JavaScript 钩子来实现。以下是一个简单的 CSS 过渡示例：

vue

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

<head>
  <meta charset="UTF-8">
  <title>Vue Transitions</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <style>
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.5s;
    }

    .fade-enter,
    .fade-leave-to {
      opacity: 0;
    }
  </style>
</head>

<body>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello, Vue!</p>
    </transition>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        show: true
      }
    });
  </script>
</body>

</html>

使用效果：点击 “Toggle” 按钮，“Hello, Vue!” 段落会以淡入淡出的动画效果显示或隐藏。
解析：使用 <transition> 组件包裹需要添加过渡效果的元素，通过 name 属性指定过渡的名称，这里是 fade。然后定义相应的 CSS 类名，如 fade-enter-active、fade-leave-active 等，来控制过渡的动画效果。

26. 如何在 Vue 中进行事件修饰符的使用？

答：Vue 提供了事件修饰符来简化事件处理逻辑，例如阻止事件冒泡、阻止默认行为等。

vue

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

<head>
  <meta charset="UTF-8">
  <title>Event Modifiers</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <a href="https://www.example.com" @click.prevent="handleClick">Click me</a>
  </div>
  <script>
    new Vue({
      el: '#app',
      methods: {
        handleClick() {
          console.log('Link clicked');
        }
      }
    });
  </script>
</body>

</html>

使用效果：点击链接时，不会跳转到 https://www.example.com，而是在控制台输出 “Link clicked”。
解析：@click.prevent 是一个事件修饰符，prevent 表示阻止事件的默认行为，这里阻止了链接的跳转，同时触发 handleClick 方法。

27. Vue 中如何进行组件的懒加载？

答：组件懒加载可以提高应用的性能，尤其是在大型应用中。在 Vue 中可以使用动态导入（ES6 语法）来实现组件的懒加载。

vue

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
// 懒加载组件
const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

export default {
  // 假设这里是 Vue Router 的配置部分
  // router: new VueRouter({ routes })
};
</script>

使用效果：当用户访问 / 或 /about 路由时，对应的组件才会被加载，而不是在应用启动时就加载所有组件，减少了初始加载时间。
解析：使用 () => import('./components/Home.vue') 这样的动态导入语法，Vue Router 会在需要渲染该组件时才去加载对应的文件，实现了组件的懒加载。

28. 怎样在 Vue 中进行异步组件的使用？

答：异步组件可以在需要时再加载，提高应用的性能。以下是一个简单的异步组件示例：

vue

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

<head>
  <meta charset="UTF-8">
  <title>Async Components</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <async-component></async-component>
  </div>
  <script>
    const AsyncComponent = () => ({
      // 需要加载的组件 (应该是一个 `Promise` 对象)
      component: import('./AsyncComponent.vue'),
      // 异步组件加载时使用的组件
      loading: { template: '<div>Loading...</div>' },
      // 加载失败时使用的组件
      error: { template: '<div>Error loading component</div>' },
      // 展示加载时组件的延时时间。默认值是 200 (毫秒)
      delay: 200,
      // 如果提供了超时时间且组件加载也超时了，
      // 则使用加载失败时使用的组件。默认值是：`Infinity`
      timeout: 3000
    });

    Vue.component('async-component', AsyncComponent);

    new Vue({
      el: '#app'
    });
  </script>
</body>

</html>

使用效果：页面加载时会显示 “Loading...”，当异步组件加载完成后，显示异步组件的内容；如果加载超时或失败，会显示相应的错误信息。
解析：通过返回一个包含 component、loading、error 等属性的对象来定义异步组件。component 属性是一个动态导入的 Promise 对象，loading 和 error 属性分别指定加载中显示的组件和加载失败显示的组件，delay 和 timeout 用于控制加载显示和超时时间。

29. Vue 中如何处理计算属性的 setter 和 getter？

答：计算属性默认只有 getter，但也可以定义 setter，当一个计算属性被赋值时，会调用 setter 方法。

vue

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

<head>
  <meta charset="UTF-8">
  <title>Computed Setter and Getter</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <input v-model="fullName">
    <p>First Name: {{ firstName }}</p>
    <p>Last Name: {{ lastName }}</p>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        firstName: 'John',
        lastName: 'Doe'
      },
      computed: {
        fullName: {
          // getter
          get() {
            return this.firstName + ' ' + this.lastName;
          },
          // setter
          set(newValue) {
            const names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[names.length - 1];
          }
        }
      }
    });
  </script>
</body>

</html>

使用效果：页面上有一个输入框和两个段落，初始显示 “John Doe” 以及 “First Name: John” 和 “Last Name: Doe”。在输入框中输入新的全名，如 “Jane Smith”，下方的 “First Name” 和 “Last Name” 会相应更新为 “Jane” 和 “Smith”。
解析：fullName 计算属性的 get 方法返回 firstName 和 lastName 拼接后的全名，set 方法根据输入的新全名更新 firstName 和 lastName 的值。

30. 如何在 Vue 中使用插件？

答：Vue 插件是一种扩展 Vue 功能的方式，可以通过 Vue.use() 方法来安装插件。以下是一个简单的自定义插件示例：

vue

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

<head>
  <meta charset="UTF-8">
  <title>Vue Plugin Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <button @click="showMessage">Show Message</button>
  </div>
  <script>
    // 定义一个插件
    const MyPlugin = {
      install(Vue) {
        Vue.prototype.$showMessage = function () {
          alert('This is a message from the plugin!');
        };
      }
    };

    // 使用插件
    Vue.use(MyPlugin);

    new Vue({
      el: '#app',
      methods: {
        showMessage() {
          this.$showMessage();
        }
      }
    });
  </script>
</body>

</html>

使用效果：点击 “Show Message” 按钮，会弹出一个提示框显示 “This is a message from the plugin!”。
解析：定义了一个插件对象 MyPlugin，其中 install 方法是插件的核心，它接收 Vue 构造函数作为参数。在 install 方法中，通过 Vue.prototype 为所有 Vue 实例添加了一个 $showMessage 方法。使用 Vue.use(MyPlugin) 安装插件后，在 Vue 实例中就可以使用 this.$showMessage() 调用该方法。

相关文章：

  • 55.跳跃游戏
  • 《比特城的七重结界：从数据洪流到量子盾牌的终极守护》
  • ZooKeeper集群部署(容器)
  • 如何深入理解C#中的备忘录模式（Memento Pattern）设计模式
  • Git常用问题收集
  • 创作五周年纪：数据之路的星光与远方
  • 深入理解 C++ 内置数组（四十三）
  • ​docker加docker compose实现软件快速安装启动
  • 唯美社区源码AM社区同款源码
  • 【MySQL | 八、 事务管理】
  • STM32F4系列ADC模块：原理、配置与实战应用
  • 【C++11（下）】—— 我与C++的不解之缘（三十二）
  • Python星球日记 - 第6天：列表与元组
  • 【大语言模型推理框架】VLLM
  • 左值与右值，空间与数据
  • Leetcode 3510. Minimum Pair Removal to Sort Array II
  • java基础自用笔记：文件、递归、常见的字符集、IO流
  • (done) 并行计算 CS149 Lecture1 (Why parallelism? Why efficiency?) (并行基本概念、硬件基础)
  • ctfshow VIP题目限免（后10题）
  • 消息队列(kafka 与 rocketMQ)
  • 网站建设 后台/电脑编程培训学校
  • 陕西省建设厅网站安全员报名/石家庄seo关键词
  • 专门做婚庆的网站/郑州网站公司哪家好
  • 平顶山网站建设公司/seo实战培训课程
  • 小米网站制作/可视化网页制作工具
  • 南京那些公司做网站/高明搜索seo