阅读 6598

前端面试指南之Vue面试题总结

1. Vue 框架的优点是什么?

    (1)轻量级框架:只关注视图层,大小只有几十Kb;
    (2)简单易学:文档通顺清晰,语法简单;
    (3)数据双向绑定,数据视图结构分离,仅需操作数据即可完成页面相应的更新;
    (4)组件化开发:工程结构清晰,代码维护方便;
    (5)虚拟 DOM加载 HTML 节点,运行效率高。

2. 什么是 MVVM?

    MVVM 是Model-View-ModelView的缩写,是一种脱胎于 MVC 模式的设计模式
    Model 代表数据层,负责存放业务相关的数据;
    View 代表视图层,负责在页面上展示数据;
    ViewModel 是的作用是同步 View 和 Model 之间的关联,其实现同步关联的核心是DOM ListenersData Bindings两个工具。DOMListeners 工具用于监听 View 中 DOM 的变化,并会选择性的传给 Model;Data Bindings 工具用于监听 Model 数据变化,并将其更新给 View。
image.png

3. Vue 中组件之间传值的方法有哪些?

    父组件向子组件传值

        (1)父组件在子组件标签中绑定自定义属性
        (2)子组件通过 props 属性进行接收。

//父组件 
export default { components:{ Child } }
<Child :name="123" />

//子组件 
export default { props: ["name"]//此处亦可指定数据类型 }
复制代码

    子组件向父组件传值:

        (1)在父组件在子组件标签中绑定自定义事件
        (2)子组件通过this.$emit()方法触发自定义事件,传值给父组件。

//父组件 
export default { components:{ Child }, data:{ name:"123" }, methods:{ changeName(value){
this.name = value } } }
<Child @changeName="changeName" />

//子组件 
export default { methods:{ changeParentName:(value)=>{ this.$emit("changeName","456") } } }
<button @click="changeParentName">改变父组件的name</button>
复制代码

    兄弟组件之间传值:

        (1)共同传给父组件,再由父组件分发(状态提升);
        (2)使用Vuex
        (3)利用bus 事件总线

let bus = new Vue() 
A组件:methods :{ 函数{bus.$emit(‘自定义事件名’,数据)} //发送 
B组件:created(){bus.$on(‘A发送过来的自定义事件名’,函数)} //进行数据接收
复制代码

4. Vue 中常见的生命周期钩子函数有哪些?

    Vue 中常见的生命周期钩子函数总共有八个:

    (1)创建阶段
        BeforeCreate:该函数在 Vue 实例初始化后,组件创建、数据监测(data observer)、watch/event 事件配置前调用。此时不能访问 dataref,Vue 实例对象上仅有生命周期函数及部分默认事件。         Created:该函数在 Vue 组件创建完成后调用。此时数据监测、事件配置已完成,data 对象已可访问,但组件尚未被渲染成 HTML 模板,ref 仍为 undefined$el 尚不可用。

如此阶段要对 DOM 进行操作,就应将操作放在 Vue.nextTick 的回调函数中。因为此阶段 DOM 尚未被渲染,无法执行 DOM 操作。Vue.nextTick 会在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后可以获取更新后的 DOM。

    (2)挂载阶段
        BeforeMount:该函数在组件挂载前调用,此时 HTML 模板编译已完成,虚拟 DOM 已存在,$el 为可用状态,但 ref 仍不可用。

一般在此阶段进行初始数据的获取操作。

        Mounted:该函数在组件挂载完成后调用。此时$el元素已被vm.$el替代,ref可进行操作。

一般在此阶段进行异步请求的发送操作。mounted 不会保证所有的子组件也都一起被挂载。如果希望等到整个视图都渲染完毕,可以在 mounted 内部使用 vm.$nextTick

    (3)更新阶段
        BeforeUpdate:该函数在数据更新、虚拟 DOM 打补丁前调用。

此阶段适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。

        Updated:该函数在数据更新、虚拟 DOM 打补丁完成后调用。

    (4)卸载阶段
        BeforeDestory:该函数在实例销毁前调用,此时实例完全可用,ref 仍然存在。

一般在此阶段进行性能优化操作,如清除定时器,防止内存泄露。

        Destroyed:该函数在实例销毁后调用,此时 Vue 里的所有指令均被解绑,所有事件监听器已被移除,ref 状态为 undefined

组件销毁时,先销毁父组件,再销毁子组件。

    针对 keep-alive 组件还有两个钩子函数:
        activated:在被 keep-alive 缓存的组件激活时调用。
        deactivated:在被 keep-alive 缓存的组件停用时调用。

    还有一个错误处理捕获函数:
        errorCaptured:在捕获到一个来自子孙组件的错误时调用。 微信图片_20201017092359.png

5. 为什么 Vue 组件中 data 必须是一个函数?

    如果 data 是一个对象,当复用组件时,因为 data 都会指向同一个引用类型地址,其中一个组件的 data 一旦发生修改,则其他重用的组件中的 data 也会被一并修改。
    如果 data 是一个返回对象的函数,因为每次重用组件时返回的都是一个新对象,引用地址不同,便不会出现如上问题。

6. Vue 中 v-if 和 v-show 有什么区别?

    v-if 在进行切换时,会直接对标签进行创建或销毁,不显示的标签不会加载在 DOM 树中。v-show 在进行切换时,会对标签的 display 属性进行切换,通过 display 不显示来隐藏元素。
    一般来说,v-if 的性能开销会比 v-show 大,切换频繁的标签更适合使用 v-show。

7. Vue 中 computed 和 watch 有什么区别?

    计算属性 computed
        (1)支持缓存,只有依赖数据发生变化时,才会重新进行计算函数;
        (2)计算属性内不支持异步操作
        (3)计算属性的函数中都有一个 get(默认具有,获取计算属性)和 set(手动添加,设置计算属性)方法;
        (4)计算属性是自动监听依赖值的变化,从而动态返回内容。

    侦听属性 watch
        (1)不支持缓存,只要数据发生变化,就会执行侦听函数;
        (2)侦听属性内支持异步操作
        (3)侦听属性的值可以是一个对象,接收 handler 回调,deep,immediate 三个属性
        (3)监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些其他事情

watch: { 
	obj: { 
    	//handler接收两个参数(newVal:新值,oldVal:旧值 
    	handler: function(newVal, oldVal){ 
    		console.log(newVal); 
		}, 
	deep: true,//设置为true时会监听对象内部值的变化; 
	immediate: true//设置为true时会立即以表达式的当前值触发回调; 
	} 
}
复制代码

使用 immediate 可以优化以下场景:组件创建的时候立即获取一次列表的数据,同时监听<input/>框,每当发生变化的时候重新获取一次筛选后的列表。

//优化前 
created(){ 
	this.fetchPostList() 
	}, 
watch: { 
	searchInputValue(){ this.fetchPostList() } 
	}
//优化后 
watch: { 
	searchInputValue:{ handler: 'fetchPostList', immediate: true } 
	}
复制代码

8. $nextTick 是什么?

    Vue 实现响应式并不是在数据发生后立即更新 DOM,使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用,则可以在回调中获取更新后的 DOM

9. v-for 中 key 的作用是什么?

    key 是 Vue 使用 v-for 渲染列表时的节点标识。使用了 key 之后,当列表项发生变化时,Vue 会基于 key 的变化而重新排列元素顺序,并且移除 key 不存在的元素,提升运行效率

10. Vue 的双向数据绑定原理是什么?

    Vue 采用数据劫持+订阅发布模式实现双向绑定。通过 Object.defineProperty()方法来为组件中 data 的每个属性添加 get 和 set 方法,在数据变动时,触发 set 里相应的监听回调函数,将变动信息发布给订阅者。主要有以下步骤:
    (1)组件初始化时:
        a. 创建一个dep 对象作为观察者(依赖收集、订阅发布的载体);
        b. 通过Object.defineProperty()方法对 data 中的属性及子属性对象的属性,添加 getter 和 setter 方法; 调用 getter 时,便去 dep 里注册函数。调用 setter 时,便去通知执行刚刚注册的函数。
    (2)组件挂载时:
        a. compile解析模板指令,将其中的变量替换成数据。然后初始化渲染页面视图,并将每个指令对应的节点绑定上更新函数、监听函数。后续一旦数据发生变化,便会更新页面。页面发生变化时也会相应发布变动信息;
        b. 组件同时会定义一个watcher 类作为订阅者,watcher 可以视作 dep 和组件之间的桥梁。其在实例化时会向 dep 中添加自己,同时自身又有一个 update 方法,待收到 dep 的变动通知时,便会调用自己的 update 方法,触发 compile 中的相应函数完成更新。

data.png

11. 如何动态更新对象或数组的值?

    因为 Object.defineProperty()的限制,Vue 无法监听到对象或数组内部某个属性值的变化,因此在直接设置以上两类数据的值时,页面不会实时更新。此时可以通过 this.$set 方法来解决:

//this.$set(要改变的数组/对象,要改变的位置/key,要改成的value) this.$set(this.arr, 0, "OBKoro1");
// 改变数组 this.$set(this.obj, "c", "OBKoro1"); // 改变对象
复制代码

数组原生方法造成的数据更新,可以被 Vue 监听到。如 splice()push()pop()等。


12. 常用的事件修饰符有哪些?

    .stop:阻止冒泡;
    .prevent:阻止默认行为;
    .self:仅绑定元素自身可触发;
    .once:只触发一次..

13. Vue 如何获取 DOM 元素?

    首先先为标签元素设置 ref 属性,然后通过 this.$refs.属性值获取。

<div ref="test"></div>

const dom = this.$refs.test
复制代码

14. v-on 如何绑定多个事件?

    可以通过 v-on 传入对象来绑定多个事件:

<!--单事件绑定-->
<input type="text" @click="onClick">
<!--多事件绑定-->
<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur }">
复制代码

15. Vue 初始化页面闪动问题如何解决?

    出现该问题是因为在 Vue 代码尚未被解析之前,尚无法控制页面中 DOM 的显示,所以会看见模板字符串等代码。
    解决方案是,在 css 代码中添加 v-cloak 规则,同时在待编译的标签上添加 v-cloak 属性:

[v-cloak] { display: none; }

<div v-cloak>
  {{ message }}
</div>
复制代码

16. Vue 如何清除浏览器缓存?

        (1)项目打包的时候给每个打包文件加上 hash 值,一般是在文件后面加上时间戳;
        (2)在 html 文件中加入 meta 标签,content 属性设置为no-cache;
        (3) 在后端服务器中进行禁止缓存设置。

17. Vue-router 路由有哪些模式?

    一般有两种模式:
        (1)hash 模式:后面的 hash 值的变化,浏览器既不会向服务器发出请求,浏览器也不会刷新,每次 hash 值的变化会触发 hashchange 事件。
        (2)history 模式:利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

18. Vue-cli 项目中每个文件夹和文件的用处大致是什么?

        (1)bulid 文件夹:存放 webpack 的相关配置以及脚本文件,实际开发中一般用来配置 less、babel 和配置 webpack.base.config.js 文件。
        (2)config 文件夹:常用到此文件夹下的 config.js (index.js) 配置开发环境的端口号,是否开启热加载或者设置生产环境的静态资源相对路径、是否开启 gzip 压缩、npm run build 命令打包生成静态资源的名称和路径等。
        (3)node_modules 文件夹:存放 npm install 命令下载的开发环境和生产环境的各种依赖。
        (4)src 文件夹 :存放组件源码、图片样式资源、入口文件、路由配置等。

19. Vue-cli 项目中 assets 和 static 文件夹有什么区别?

    两者都是用于存放项目中所使用的静态资源文件的文件夹。其区别在于:
    ** assets 中的文件在运行 npm run build 的时候会打包**,简单来说就是会被压缩体积,代码格式化之类的。打包之后也会放到 static 中。static 中的文件则不会被打包

将图片等未处理的文件放在assets中,打包减少体积。而对于第三方引入的一些资源文件如iconfont.css等可以放在static中,因为这些文件已经经过处理了。

20. Vuex 是什么?有哪几种属性?

    Vuex 是专为Vue设计的状态管理工具,采用集中式储存管理 Vue 中所有组件的状态。

        (1)state属性:基本数据
        (2)getters属性:从 state 中派生出的数据
        (3)mutation属性:**更新 store 中数据的唯一途径,**其接收一个以 state 为第一参数的回调函数;

const store = new Vuex.Store({
  state: {
    count: 1,
  },
  mutations: {
    increment(state) {
      // 变更状态
      state.count++;
    },
  },
});
复制代码

        (4)action 属性提交 mutation 以更改 state,其中可以包含异步操作

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment2(context) {
      context.commit('increment');
    },
    fun(context) {
      context.dispatch('increment2');
    },
  },
});
复制代码

        (5)module 属性:用于将 store分割成不同的模块

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
复制代码

前端面试指南系列传送门:

前端面试指南之JS面试题总结

前端面试指南之HTML面试题总结

前端面试指南之CSS面试题总结

文章分类
前端
文章标签