vue.js面试笔记

发布时间:2019-08-12 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue.js面试笔记脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

相同点

不同点

  • React严格上只针对MVC的view层,Vue则是MVVM模式
  • virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
  • 组件写法不一样, React推荐的做法是 JSX + inline style,也就是把HTMLCSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即htML,css,jd写在同一个文件;
  • 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
  • @R_304_2358@e对象在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、组件之间的传值通信?

    //父组件通过标签上面定义传值
    <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.Storestate, mutationsactions三个属性组成:state中保存着共有数据,改变state中的数据只能通过mutations中的方法,且mutations中的方法必须是同步的,如果要写异步的方法,需要些在actions中,并通过commitmutations中进行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 ...语法或CommonJSrequire()方法引入组件
  • 对组件进行注册,代码如下
// 注册
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 ...语法或CommonJSrequire()方法引入插件
  • 使用全局方法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、vuejsAngularjs以及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实例的$eldata都初始化了,但还是挂载之前,为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。

    更新前/后:当data变化时,会触发beforeUpdateupdated方法。

    销毁前/后:在执行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

脚本宝典总结

以上是脚本宝典为你收集整理的vue.js面试笔记全部内容,希望文章能够帮你解决vue.js面试笔记所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。