vue面试二十问

最新推荐文章于 2023-05-07 22:30:28 发布
最新推荐文章于 2023-05-07 22:30:28 发布
阅读量230 收藏
点赞数
分类专栏： JavaScript vue 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44033309/article/details/108471939
版权

vue面试二十问

这是我自己在准备面试的时候，上网收集汇总的一些知识点，不能说你会这些就能找到自己心仪的工作，但你要想找到心仪的工作就必须会这些！

一、什么是MVVM？

MVVM是Model-View-ViewModel的缩写。Model 层代表数据模型；View 代表DOM，ViewModel 是一个同步View 和 Model的对象。

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

优点：需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

二、vue的优点是什么？

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

  2. 组件化，实现html的封装和重用

  3. 虚拟DOM，不在使用原生DOM操作

  4. 运行速度快

三、组件之间的传值？

1.父组件向子组件传值：

使用自定义属性绑定（v-bind:)相应的父组件数据 ，把自定义属性在子组件的props属性里定义一下。

<sonCom v-bind:parentmsg="msg"></sonCom>
//子组件props属性
props:['parentmsg']

2.子组件调用父组件方法并传参（变向的子组件向父组件传值）

通过$emit

//父组件方法
methods:{
    show(data){
        console.log(data)
    }
}

//DOM
<sonCom v-on:func = 'show'></sonCom>

//子组件
this.$emit('func',123)//123可以改成子组件data中的数据，完成子组件向父组件传值

3.兄弟组件传值

通过event bus ，大项目vuex

1.创建一个空vue实例，并将它发布到全局中(bus.js文件)

import Vue from 'vue'
const bus = new Vue()
export default bus

2.在子组件一中引用bus.js，用bus.$emit(‘参数name’,value)方法传参

3.在子组件二中引用bus.js，用bus.$on(‘参数名字’,callback(value))方式接受参数并处理

四、为什么组件中的data必须是function？

组件中的data写成一个函数，数据以函数返回值的形式定义，保证每个组件实例都有自己的私有数据空间，不会造成污染。要不然所有组件实例共用一个data，改一个其他全改

五、v-show、v-if 区别，使用场景

v-show:本质控制css的display:none，只编译一次。切换开销小，初始开销大

适用场景：频繁切换某节点

v-if:本质动态向DOM树添加或者删除DOM元素，不停销毁和创建比较消耗性能。初始渲染开销小，切换开销大

适用场景：不需要频繁切换节点

六、获取DOM

ref=“domName”,this.$refs.domName

七、为什么要使用key?

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟DOM

八、双向数据绑定

（大致）

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

核心：Object.defineProperty()(详看红宝书)

手写一个简单的双向数据绑定

  let input = document.getElementById("input");
  let text = document.getElementById("text");
  let data = { value: "" };
  Object.defineProperty(data, "value", {
    set: function (val) {
      text.innerHTML = val;
      input.value = val;
    },
    get: function () {
      return input.value;
    }
  });
  input.onkeyup = function (e) {
    data.value = e.target.value;
  };

九、computed和watch的区别

computed:

  1. 支持缓存，只有依赖数据发生改变，才会重新进行计算.

  2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化.

适用场景：一个属性受多个属性影响（购物车商品结算）

watch:

  1. 不支持缓存，数据变，直接会触发相应的操作；

  2. watch支持异步；

  3. 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

适用场景：当需要在数据变化时执行异步或开销较大的操作时（搜索数据）

十、常用事件修饰符

  • .stop()：等同于JavaScript中的event.stopPropagation()，防止事件冒泡。
  • .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为。
  • .capture：与事件冒泡的方向相反，事件捕获由外到内。
  • .self：只会触发自己范围内的事件，不包含子元素
  • .once：只会触发一次

十一、vue-router中的导航钩子

  • 全局 钩子

    const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
    // do someting
});
//to: Route，代表要进入的目标，它是一个路由对象

//from: Route，代表当前正要离开的路由，同样也是一个路由对象

//: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数

  • 路由独享钩子

cont router = new VueRouter({
    routes: [
        {
            path: '/file',
            component: File,
            beforeEnter: (to, from ,next) => {
                // do someting
            }
        }
    ]
});
  • 组件内的导航钩子
const File = {
    template: `<div>This is file</div>`,
    beforeRouteEnter(to, from, next) {
        // do someting
        // 在渲染该组件的对应路由被 confirm 前调用
    },
    beforeRouteUpdate(to, from, next) {
        // do someting
        // 在当前路由改变，但是依然渲染该组件是调用
    },
    beforeRouteLeave(to, from ,next) {
        // do someting
        // 导航离开该组件的对应路由时被调用
    }
}

十二、vue的两个核心

  1. 数据驱动

​ viewModel，保证数据和视图的一致性

  1. 组件系统

    组件化开发，优点很多，可以很好的降低数据之间的耦合度。将常用的代码封装成组件之后，就能高度的复用，提高代码的可重用性。一个页面/模块可以由多个组件所组成。

十三、Vue生命周期

在这里插入图片描述

   /*创建阶段*/

      //1.第一个生命周期函数
      beforeCreate() {//表示实例完全被创建出来之前，会执行它
        // console.log(this.msg);
        // this.show();

        /*
          在beforeCreate生命周期执行的时候，data和methods中的数据还没有初始化
        */

      },
      //2.第二个生命周期函数
      created() {
        console.log(this.msg + '--->created');
        this.show();
        //在created中，data，和methods 已经被初始化了
      },
      //3.第三个生命周期函数
      beforeMount() {
        //表示 模板已经在内存中编译完成了，但是尚未把模板渲染到页面中
        console.log(document.getElementById("me").innerHTML + '--->beforeMount')
        //在beforeMount 执行的时候，页面中元素还没有被真正替换过来，只是之前写的一些模板字符串
      },
      //4.第四个生命周期函数
      mounted() {
        //表示 模板已经在内存中编译完成了，但是已经把模板渲染到页面中
        console.log(document.getElementById("me").innerHTML + '--->mounted')
        //mounted 执行的时候，页面中元素已经被真正替换过来
        //只要执行完mounted，就表示整个Vue实例已经初始化完毕了，此时组件已经脱离了创建阶段，进入了运行阶段。
      },


      /*运行阶段*/

      //1.第一个运行生命周期函数
      beforeUpdate() { //这时候表示我们的界面还没有被更新，【数据更新了】

        console.log('页面中msg的值' + document.getElementById("me").innerHTML + '--->beforeUpdate')
        console.log("Data中msg值为：" + this.msg)

        //数据是最新的，页面没有同步
      },

      //2.第二个运行生命周期函数
      updated() {

        console.log('页面中msg的值' + document.getElementById("me").innerHTML + '--->updated')
        console.log("Data中msg值为：" + this.msg)
        //数据是最新的，页面已经同步
      },


      /*销毁阶段*/
      //1.第一个销毁生命周期函数
      beforeDestroy() {  //Vue实例从运行到销毁阶段
        //Vue实例上所有的Data和所有的methods，以及过滤器、指令。。。都处于可用状态，此时还没有真正执行销毁过程
      },

      //1.第二个销毁生命周期函数
      destroyed() {
        //Vue实例上所有的Data和所有的methods，以及过滤器、指令。。。都已经销毁。
      },

    });

十四、vuex

1.Vuex是什么

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便实现组价之间的数据的共享

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-28jCMlgP-1599554454926)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1598779618877.png)]

  1. Vuex优点
  • 能够在Vuex中集中管理共享的数据，易于开发和后期维护
  • 能够高效的实现组件之间的数据共享，提高开发效率
  • 储存在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

  1. Vuex四个核心概念

    • State

      State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新

      组件中访问：

      //方式一：
this.$store.state.myDate
//方式二：
import { mapState } from 'vuex'

computed:{
    ...mapState(['myData'])
}

    • Mutation

      Mutation用于变更Store中的数据，可以集中监控数据变化(不能写异步代码)

      //store.js中
mutation:{
    func(state,argument){
        fn()
    }
}
//组件中调用
 this.$store.commit('func',argument)


//第二种方法
import { mapMutations } from 'vuex'
methods:{
    ...mapMutations(['func']),
        myfunc(){
        this.func(argument)
    }
}

    • Action

      如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action 中还是要通过触发Mutation的方式间接变更数据

      //store.js中
actions:{
    func(context,argument){
        setTimeout(()=>{
            context.commit('mutation里的function',argument )
        },wait)
    }
}

//组件中
this.$store.dispatch('func',argument)

//方式二：
import { mapActions } from 'vuex'
methods:{
    ...mapActions(['func']),
        myfunc(){
        this.func(argument)
    }
}

    • Getter

      用于对Store中的数据进行加工处理形成新的数据。Store数据改变，Getter的数据也会跟着变化(像vue里的计算属性)

      getters:{
    newData(state){
        return `新值为${state.myData}`
    }
}
//方式一：
this.$store.getters.newData

//方式二：
import { mapGetters } from 'vuex'

computed:{
    ...mapGetters(['newData'])
}

    • modules

      在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。
      module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

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

十五、单页面应用（SPA)

SPA->就是只有一个主页面的应用，浏览器一开始要加载所有必须的 html、js、css。交互时候由路由程序动态载入，单页面的页面跳转仅刷新局部资源，多用于pc端

优点：

  • 良好的交互体验：单页应用的内容的改变不需要重新加载整个页面。
  • 减轻服务器压力：服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。
  • 良好的前后端分离：后端不用负责模板渲染，只需要进行数据的存储与计算

缺点：

  • 对SEO不太友好，不利于seo的搜索
  • 需要自行实现导航的前进后退；
  • 页面复杂度高、初次加载耗时多

十六、虚拟DOM

  1. 什么是虚拟DOM?

​ 虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。

​ 这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom 树，那么每次 dom 的更改就变成了 js 对象的属性的更改，这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。

  1. 为什么DOM性能开销大?

​ 其实并不是查询 dom 树性能开销大而是 dom 树的实现模块和 js 模块是分开的这些跨模块的通讯增加了成本，以及 dom 操作引起的浏览器的回流和重绘，使得性能开销巨大，原本在 pc 端是没有性能问题的，因为 pc 的计算能力强，但是随着移动端的发展，越来越多的网页在智能手机上运行，而手机的性能参差不齐，会有性能问题。

  1. vue大致解决方法

​ 每次更新 dom 都尽量避免刷新整个页面，而是有针对性的去刷新那被更改的一部分、也就是diff算法

  1. diff算法的大致思路

​ 我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。

具体实现可以参考https://www.cnblogs.com/wind-lanyan/p/9061684.html

十七、vue-router的两种模式

1、hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算）。 比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。（需要特定浏览器支持） 这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。history模式，会出现404 的情况，需要后台配置。—>利于seo

十八、Keep-alive组件

组件切换的时，保持这些组件的状态，以避免反复重渲染导致的性能问题（Vue 会创建了一个新的实例）

十九、Slot插槽

插槽含义：就是引入子组件后，在插入子组件元素中添加信息或者标签，使得子组件的指定位置插入信息或者标签

插槽有三种：默认插槽、具名插槽、作用域插槽

二十、nextTick

在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

changeMsg() {
      this.msg = "Hello world."
      this.msg1 = this.$refs.msgDiv.innerHTML //原来内容
      this.$nextTick(() => {
        this.msg2 = this.$refs.msgDiv.innerHTML //Hello world
      })
      this.msg3 = this.$refs.msgDiv.innerHTML//原来内容
    }

//其根本原因是因为Vue中DOM更新是异步的

）

十九、Slot插槽

插槽含义：就是引入子组件后，在插入子组件元素中添加信息或者标签，使得子组件的指定位置插入信息或者标签

插槽有三种：默认插槽、具名插槽、作用域插槽

二十、nextTick

在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

changeMsg() {
      this.msg = "Hello world."
      this.msg1 = this.$refs.msgDiv.innerHTML //原来内容
      this.$nextTick(() => {
        this.msg2 = this.$refs.msgDiv.innerHTML //Hello world
      })
      this.msg3 = this.$refs.msgDiv.innerHTML//原来内容
    }

//其根本原因是因为Vue中DOM更新是异步的
啦啦啦啦嚓Fu
关注
专栏目录
vue中使data中的数据初始化
m0_50441807的博客
02-21 3320
组件中的根元素使用了v-if，但是组件中的data数据不会初始化，因为不是组件使用了v-if，组件不会销毁；ES6的官方文档的解释是：Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。：当前的data数据（修改过后的）；：初始化的data数据；
vue初始化data中数据
zluz_的博客
10-15 952
vue初始化data中数据
初始化vue中data中的数据
greed
05-07 3598
当组件的根元素使用了v-if的时候, 并不会初始化data中的数据 如果想完全销毁该组件并且初始化数据,需要在使用该组件的本身添加v-if 或者是手动初始化该组件中的数据。
vue初始化data中的数据
weixin_42340514的博客
04-11 2196
//this.$data==>当前data数据 this.$options.data()==>原始data数据 //初始化所有数据 Object.assign(this.$data,this.$options.data()) //初始化某个对象的数据 Object.assign(this.$data.xxx,this.$options.data().xxx)
data的值 如何初始化vue_vue data恢复初始化数据的实现方法
weixin_39727976的博客
12-20 1832
vue data恢复初始化数据的实现方法在我们进行vue开发过程中，经常会保存一些页面，此时，我们在app.vue的配置如下，以此来保存页面，那么在再次进入这些页面的时候，我们需要重置该页面的原始数据，那么该如何进行呢？是不是要讲每个数据进行重写，答案是否定的。利用Object.assign 以及vue的数据可以快速重置。Object.assign(this.$data, this.$option...
vue面试经典十几问报告
最新发布
10-25
以下是对Vue面试中可能出现的一些关键知识点的详细解释： 1. **生命周期**：Vue实例从创建到销毁的过程中，有一系列的生命周期钩子函数，如`created`、`mounted`、`updated`等。`created`在实例创建完成后调用，...
vue面试题面试官经常问的，根据我的经验整理的
02-26
首先，最重要的是，有哪些好的Vue面试问题可以问初级开发人员？这些是一些基本问题，你可以问那些可能还不太熟悉Vue的年轻开发人员。 1.什么是Vue？ 答覆： Vue是一个渐进的开源JavaScript框架，用于构建可
常见vue面试题十问十答（含必考题）
05-04
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、数据驱动和响应式设计为核心，大大简化了Web应用的构建。...在面试中，对这些知识点的深入理解和应用展示，将大大提高面试者的技术水平和竞争力。
Vue面试常问30问30答
07-06
以下是对"Vue面试常问30问30答"中可能涉及的知识点的详细解释： 1. **Vue的安装与初始化** - Vue可以通过CDN链接、本地文件引入或使用npm安装。 - 初始化Vue实例时，可以设置el（挂载元素）、data（数据对象）、...
2023(完整版)vue面试题及答案(最新整理).pdf
06-28
以下是对Vue面试题中涉及的知识点的详细说明： 1. **Vue的基本原理**： - 当创建一个Vue实例时，Vue会遍历`data`对象中的所有属性，使用`Object.defineProperty`（在Vue 3中改为`proxy`）来拦截这些属性的读取和...
JS中如何轻松遍历对象属性的方式总结
11-30
自身可枚举属性 Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举，那么将返回由键组成的数组。 这是合理的，因为大多数时候只需要关注对象自身的属性。 来看看一个对象拥有自身和继承属性的例子，Object.keys()只返回自己的属性键： let simpleColors = { colorA: 'white', colorB: 'black' }; let natureColors = { colorC: 'green', colorD: 'ye
关于 vue3 项目开启 gzip 压缩方案总结
cabinx的博客
09-01 2263
关于 vue 项目开启 gzip 压缩方案总结 需求描述: 最近写的 vue 项目涉及到了项目整体性能优化问题，从加载的性能上讲，gzip压缩显得很有必要： zip 文件是可以服务端生成的： nginx 有一个模块是 gzip 模块，然后你只要开启了，nginx就会帮你来把数据（静态资源 和 接口数据）进行压缩，然后传入到客户端，客户端来解压，然后在进行代码的读取，其实这一步就是节约带宽，减少传输的代码包的数量。从而节约传输时间。然后网站就能很快打开了。 node也有相关于 compression 的库
对vue中的data进行数据初始化
潜行IT的博客
12-03 2万+
this.$data是表示当前的改变后的this中的数据，而this.$options.data()是表示没有赋值前的this中的数据,表示 初始话的data. 当在页面中要对data中的数据进行多组操作时，防止每组数据之间的影响，可以先对数据进行初始化后在进行赋值。 一般可以使用Object.assign(this.$data, this.$options.data())来对data中的数据...
Vue异步获取数据后初始化数据不能及时更新
入门菜鸟程序员的成长
08-23 1万+
1.钩子函数尽量使用mounted来完成初始化函数，根据vue的生命周期尽量不要用mounted之前的 2.对于可能要改变的值，最好直接写到data{}中，比如这样写： 而不是在mounted中这样写 这个问题发现于修改一处input绑定的对象属性，另外一处{{person.name}}不能及时更新，vue似乎只会对第一层（这里的m80）的数据进行实时更新，如果想让他对第二层（m80里的...
vue初始化data中数据的方法
huqiut的博客
02-14 2231
this.$data 当前data数据 this.$options.data() 原始data数据 Object.assign(this.$data, this.$options.data())
Vue 一键初始化data数据
qq_33475629的博客
06-16 2430
一键初始化data数据
vue data恢复初始化数据
Bloxed_shangyc的博客
11-08 1万+
Object.assign(this.$data, this.$options.data())
Vue中重置data的数据为初始状态
热门推荐
第一行代码
08-20 3万+
在某些情况下，需要重新使用data中的数据，但是data中的数据已经被各种表单、变量等赋值，那么怎么重置data的值呢？ 1. 逐个赋值 ... data() { return { name: '', sex: '', desc: '' } } ... // 逐个赋值 this.name = '' this.sex = '' this.desc = '' 这个方法比较笨，...
data的值 如何初始化vue_在VueJs 2.0中重新初始化数据的正确方法
weixin_39715460的博客
12-20 327
However, the current method is not allowed now and VueJS prohibits changing the $data var.As you can see here in this https://github.com/vuejs/vue/issues/2873 ( $data is not allowed to be modified. )S...
Vue面试必备：100问解析
"Vue面试题100问，涵盖了Vue.js框架的基本理解、声明式与命令式编程概念，以及Vue的一些基本特征和解决方案。" Vue.js是一个由尤雨溪创建的渐进式JavaScript框架，专注于视图层的数据渲染。自2014年发布以来，Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值