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

vue3基础九问，你会几问

article 2024/9/24 11:11:23

1. Vue是什么？

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的核心库只关注视图层，采用自下而上的增量开发设计，这使得你可以将 Vue 轻松地整合到现有的项目中，或者与其他前端库一起使用。Vue 的目标是通过提供反应的数据绑定和可组合的视图组件，使前端开发更加方便、高效。

2. 说出Vue的10个常用指令

v-bind：动态绑定一个或多个属性或一个组件 prop。
```
<img v-bind:src="imageSrc" />
```
v-model：创建双向数据绑定。
```
<input v-model="message" />
```

v-for：基于一个数组渲染一个列表。

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

v-if：基于条件渲染元素。

<p v-if="seen">现在你看到我了</p>

v-else-if： v-if的“else if”块。

<p v-if="type === 'A'">A</p>
<p v-else-if="type === 'B'">B</p>
<p v-else>C</p>

v-else： v-if的“else”块。

<p v-if="type === 'A'">A</p>
<p v-else>B</p>

v-show：基于条件展示或隐藏元素 (通过 CSS display属性进行切换)。
```
<p v-show="isShown">现在你看到我了</p>
```
v-on：监听 DOM 事件（常用于触发数据变更）。
```
<button v-on:click="doSomething">点击我</button>
```
v-pre：跳过这个元素和它的子元素的编译过程，用于临时展示原始 Mustache 标签。
```
<span v-pre>{{ this will not be compiled }}</span>
```
v-cloak：这个指令保持在元素上直到关联实例结束编译。
```
<div v-cloak>
  {{ message }}
</div>
```

3. 说说Vue的生命周期

Vue实例在创建过程中会经历一系列的初始化过程，包括设置数据监听、编译模板、挂载DOM、更新DOM等。Vue提供了几个生命周期钩子函数，允许用户在特定的阶段执行额外的操作：

beforeCreate：实例初始化之后，数据观测 (data observer) 和事件/watcher 都还没有被设置。
created：实例已经创建完成，属性‘data’、‘methods’、‘computed’等已初始化，el还未创建。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate：响应式数据更新时调用，在虚拟DOM重新渲染和打补丁之前。
updated：组件 DOM 已经更新。
beforeDestroy：实例销毁之前调用。这一步，实例仍然完全正常。
destroyed：Vue 实例销毁后调用。这一步，所有的事情都被清理。

4. 组件开发中的父传子和子传父

父传子
父组件通过在子组件上使用自定义属性来传递数据。子组件可以通过 props 来接收这些数据。

<!-- 父组件中 -->
<child-component :message="parentMessage"></child-component>

<!-- 子组件中 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: ['message']
}
</script>

子传父
子组件通过 $emit 触发事件，父组件监听该事件并执行相应操作。

<!-- 子组件中 -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello Parent!');
    }
  }
}
</script>

<!-- 父组件中 -->
<template>
  <child-component @message-sent="receiveMessage"></child-component>
</template>
<script>
export default {
  methods: {
    receiveMessage(message) {
      console.log(message);
    }
  }
}
</script>

5. 组件插槽的作用

插槽（Slot）是 Vue 用来組装和复用组件的一种机制，允许在组件使用时传递内容。插槽可以让父组件在使用子组件时，能够在子组件的特定位置插入自定义内容。

<!-- 子组件 -->
<template>
  <div class="child">
    <slot></slot>
  </div>
</template>

<!-- 父组件中 -->
<child-component>
  <p>这个内容将会被传递到子组件的 slot 位置</p>
</child-component>

另外，Vue还支持命名插槽和作用域插槽。

6. 路由是什么？

路由指的是根据 URL（统一资源定位符）来决定哪些页面或组件应当被显示。Vue Router 是 Vue.js 官方的路由管理器，帮助你轻松管理 Vue 应用中的页面切换和动态 URL。通过定义路由及其对应的组件，Vue Router 使单页应用程序（SPA）具备与多页面网站类似的导航功能，而无需页面刷新。

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

// 创建路由实例，并传递 `routes` 配置
const router = new VueRouter({
  routes
})

// 创建根实例
const app = new Vue({
  router
}).$mount('#app')

7. 状态管理是什么？

状态管理是一种工具和模式，帮助开发者在应用中管理多个组件间的共享状态。Vuex 是 Vue.js 的官方状态管理库，提供了一个集中式存储，并使用规则确保状态的可预测性和统一性。Vuex 通过定义state（存储），getter（获取状态），mutation（同步操作），和action（异步操作）来管理应用状态。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment ({ commit }) {
      commit('increment')
    }
  },
  getters: {
    getCount: state => state.count
  }
})

new Vue({
  store
}).$mount('#app')

8. Axios是什么？

Axios 是一个基于 Promise 的 HTTP 客户端，用于向后台发送请求，支持在浏览器和 Node.js 环境中运行。它具有如下特性：

创建 XMLHttpRequests 请求
创建 Node.js HTTP 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据

简单的请求示例：

import axios from 'axios';

axios.get('https://api.example.com/items')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });