vue3基础九问，你会几问

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);});

9. MVVM模型是什么？

MVVM 是 Model-View-ViewModel 的简写，是一种架构模式，用来简化用户界面的开发：

• Model（模型）：表示应用的数据；
• View（视图）：表示用户界面；
• ViewModel（视图模型）：连接 Model 和 View 的桥梁。它将 Model 中的数据展示到 View，并将 View 中的用户输入传递回 Model。

MVVM 主要优点在于双向数据绑定，使得 View 与 Model 自动同步，极大简化了界面更新的开发工作。Vue 本身就是基于 MVVM 模型设计的框架。