VUE面试题

A阳光码农

已于 2022-10-24 15:22:24 修改

阅读量1k

点赞数 2

文章标签： vue.js javascript 前端 1024程序员节

于 2022-10-22 13:35:54 首次发布

本文链接：https://blog.csdn.net/weixin_52014130/article/details/127422514

版权

本文详细介绍了Vue.js中控制元素显示隐藏的多种方式，包括v-if、v-show及其用法对比，以及v-if-else的条件控制。同时，阐述了MVVM模式的核心概念，解释了Vue的双向数据绑定原理和组件间参数传递机制。此外，还涵盖了Vue的生命周期、路由实现、事件修饰符以及组件数据必须为函数的原因。最后，讨论了Vue在响应路由参数变化、路由传参和不同路由守卫的使用策略。

摘要由CSDN通过智能技术生成

1.使用vue控制元素显示隐藏方式

解：1.V-if，v-if-else控制DOM的删除和添加，不同于v-show对DOM的显示和隐藏

一：v-show
.控制元素显示，通过display:none控制显示
.语法：v-show="变量或者表达式"
.如果变量或者表达式为true,会显示标签，否则隐藏
二：v-if
.v-if控制标签显示
.语法：v-if="变量或者表达式"
.v-if通过控制标签是否删除显示，v-if有性能优势

代码示例：
<template>
  <div>
    <h1 v-show="age >= 18">年满18岁才能看到以下内容</h1>
    <hr>
    <h1 v-if="age >= 18">年满18岁才能看到以下内容</h1>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          age: 1,
        };
      },
      methods: {},
    };
</script>

三：v-if-else
.v-if可以和v-else搭配，用来条件控制显示
.v-if和v-else一定要是相邻元素
.v-if和v-else-if还有v-else可以一起搭配，实现多个条件判断
.v-show不可以和v-else搭配使用

<template>
  <div>
    <h1 v-if="age >= 18">来吃榴莲</h1>
    <h1 v-else>来吃甜甜圈</h1>
    <h1 v-if="age < 18">甜甜圈</h1>
    <h1 v-else-if="age < 60">枸杞泡水</h1>
    <h1 v-else-if="age < 80">脑白金</h1>
    <h1 v-else-if="age < 100">冬虫夏草</h1>
    <h1 v-else>灵丹妙药</h1>
  </div>
</template>

<script>
   export default {
     data() {
       return {
              age: 18,
          } ;
       },
       methods: {},
    };
</script>

2.对于MVVM的理解
MVVM是Model-View-ViewModel的缩写

Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。

View代表UI组件，它负责将数据模型转化成UI展现出来。

ViewModel监听模型数据的改变和控制视图行为，处理用户交互，简单理解就是一个同步View和Model的对象，连接Model和View.

在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。

ViewModel通过双向数据绑定把view和Model层连接起来。而View和Model之间的同步工作完全是自动的，不需要人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM,不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

3.Vue实现双向数据绑定

Vue实现数据双向绑定主要是：采用数据挟持结合发布者-订阅者模式的方式，通过Object.defineProperty()来挟持各个属性的setter,getter,在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通Javascript对象传给Vue实例来作为它的data选项时，Vue将遍历它的属性，用Object.defineProperty将它们转化为getter/setter.但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

Vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer,Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过·Compile来解析编译模板指令（vue中是用来解析{{ }}）,最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化-->视图更新；视图交互变化(input)--》数据model变更双向绑定效果。

4.Vue组件间的参数传递

1.父组件与子组件传值

父组件传给子组件：子组件通过props方法接收数据，子组件传给父组件：$emit方法传递参数

2.非父子组件间的数据传递，兄弟组件传值

eventBus就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。

3.Vue的生命周期

beforeCreate(创建前) 在数据观测和初始化事件还未开始

created(创建后)完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来

beforeMount(载入前)在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted（载入后）在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

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

updated（更新后）在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy（销毁前）在实例销毁之前调用。实例仍然完全可用。

destroyed（销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

1.什么是Vue生命周期？

Vue实例从创建到销毁的过程，就是生命周期。从开始创建，初始化数据，编译模板，挂载Dom--》渲染，更新--》渲染，销毁等一系列过程，称之为Vue的生命周期。

2.Vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程中更容易形成好的逻辑。

3.Vue生命周期总共有几个阶段?
   答：它可以总共分为8个阶段：创建前/后，载入前/后。更新前/后，销毁前/销毁后。

4.第一次页面加载会触发哪几个钩子？
   答：会触发下面这几个beforeCreate,created,beforeMount,mounted.

5.DOM渲染在哪个周期中就已经完成？答：DOM渲染在mounted中就已经完成了。

6.绑定class的数组用法
   .对象方法 v-bind:class="{'orange':isRipe,'green':isNotRipe}"
   .数组方法 v-bind:class="{class1,class2}"
   .行内 v-bind:style="{color:color,fontSize:fontSize+'px'}"
   7.计算属性computed和监听watch的区别
   计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。
   所以区别来源于用法，只是需要动态值，那就用计算属性；需要知道值的改变后执行业务逻辑，才用watch，
   用反或混用虽然可行，但都是不正确的用法。
   1.computed是一个对象时，它有哪些选项？有get和set两个选项
   2.computed和method有什么区别？methods是一个方法，它可以接受参数，而computed不能，computed是可以缓存的,methods不会
   3.computed是否能依赖其他组件的数据?computed可以依赖其他computed,甚至是其他组件的data
   4.watch是一个对象时，它有哪些选项？ handle deep是否深度immeditate是否立即执行。
       总结：当有一些数据需要随着另外一些数据变化时，建议使用computed。当有一个通用的响应数据变化的时候，要执行一些业务逻辑或异步操作的时候建议使用watcher。
   8.Vue的路由实现：hash模式和history模式
       hash模式：在浏览器中符号"#"，#以及#后面的字符称之为hash,用window.location.hash读取；特点：hash虽然在url中，
       但不被包括在http请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash模式下，仅hash符号之前的
       内容会被包含在请求中，如http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误。
       history模式：history采用html5的新特性；且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈
       进行修改，以及popState事件的监听到状态变更。histroy模式下，前端的url必须和实际向后端发起请求的url一致，
       如http://www.xxx.com/items/id。后端如果缺少对/item/id的路由处理，将返回404错误。
    9.事件修饰符？
       .绑定一个原生的click事件：加native.
       .其他事件修饰符： stop prevent self
       .组合键：click.ctrl.exact 只有ctrl被按下的时候才触发
   10.为什么组件中的data必须是一个函数，然后return一个对象，而new Vue实例里，data可以直接是一个对象？
       因为组件是用来复用的，JS里对象是引用关系，这样作用域没有隔离，而new Vue的实例，是不会被复用的。因此不存在引用对象的问题。
11. Vue.js的两个核心是什么？数据驱动和组件化
12. Vue中key值的作用：使用key来给每个节点做一个唯一标识
    key的作用主要是为了高效的更新虚拟DOM. 另外Vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，
    其目的也是为了让vue可以区分它们，否则Vue只会替换其内部属性而不会触发过渡效果。
13.v-for与v-if的优先级？v-for的优先级比v-if高
14.怎么定义vue-router的动路由？怎么获取传过来的值？
   动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：{path:'/details/:id',name:"Details",components:Details }
   访问details目录下的所有文件，如果details/a,details/b等，都会映射到Details组件上。当匹配到/details下的路由时，参数值会被
   设置到this.$route.params下，所以通过这个属性可以获取动态参数 this.$route.params.id
15.vue-router有哪几种路由守卫？
   全局守卫：beforeEach; 后置守卫：afterEach; 全局解析守卫：beforeResolve; 路由独享守卫：beforeEnter

16.$route和$router的区别是什么？
   .$router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法，钩子函数等。
   .$route是路由信息对象或跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,
       fullPath,matched,name等路由信息参数。

17.vue-router响应路由参数的变化

   //监听当前路由发生变化的时候执行
   watch:{
       $route(to,from){console.log(to.path)//对路由变化做出响应}
   }
   .(1)用watch检测 (2)组件内导航钩子函数 beforeRouteUpdate(to,from,next){
       //to do somethings
   }

18.vue-router传参
   .使用Params:只能使用name,不能使用path
   .参数不会显示在路径上
   .浏览器强制刷新参数会被清空

   this.&router.push({
       name:Home,
       params：{
           number:1,
           code:'999'
       }
   })