当前位置:   article > 正文

前端 vue 2020最新面试题_前端面试题2020vue

前端面试题2020vue
前端 vue 2020最新面试题
简述Vue的响应式原理
  • 当一个Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty 将它们转为getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化。 每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。
    在这里插入图片描述
Vue的双向数据绑定原理是什么?( vue data是怎么实现的)
  • 答:vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

  • 具体步骤:

    • 第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter 这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化

    • 第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函 数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

    • 第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:

      • 1、在自身实例化时往属性订阅器(dep)里面添加自己
      • 2、自身必须有一个update()方法
      • 3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
    • 第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

生命周期
  • BeforeCreate 数据观测初始化事件还未开始 el 和 data 并未初始化进行初始化事件,进行数据的观测,可以看到在created的时候数据已经和data属性进行绑定,无el选项
  • Created 完成数据观测,属性和方法的运算,初始化事件,el属性还没有显示出来判断对象是否有el选项。如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm. el属性还没有显示出来判断对象是否有el选项。如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.el属性还没有显示出来判断对象是否有el选项。如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.mount(el)
  • BeforeMount 在挂载开始之前被调用,相关的render函数首次被调用。完成了 el 和 data 初始化
    创建vm.el并用其替换“el”Mounted在el被新创建的vm. el 并用其替换“el”Mounted 在el 被新创建的 vm.el并用其替换“el”Mounted在el被新创建的vm.el 替换,并挂载到实例上去之后调用。挂在完毕如果调用vm.$destory()
  • BeforeUpdate 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前虚拟DOM 重新渲染并应用更新
  • Updated 由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用
  • BeforeDestroy 在实例销毁之前调用。实例仍然完全可用。
    解除绑定,销毁子组件以及事件监听器
  • Destroyed 在实例销毁之后调用。所有的事件监听器会被移除,所有的子实例也会被销毁从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁
请详细说下你对vue生命周期的理解?
  • 答:总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
    • 创建前/后: 在beforeCreated阶段,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结构依然存在
V-指令
  • v-model
  • v-bind
  • v-show
  • v-if
  • v-for
  • v-on
  • v-once
  • v-html
V-model原理
  • v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值。

  • <input v-bind: value=”something” v-on:input=”something = $event.target.value”>
    接受一个value属性 在有新的value属性时触发input事件

  • v-model 是动态的双向数据绑定(只能用在input, textarea, select上)
    .lazy .trim .number

mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?
  • 答:一个model+view+viewModel框架,数据模型model,viewModel连接两个
    • 区别:vue数据驱动,通过数据来显示视图层而不是节点操作。
    • 场景:数据操作比较多的场景,更加便捷
MVVM
  • Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。
  • View 代表UI 组件,它负责将数据模型转化成UI 展现出来。
  • ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。
  • 在vue中,使用了双向绑定技术,就是View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。
  • MVC有厚重的View Controller,无处安放的网络逻辑,较差的可测试性
请说出vue.cli项目中src目录每个文件夹和文件的用法?
  • 答:assets文件夹是放静态资源;components是放组件;router是定义路由相关的配置;view视图;app.vue是一个应用主组件;main.js是入口文件
vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?
  • 第一步:在components目录新建你的组件文件(smithButton.vue),script一定要export default {
  • 第二步:在需要用的页面(组件)中导入:import smithButton from
  • 第三步:’/components/smithButton.vue’
  • 第三步:注入到vue的子组件的components属性上面,components:{smithButton}
  • 第四步:在template视图view中使用,
  • 问题有:smithButton命名,使用的时候则smith-button。
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
  • 答:在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id
vue-router有哪几种导航钩子?
  • 答:三种,一种是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。第二种:组件内的钩子;第三种:单独路由独享组件
组件参数传递
  • 父组件传给子组件:子组件通过props方法接受数据;

  • 子组件传给父组件:$emit方法传递参数

  • Vuex多组件共享状态(数据的管理) 组件间的关系也没有限制 功能比pubsub强大, 更适用于vue项目
    Slot通信是带数据的标签

  • Pubsub第三方库(消息订阅与发布)适合于任何关系的组件间通信

  • hash模式 history模式

  • hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取

  • history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()- 可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更

vue-loader是什么?使用它的用途有哪些?
  • 答:解析.vue文件的一个加载器,跟template/js/style转换成js模块。
  • 用途:js可以写es6、style样式可以scss或less、template可以加jade等
请说下封装 vue 组件的过程?
  • 答:首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。
    然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。
vuex
  • State:存放数据状态,不可直接修改里面数据
  • Mutations:定义的方法动态修改Vuex的store中的状态或数据
  • Getters:类似vue的计算属性,主要用来过滤一些数据。
  • Action:可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。
  • Modules:项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?
  • 答:全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives
  • 钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
  • 钩子函数参数:el、binding
keep-alive
  • Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
vue.js的两个核心
  • 数据驱动
  • 组件系统
vue修饰符
  • .prevent: 提交事件不再重载页面;
  • .stop: 阻止单击事件冒泡;
  • .self: 当事件发生在该元素本身而不是子元素的时候会触发;
  • .capture: 事件侦听,事件发生的时候会调用
vue的key值

用于管理可复用的元素。因Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做使Vue变得非常快,为了高效的更新虚拟DOM

route & router & routes
  • router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。(管理所有路由)
  • route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等 (一条路由)
  • routes 一组路由 (一组路由)
computed & watch
  • computed是一个计算属性,类似于过滤器,对于绑定到view的数据进行处理,具有缓存性,简化了计算和处理过程 有get和set
  • watch是一个观察动作,监听props,$emit等异步操作,无缓存性
  • computed的话是通过几个数据的变化,来影响一个数据,而watch,则是可以一个数据的变化,去影响多个数据
    当一个属性受多个属性影响的时候就需要用到computed
    当一条数据影响多条数据的时候就需要用watch
Vue-router 和location.href
  • 使用location.href=’/url’来跳转,简单方便,但是刷新了页面;
  • 使用history.pushState(’/url’),无刷新页面,静态跳转;
聊聊你对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节点,里面有(标签名、子节点、文本等等)
传参
  • 路由传参:

    • router.js 后边跟:id配置参数
    • query 方法传参
    • name 方法传参
    • vue自带标签标签传参
  • 组件传参:

    • 父传子 props
    • 子传父 this.$emit()
    • 子传父 this.emit非父子组件eventHub中转站this. emit非父子组件 eventHub 中转站 this.emit非父子组件eventHub中转站this.on
    • vuex state 存的变量,mutations改变的状态 actions 触发的行为(方法)
组件的引入

导入组件import Vheader from ‘./components/Vheader.vue’
挂载组件在export default 中 定义一个key为components,值为一个对象,这个对象中放着导入键值对;键为变量名,值为组件名,在es6中,键值相同时,可以缩写为一个单一的值。比如:components:{ Vheader }
在template模板中使用组件:

<Vheader>  </Vheader>
  • 1
如何优化SPA应用的首屏加载速度慢的问题?
  • 将公用的JS库通过script标签外部引入,减小 app.bundel 的大小,让浏览器并行下载资源文件,提高下载速度;
  • 在配置 路由时,页面和组件使用懒加载的方式引入,进一步缩小 app.bundel 的体积,在调用某个组件时再加载对应的js文件;
  • 加一个首屏loading图,提升用户体验;
scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?
  • 答:css的预编译。
  • 使用步骤:
    • 第一步:用npm 下三个loader(sass-loader、css-loader、node-sass)
    • 第二步:在build目录找到webpack.base.config.js,在那个extends属性中加一个拓展.scss
    • 第三步:还是在同一个文件,配置一个module属性
    • 第四步:然后在组件的style标签加上lang属性 ,例如:lang=”scss”
  • 有哪几大特性:
    • 可以用变量,例如($变量名称=值);
    • 可以用混合器,例如()
    • 可以嵌套
前端如何优化网站性能?
  • 减少 HTTP 请求数量

    • 在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手,每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许并发数),一旦 HTTP 请求数量达到一定数量,资源请求就存在等待状态,这是很致命的,因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。
  • CSS Sprites

    • 国内俗称CSS精灵,这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案,可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

    • 合并 CSS 和 JS 文件

    • 现在前端有很多工程化打包工具,如:grunt、gulp、webpack等。为了减少 HTTP 请求数量,可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

  • 采用 lazyLoad

    • 俗称懒加载,可以控制网页上的内容在一开始无需加载,不需要发请求,等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
  • 控制资源文件加载优先级

    • 浏览器在加载HTML内容时,是将HTML内容从上至下依次解析,解析到link或者script标签就会加载href或者src对应链接内容,为了第一时间展示页面给用户,就需要将CSS提前加载,不要受 JS 加载影响。
  • 一般情况下都是CSS在头部,JS在底部。

  • 利用浏览器缓存

    • 浏览器缓存是将网络资源存储在本地,等待下次请求该资源时,如果资源已经存在就不需要到服务器重新请求该资源,直接在本地读取该资源。
  • 减少重排(Reflow)

    • 基本原理:重排是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证 DOM 树上的所有其它结点的visibility属性,这也是Reflow低效的原因。如果Reflow的过于频繁,CPU使用率就会急剧上升。
  • 减少Reflow,如果需要在DOM操作时添加样式,尽量使用 增加class属性,而不是通过style操作样式。

  • 减少 DOM 操作

  • 图标使用 IconFont 替换

  • 网页从输入网址到渲染完成经历了哪些过程? 大致可以分为如下7步:

    • 输入网址;
    • 发送到DNS服务器,并获取域名对应的web服务器对应的ip地址;
    • 与web服务器建立TCP连接;
    • 浏览器向web服务器发送http请求;
    • web服务器响应请求,并返回指定url的数据(或错误信息,或重定向的新的url地址);
    • 浏览器下载web服务器返回的数据及解析html源文件;
    • 生成DOM树,解析css和js,渲染页面,直至显示完成;
声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号