VUE常问面试题总结

最新推荐文章于 2024-05-17 05:09:22 发布

想要成仙的菜鸟前端

最新推荐文章于 2024-05-17 05:09:22 发布

阅读量1.1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_44441669/article/details/103879109

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

父子组件传值问题？？？

Vue 的实例生命周期

（1） beforeCreate 初始化实例后数据观测和事件配置之前调用

（2） created 实例创建完成后调用

（3） beforeMount 挂载开始前被用

（4） mounted el 被新建 vm.$el 替换并挂在到实例上之后调用

（5） beforeUpdate 数据更新时调用

（6） updated 数据更改导致的 DOM 重新渲染后调用

（7） beforeDestory 实例被销毁前调用

（8） destroyed 实例销毁后调用

Vue 的双向数据绑定的原理

VUE 实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

理解Object.defineProperty()

例子一：
将所有的监听和响应操作交给Object的自定义存取器属性，先看实现的代码

/* 只要给obj.dataBind赋值，就会触发set方法，只要访问ob.dataBind，就会触发get方法 */
var obj = {};
Object.defineProperty(obj, 'dataBind', {
    get: function () {
        return this.newValue;
    },
    set: function (newValue) {
        this.newValue = newValue || "";
        document.getElementById('txt1').value = this.newValue;
        document.getElementById('txt2').value = this.newValue;
    }
})
document.addEventListener('keyup', function (e) {
    obj.dataBind = e.target.value;  /*这步操作是调用obj.dataBind.set(e.target.value)*/
})

例子二：

<input type="number" id="factorial" placeholder="请数输入阶乘数字">
<p></p>

/*
*使用get/set特性实现阶乘功能
*/ 
var obj = {};
Object.defineProperty(obj,"factorial",{
    get:function(){
        return this.result;
    },
    set:function(num){
        this.result = 1;
        for(var i=1;i<=num;i++){
            this.result *= i;
        }
    }
})

document.addEventListener("keydown",function(e){
    var even = e||event;
    if(even.keyCode==13){
        obj.factorial = document.getElementById("factorial").value;
        document.getElementsByTagName("p")[0].innerText = "阶乘的结果是："+obj.factorial;
    }
})

要改变属性的get/set特性，有两种方式：
设置单个属性：Object.defineProperty()
该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
默认情况下，使用Object.defineProperty添加的属性是不可变的。

语法：Object.defineProperty(obj,prop,descriptor)

obj:需要定义属性的对象
prop：需要定义或修改的属性名
descriptor：被定义或修改的属性描述
设置多个属性Object.defineProperties()

语法: Object.defineProperties(obj, props)

get/set
get和set属性称为“存取器属性”，当属性被定义为存取器属性时，js会忽略赋值的属性，直接使用定义的get或set的值。
get是读取属性时调用，一般要返回，set是写入属性时调用，不用返回。
get和set访问器不是对象的属性，而是属性的特性，特性只有在内部才会使用，也就是接口不会暴露。
get和set访问器可以不用定义，不定义也可以读写属性值。只定义get，则属性是只读。只定义set，则属性是只写。

但是 Vue3.0 将用原生 Proxy 替换 Object.defineProperty

为什么Vue3.0要替换 Object.defineProperty？（Proxy 相比于 defineProperty 的优势）

在 Vue 中，Object.defineProperty 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。
Object.defineProperty 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。

为什么避免 v-if 和 v-for 用在一起

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。通过 v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

请问 v-if 和 v-show 有什么区别

v-show 指令是通过修改元素的 display 的 CSS 属性让其显示或者隐藏

v-if 指令是直接销毁和重建 DOM 达到让元素显示和隐藏的效果

vue 中 key 值的作用

需要使用 key 来给每个节点做一个唯一标识，Diff 算法就可以正确的识别此节点，找到正确的位置区插入新的节点所以一句话，key 的作用主要是为了高效的更新虚拟 DOM

vue 中子组件调用父组件的方法

第一种方法是直接在子组件中通过 this.$parent.event 来调用父组件的方法
第二种方法是在子组件里用$emit 向父组件触发一个事件，父组件监听这个事件就行了
第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

vue 中 keep-alive 组件的作用

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

vue 的优点是什么

低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的"View"上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。

可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。

独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

单页面应用的优缺点

优点：
1、用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染。
2、前后端职责业分离（前端负责view，后端负责model），架构清晰
3、减轻服务器的压力

缺点：
1、SEO（搜索引擎优化）难度高
2、初次加载页面更耗时
3、前进、后退、地址栏等，需要程序进行管理，所以会大大提高页面的复杂性和逻辑的难度

解决初次加载页面更耗时问题（解决vue首屏加载速度慢方案）

https://www.jianshu.com/p/df198914331b

打包

npm run build
生成dist文件夹，里面有 static里面就是所有生成的js文件，与static同级还有一个index.html文件
1、js，css的路径不对
方法：找到 config/index.js，将其中的assetsPublicPath值改为’./’

assetsPublicPath:’./’

2、css中引用的图片资源找不到
方法：找到 build/utils.js，增加一行代码即可：

publicPath:"…/…/"

3、config下的index配置
在这里插入图片描述
以上是将文件打包在dist下的guoguo文件下，同时，打包的静态文件路径纸箱为guoguo/static/xxxxxx.css

npm run dev的执行过程

https://blog.csdn.net/Web_J/article/details/100080010

什么是 Virtual DOM？

答案：可以看作是一个使用 javascript 模拟了 DOM 结构的树形结构

vue响应式系统原理

vue响应式的原理，首先对象传入vue实例作为data对象时，首先被vue遍历所有属性，调用Object.defineProperty设置为getter和setter，每个组件都有一个watcher对象，在组件渲染的过程中，把相关的数据都注册成依赖，当数据发生setter变化时，会通知watcehr，从而更新相关联的组件

vue全局运行机制

https://segmentfault.com/a/1190000019473075?utm_source=tag-newest

vue的计算属性

当其依赖的属性的值发生变化的时，计算属性会重新计算。反之则使用缓存中的属性值。计算属性和vue中的其它数据一样，都是响应式的，只不过它必须依赖某一个数据实现，并且只有它依赖的数据的值改变了，它才会更新。

`$route`和`$router`的区别

答案：$route 是路由信息对象，包括path，params，hash，query，fullPath，matched，name 等路由信息参数。
而 $router 是路由实例对象，包括了路由的跳转方法，钩子函数等

watch的作用是什么

答案：watch 主要作用是监听某个数据值的变化。和计算属性相比除了没有缓存，作用是一样的。

借助 watch 还可以做一些特别的事情，例如监听页面路由，当页面跳转时，我们可以做相应的权限控制，拒绝没有权限的用户访问页面。

计算属性的缓存和方法调用的区别

计算属性是基于数据的依赖缓存，数据发生变化，缓存才会发生变化，如果数据没有发生变化，调用计算属性直接调用的是存储的缓存值；

而方法每次调用都会重新计算；所以可以根据实际需要选择使用，如果需要计算大量数据，性能开销比较大，可以选用计算属性，如果不能使用缓存可以使用方法；

其实这两个区别还应加一个watch，watch是用来监测数据的变化，和计算属性相比，是watch没有缓存，但是一般想要在数据变化时响应时，或者执行异步操作时，可以选择watch
51. 如何编译 template 模板？

diff 算法
批量异步更新策略及 nextTick 原理？
Vue 中如何实现 proxy 代理？
vue 中如何实现 tab 切换功能？
和小程序中一样，全局定义一个变量，通过给每个tab按钮定义事件，传递参数true/false。根据传递过来的参数决定控制显示与否的变量。使用v-if来控制显示与否。
vue 中如何利用 keep-alive 标签实现某个组件缓存功能？
https://blog.csdn.net/qq_15695087/article/details/86582757
vue 中实现切换页面时为左滑出效果
vue 中央事件总线的使用
vue 的渲染机制
把模板编译为render函数
实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom
对比虚拟dom，渲染到真实dom
组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom, 返回到步骤3
vue 在什么情况下在数据发生改变的时候不会触发视图更新

61.vue 的优点是什么？

62.vue 如何实现按需加载配合 webpack 设置（路由懒加载）
https://www.dazhuanlan.com/2019/12/11/5df0780bad897/

63.如何让 CSS 只在当前组件中起作用

64.指令 v-el 的作用是什么?
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例
65.vue-loader 是什么？使用它的用途有哪些？

66.vue和angular的优缺点以及适用场合?

67.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？
http://www.imooc.com/article/252188
68.vue遇到的坑，如何解决的？

69.vuex 工作原理详解
https://www.jianshu.com/p/d95a7b8afa06
70.vuex 是什么？怎么使用？哪种功能场景使用它？
只用来读取的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中。
在main.js引入store，注入。新建了一个目录store，…… export 。
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
类似vue的计算属性，主要用来过滤一些数据。
action
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

71.vuex 有哪几种属性？

72.不用 Vuex 会带来什么问题？

vue router

73.vue-router 如何响应路由参数的变化？

74.完整的 vue-router 导航解析流程
https://zhuanlan.zhihu.com/p/99199175
75.vue-router 有哪几种导航钩子（导航守卫）？
https://blog.csdn.net/weixin_43900414/article/details/95441512
76.vue-router 的几种实例方法以及参数传递

77.怎么定义 vue-router 的动态路由？怎么获取传过来的动态参数？

78.vue-router 如何定义嵌套路由？

79.组件及其属性

80.vue-router 实现路由懒加载（动态加载路由）

81.vue-router 路由的两种模式

82.history 路由模式与后台的配合

83.vue路由实现原理?或 vue-router原理?
https://segmentfault.com/a/1190000014822765
84.什么是 MVVM？
在这里插入图片描述
85.MVC、MVP 与 MVVM 模式
https://www.jianshu.com/p/ff6de219f988
86.常见的实现 MVVM 几种方式

87.解释下 Object.defineProperty()方法

88.实现一个自己的 MVVM（原理剖析）

89.递归组件的使用

90.Obj.keys()与 Obj.defineProperty

91.发布-订阅模式

92.实现 MVVM 的思路分析

93.mvvm 和 mvc 区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？
vue-cli 工程常用的 npm 命令有哪些？
请说出 vue-cli 工程中每个文件夹和文件的用处
config 文件夹下 index.js 的对于工程开发环境和生产环境的配置
请你详细介绍一些 package.json 里面的配置
https://www.jianshu.com/p/cd2438b265a9
vue-cli 中常用到的加载器

100.vue.cli 中怎样使用自定义的组件？有遇到过哪些问题吗？

vue-cli 提供的几种脚手架模板
vue-cli 开发环境使用全局常量
vue-cli 生产环境使用全局常量
vue-cli 中自定义指令的使用
vue 是如何对数组方法进行变异的？例如 push、pop、splice 等方法
vue 组件之间的通信种类
vue 是如何对数组方法进行变异的？例如 push、pop、splice 等方法
谈一谈 nextTick 的原理
Vue 中的 computed 是如何实现的
vue 如何优化首页的加载速度？vue 首页白屏是什么问题引起的？如何解决呢？

111.Vue 的父组件和子组件生命周期钩子执行顺序是什么

112.在 Vue 中，子组件为何不可以修改父组件传递的 Prop，如果修改了，Vue 是如何监控到属性的修改并给出警告的。

113.实现通信方式

114.说说Vue的MVVM实现原理

vue路由

页面导航的两种方式

声明式导航：

通过点击链接实现导航的方式，叫做声明式导航

 例如：普通网页中的 <a></a> 链接 或 vue 中的 <router-link></router-link>

编程式导航

编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航例如：普通网页中的 location.href

this.$router.push(‘hash地址’)
this.$router.go(n)实现前进和后退

基本用法

const User = {
      template: '<div><button @click="goRegister">跳转到注册页面</button></div>',
      methods: {
        goRegister: function(){
          // 用编程的方式控制路由跳转
          this.$router.push('/register');
        }
      }
    }

编程式导航参数规则

- router.push()方法的参数规则

    // 字符串(路径名称)
      router.push('/home')
      // 对象
      router.push({ path: '/home' })
      // 命名的路由(传递参数)
      router.push({ name: 'user', params: { userId: 123 }})
      // 带查询参数，变成 /register?uname=lisi
      router.push({ path: '/register', query: { uname: 'lisi' }})

在这里插入图片描述

想要成仙的菜鸟前端

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
VUE常问面试题总结

Vue 的实例生命周期（1） beforeCreate 初始化实例后数据观测和事件配置之前调用（2） created 实例创建完成后调用（3） beforeMount 挂载开始前被用（4） mounted el 被新建 vm.$el 替换并挂在到实例上之后调用（5） beforeUpdate 数据更新时调用（6） updated 数据更改导致的 DOM 重新渲染后调用（7） b...
复制链接

扫一扫