vue.js面试笔记

2024年5月28日 54次阅读 来源: 牧心

1、react和vue有哪些不同，说说你对这两个框架的看法

相同点

  • 都支持服务器端渲染
  • 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
  • 数据驱动视图
  • 都有支持native的方案,React的React native,Vue的weex

不同点

  • React严格上只针对MVC的view层,Vue则是MVVM模式
  • virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
  • 组件写法不一样, React推荐的做法是 JSX + inline style,也就是把HTML和CSS全都写进JavaScript了,即’all in js’; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
  • 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
  • state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理

2.MVC和MVVM的区别

MVC（Model-View-Controller）

  • MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。
  • MVC使用非常广泛，比如JavaEE中的SSH框架

MVVM（Model-View-ViewModel）

  • 如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。

如何理解vue中MVVM模式？

  • MVVM全称是Model-View-ViewModel；vue是以数据为驱动的，一旦创建dom和数据就保持同步，每当数据发生变化时，dom也会变化。
  • DOMListeners和DataBindings是实现双向绑定的关键。DOMListeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；DataBindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。

3、vue的虚拟dom？

  • 虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。
  • 简单来说，虚拟DOM是用Object来代表一颗节点，这个Object叫做VNode，然后使用两个VNode进行对比，根据对比后的结果修改真实DOM。
  • 为什么是两个VNode？因为每次渲染都会生成一个新的VNode，然后和上一次渲染时用的VNode进行对比。然后将这一次新生成的VNode缓存，用来进行下一次对比。

4、说出至少4种vue当中的指令和它的用法？

  • v-if：是“真正”的条件渲染,在切换中组件会适当的被销毁和重建；
  • v-for：数据循环渲染；
  • v-show：控制元素的显示隐藏，即控制元素的display，基于 CSS 进行切换
  • v-bind:class：绑定一个属性；
  • v-model：实现双向绑定

5、组件之间的传值通信？

  • 父组件向子组件传值，通过props
    //父组件通过标签上面定义传值
    <template>
        <Main :obj="data"></Main>
    </template>
    <script>
        //引入子组件
        import Main form "./main"
        
        exprot default{
            name:"parent",
            data(){
                return {
                    data:"我要向子组件传递数据"
                }
            },
            //初始化组件
            components:{
                Main
            }
        }
    </script>
    //子组件通过props方法接受数据
     
    <template>
        <div>{{data}}</div>
    </template>
    <script>
        exprot default{
            name:"son",
            //接受父组件传值
            props:["data"]
        }
    </script>

  • 子组件向父组件传值：通过$on,$emit

    1. 子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
    2. 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；
    3. 在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
//子组件:
<template>
    <div @click="up"></div>
</template>

methods: {
    up() {
        this.$emit('upup','hehe'); //主动触发upup方法，'hehe'为向父组件传递的数据
    }
}

//父组件
<div>
    <child v-on:upup="change" :msg="msg"></child> //监听子组件触发的upup事件,然后调用change方法
</div>
methods: {
    change(msg) {
        this.msg = msg;
    }
}
  • 非父子组件通信

如果2个组件不是父子组件那么如何通信呢？这时可以通过eventHub来实现通信.
所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.

let Hub = new Vue(); //创建事件中心

//组件1触发：
<div @click="eve"></div>
methods: {
    eve() {
        Hub.$emit('change','hehe'); //Hub触发事件
    }
}

//组件2接收:
<div></div>
created() {
    Hub.$on('change', () => { //Hub接收事件
        this.msg = 'hehe';
    });
}

6、vue的优点是什么？

  • 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
  • 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
  • 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。
  • 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

7、路由之间跳转？

  • 声明式（标签跳转） <router-link :to="index">

  • 编程式（js跳转） router.push('index')

8、组件的使用和自己创建公用组件？

  • 第一步：在components目录新建你的组件文件（indexPage.vue），script一定要export default {}
  • 第二步：在需要用的页面（组件）中导入：import indexPage from '@/components/indexPage.vue'
  • 第三步：注入到vue的子组件的components属性上面,components:{indexPage}
  • 第四步：在template视图view中使用，

问题有indexPage命名，使用的时候则index-page。

9、vue如何实现按需加载配合webpack设置?

  • webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。
  • 不进行页面按需加载引入方式：import home from '../../common/home.vue'
  • 进行页面按需加载的引入方式：const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

10、vuex是什么？怎么使用？哪种功能场景使用它？

  • vue框架中状态管理。在main.js引入store，注入。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

  • 数据单向流动

    1. 一个应用可以看作是由上面三部分组成: View, Actions,State，数据的流动也是从View => Actions => State =>View，以此达到数据的单向流动,但是项目较大的，组件嵌套过多的时候，多组件共享同一个State会在数据传递时出现很多问题。Vuex就是为了解决这些问题而产生的。
    2. Vuex可以被看作项目中所有组件的数据中心，我们将所有组件中共享的State抽离出来，任何组件都可以访问和操作我们的数据中心。
    3. Vuex的组成，一个实例化的Vuex.Store由state, mutations和actions三个属性组成：state中保存着共有数据，改变state中的数据只能通过mutations中的方法，且mutations中的方法必须是同步的，如果要写异步的方法，需要些在actions中，并通过commit到mutations中进行state中数据的更改。

11、v-show和v-if指令的共同点和不同点?

  • v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏
  • v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

12、如何让CSS只在当前组件中起作用?

  • 将当前组件的<style>修改为<style scoped>

13、<keep-alive></keep-alive>的作用是什么?

  • <keep-alive></keep-alive>包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。
  • 大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…
    这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

14、Vue中引入组件的步骤?

  • 采用ES6的import ... from ...语法或CommonJS的require()方法引入组件
  • 对组件进行注册,代码如下
// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
  • 3.使用组件<my-component></my-component>

15、指令v-el的作用是什么?

  • 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例

16、在Vue中使用插件的步骤

  • 采用ES6的import ... from ...语法或CommonJS的require()方法引入插件
  • 使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })

17、vue-loader是什么？使用它的用途有哪些？

  • 解析.vue文件的一个加载器，将template/js/style转换成js模块。
  • 用途：js可以写es6、style样式可以scss或less、template可以加jade等

18、请说出vue.cli项目中src目录每个文件夹和文件的用法？

  • assets文件夹是放静态资源；
  • components是放组件；
  • router是定义路由相关的配置;
  • view视图；
  • app.vue是一个应用主组件；
  • main.js是入口文件

19、聊聊你对Vue.js的template编译的理解？

  • 简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
  • 详情步骤：
    首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。

    然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

20、vue-router的两种模式的区别

前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。

  • hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
    比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
  • history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
    这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。

21、vuejs与angularjs以及react的区别？

  • 与AngularJS的区别
    相同点：
    1.都支持指令：内置指令和自定义指令。
    2.都支持过滤器：内置过滤器和自定义过滤器。
    3.都支持双向数据绑定。
    4.都不支持低端浏览器。
    不同点：
    1.AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。
    2.在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。
    3.Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。对于庞大的应用来说，这个优化差异还是比较明显的。

  • 与React的区别
    相同点：
    1.React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。
    2.中心思想相同：一切都是组件，组件实例之间可以嵌套。
    3.都提供合理的钩子函数，可以让开发者定制化地去处理需求。
    4.都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。
    5.在组件开发中都支持mixins的特性。
    不同点：
    1.React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。
    2.Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。

22、请详细说下你对vue生命周期的理解？

  • 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
    创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。

    载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前，为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

    更新前/后：当data变化时，会触发beforeUpdate和updated方法。

    销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

23、什么是vue生命周期？

  • Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

24、vue生命周期的作用是什么？

  • 借助组件各个阶段的钩子可以对组件有更好的利用和扩展。

25、第一次页面加载会触发哪几个钩子？

  • 会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

26、DOM 渲染在 哪个周期中就已经完成？

  • DOM 渲染在 mounted 中就已经完成了

27、简单描述每个周期具体适合哪些场景？

  • 生命周期钩子的一些使用方法：
    beforecreate : 可以在这加个loading事件，在加载实例时触发
    created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
    mounted : 挂载元素，获取到DOM节点
    updated : 如果对数据统一处理，在这里写上相应函数
    beforeDestroy : 可以做一个确认停止事件的确认框
    nextTick : 更新数据后立即操作dom
    原文作者：牧心
    原文地址: https://segmentfault.com/a/1190000015861510
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞