前端面试Vue部分补充（详细）

前端小卡拉米

已于 2024-01-13 14:14:54 修改

阅读量1.4k

点赞数 45

分类专栏：前端面试必备文章标签： vue.js 前端 javascript

于 2024-01-13 14:11:50 首次发布

本文链接：https://blog.csdn.net/weixin_52645312/article/details/135569504

版权

1、vue的基本原理

Vue的基本原理是基于MVVM（Model-View-ViewModel）模式的前端框架。它通过数据绑定和响应式系统来实现数据和视图的自动同步更新。

Vue的基本原理可以概括为以下几个步骤：

1). 解析模板：Vue通过解析模板来生成虚拟DOM（Virtual DOM）树。模板可以使用Vue提供的模板语法，将数据和视图进行绑定。

2). 创建实例：Vue通过实例化Vue对象来管理数据和视图。在实例化过程中，Vue会将模板中的数据和方法进行响应式处理，以便在数据发生变化时能够自动更新视图。

3). 数据绑定：Vue使用指令（Directives）来实现数据绑定。指令是一种特殊的HTML属性，用于将数据和视图进行关联。当数据发生变化时，Vue会自动更新视图。

4). 响应式系统：Vue使用响应式系统来追踪数据的变化。当数据发生变化时，Vue会自动更新相关的视图。Vue通过使用Object.defineProperty()方法来实现数据的劫持和监听。

5). 虚拟DOM更新：当数据发生变化时，Vue会生成新的虚拟DOM树，并与旧的虚拟DOM树进行比较。通过比较，Vue可以找出需要更新的部分，并将更新应用到实际的DOM树上，从而实现视图的更新。

6). 渲染视图：最后，Vue会将更新后的虚拟DOM树渲染到实际的DOM树上，完成视图的更新。

总结起来，Vue的基本原理是通过数据绑定和响应式系统来实现数据和视图的自动同步更新。它使用虚拟DOM来提高性能，并通过指令来实现数据和视图的关联。通过这些机制，Vue能够简化开发过程，提高开发效率。
2、MVVM、MVC、 MVP的区别

MVVM、MVC和MVP是三种常见的软件架构模式，它们在应用程序的组织和设计上有一些区别。

1). MVC（Model-View-Controller）模式：
MVC模式将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller）。模型负责处理数据逻辑，视图负责展示数据给用户，控制器负责处理用户输入和更新模型和视图之间的通信。MVC模式的主要特点是模型和视图之间的解耦，使得它们可以独立变化。

2). MVP（Model-View-Presenter）模式：
MVP模式也将应用程序分为三个主要部分：模型（Model）、视图（View）和展示器（Presenter）。模型负责处理数据逻辑，视图负责展示数据给用户，展示器负责处理用户输入和更新模型和视图之间的通信。与MVC模式不同的是，MVP模式中的展示器充当了控制器的角色，负责处理用户输入和更新模型和视图之间的通信。

3). MVVM（Model-View-ViewModel）模式：
MVVM模式也将应用程序分为三个主要部分：模型（Model）、视图（View）和视图模型（ViewModel）。模型负责处理数据逻辑，视图负责展示数据给用户，视图模型负责处理用户输入和更新模型和视图之间的通信。与MVC和MVP模式不同的是，MVVM模式中的视图模型充当了展示器的角色，并且视图和视图模型之间通过数据绑定实现了双向通信。

总结：
MVC、MVP和MVVM是三种常见的软件架构模式，它们在应用程序的组织和设计上有一些区别。MVC模式将应用程序分为模型、视图和控制器，MVP模式将应用程序分为模型、视图和展示器，MVVM模式将应用程序分为模型、视图和视图模型。这些模式都有助于提高代码的可维护性和可测试性，但选择哪种模式取决于具体的应用需求和团队的偏好。
3、computed 和 Methods 的区别slot是什么？有什么作用？原理是什么？

computed和methods是Vue中两种不同的方法，用于定义组件中的计算属性和方法。

computed是一种计算属性，它会根据依赖的数据动态计算出一个新的值，并将其缓存起来。当依赖的数据发生变化时，computed会自动重新计算并更新其值。computed适用于那些依赖其他数据计算得出的值，且该值不会频繁变化的情况。

Methods是一种方法，它用于定义组件中的函数。Methods中的函数可以在模板中直接调用，也可以在其他方法中调用。Methods适用于那些需要在模板中触发的函数，或者需要在多个方法中共享的函数。

slot是Vue中的一种特殊属性，用于在组件中插入内容。通过使用slot，我们可以在组件的模板中定义一些占位符，然后在使用该组件时，将具体的内容插入到占位符中。slot可以用于实现组件的可复用性和灵活性。

slot的原理是通过组件的插槽机制实现的。当使用组件时，可以在组件标签中插入内容，这些内容会被传递给组件内部的slot，然后在组件的模板中使用slot来展示这些内容。

4、过滤器的作用，如何实现一个过滤器

Vue的过滤器是一种用于格式化数据的功能。它可以在模板中对数据进行处理和转换，以便在页面上显示出符合要求的格式。下面是一个实现Vue过滤器的方法：

1）. 在Vue实例中定义过滤器：

Vue.filter('filterName', function(value) {
  // 这里是过滤器的处理逻辑
  return processedValue;
});

其中，'filterName'是过滤器的名称，可以根据实际需求自定义。处理逻辑在函数中实现，接受一个参数value，表示需要处理的数据，然后返回处理后的结果processedValue。

2）. 在模板中使用过滤器：

{
  { data | filterName }}

其中，data是需要进行过滤的数据，filterName是之前定义的过滤器名称。通过管道符(|)将数据传递给过滤器进行处理，然后将处理后的结果显示在模板中。下面是一个示例，演示如何使用Vue过滤器对数据进行格式化：

Vue.filter('currency', function(value) {
  return '$' + value.toFixed(2);
});
var app = new Vue({
  el: '#app',
  data: {
    price: 10.5
  }
});
<div id="app">
  <p>Formatted Price: {
  { price | currency }}</p>
</div>

在上面的示例中，定义了一个名为currency的过滤器，它将传入的值保留两位小数，并在前面添加美元符号。然后，在模板中使用过滤器对price进行格式化显示。

5、如何保存页面的当前的状态

Vue可以通过使用路由的导航守卫和Vuex来保存页面的当前状态。

1). 使用路由的导航守卫：
Vue的路由提供了导航守卫，可以在路由切换时保存和恢复页面的状态。具体步骤如下：

- 在路由配置中定义导航守卫：

const router = new VueRouter({
  routes: [...],
  beforeEach(to, from, next) {
    // 在路由切换前保存页面状态
    // 例如，将当前页面的数据保存到Vuex或本地存储中
    next();
  },
  afterEach(to, from) {
    // 在路由切换后恢复页面状态
    // 例如，从Vuex或本地存储中获取之前保存的数据并恢复页面状态
  }
})

2). 使用Vuex：
Vuex是Vue的状态管理库，可以用于保存和管理页面的状态。具体步骤如下：

//- 安装Vuex并创建一个store实例：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    // 在state中定义需要保存的页面状态
    // 例如，保存当前页面的数据
    currentPageData: {}
  },
  mutations: {
    // 定义mutations来修改state中的数据
    // 例如，更新当前页面的数据
    updateCurrentPageData(state, data) {
      state.currentPageData = data;
    }
  }
});
//在需要保存状态的组件中使用Vuex：
export default {
  computed: {
    currentPageData() {
      return this.$store.state.currentPageData;
    }
  },
  methods: {
    updateCurrentPageData(data) {
      this.$store.commit('updateCurrentPageData', data);
    }
  }
}

以上是两种保存页面当前状态的方法，你可以根据具体需求选择适合的方法。
6、常见的事件修饰符及其作用

以下是Vue中常见的事件修饰符及其作用：

1). `.stop`：阻止事件冒泡。当事件触发时，使用`.stop`修饰符可以阻止事件继续向上冒泡，即停止事件传播到父元素。

2). `.prevent`：阻止默认行为。当事件触发时，使用`.prevent`修饰符可以阻止元素的默认行为，例如阻止表单提交或链接跳转。

3). `.capture`：使用事件捕获模式。当事件触发时，使用`.capture`修饰符可以将事件处理程序绑定到父元素上，而不是默认的冒泡模式。

4). `.self`：只有在事件目标自身触发时才触发事件处理程序。当事件触发时，使用`.self`修饰符可以确保事件处理程序只在事件目标自身触发时才执行，而不是在其子元素触发时执行。

5). `.once`：只触发一次事件处理程序。当事件触发时，使用`.once`修饰符可以确保事件处理程序只执行一次，之后将被移除。

6). `.passive`：提高滚动性能。当绑定滚动事件时，使用`.passive`修饰符可以告诉浏览器该事件处理程序不会调用`preventDefault()`，从而提高滚动的性能。

7). `.keyCode`：监听特定按键。当绑定键盘事件时，使用`.keyCode`修饰符可以指定只有特定按键触发时才执行事件处理程序。

8). `.native`：监听组件根元素的原生事件。当在组件上使用自定义事件时，使用`.native`修饰符可以监听组件根元素的原生事件。
7、v-if、v-show、v-html 的原理

v-if、v-show和v-html是Vue.js中常用的指令，用于控制元素的显示和渲染。它们的原理和区别如下：

1). v-if指令：
- 原理：v-if指令根据表达式的值来决定是否渲染元素。当表达式为真时，元素会被渲染到DOM中；当表达式为假时，元素会被从DOM中移除。
- 区别：v-if指令在条件为假时会完全销毁和重建元素，因此在切换时有较高的切换开销。

2). v-show指令：
- 原理：v-show指令也是根据表达式的值来决定元素的显示与隐藏。当表达式为真时，元素会显示；当表达式为假时，元素会隐藏，但并不会从DOM中移除。 - 区别：v-show指令在切换时只是通过修改元素的display属性来实现显示与隐藏，因此切换开销较小。

3). v-html指令：
- 原理：v-html指令用于将数据作为HTML插入到元素中。它会将数据解析为HTML，并将其渲染到元素的内部。
- 区别：v-html指令会将数据作为HTML进行解析和渲染，因此需要谨慎使用，以防止XSS攻击。

下面是一个简单的示例，演示了v-if、v-show和v-html的使用：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div v-if="show">This is v-if</div>
    <div v-show="show">This is v-show</div>
    <div v-html="htmlContent"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
      htmlContent: '<span style="color: red;">This is v-html</span>'
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  }
};
</script>

8、v-model 可以被用在自定义组件上吗？如果可以，如何使用？

可以使用v-model在自定义组件上进行双向数据绑定。要在自定义组件上使用v-model，需要在组件内部定义一个名为value的prop，并在组件内部使用$emit('input', newValue)来更新value的值。

以下是一个示例，展示了如何在自定义组件上使用v-model：

<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: ['value']
}
</script>

在上面的示例中，我们定义了一个名为value的prop，并在input元素上使用:value绑定了value的值。当input元素的值发生变化时，我们使用$emit('input', $event.target.value)来触发一个名为input的自定义事件ÿ