精华内容
下载资源
问答
  • 常见vue面试题

    2020-11-17 10:39:58
    3 常见的实现MVVM数据绑定的做法有哪些? 实现数据绑定的做法有大致如下几种: 发布者-订阅者模式(backbone.js) 脏值检查(angular.js) 数据劫持(vue.js) 1、发布者-订阅者模式: 一般通过sub, pub的方式实现...

    1 . MVC、MVP与MVVM模式

    MVC:

    MVC是应用最广泛的软件架构之一,一般MVC分为:

    Model( 模型 )Controller( 控制器 )View( 视图 )

    这主要是基于分层的目的,让彼此的职责分开。View 一般通过 Controller 来和 Model 进行联系。ControllerModelView 的协调者,ViewModel不直接联系。基本联系都是单向的。

    img

    1、View 传送指令到 Controller
    2、Controller 完成业务逻辑后,要求 Model 改变状态
    3、Model 将新的数据发送到 View,用户得到反馈

    MVP:

    MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。
    img

    1、各部分之间的通信,都是双向的。
    2、View 与 Model 不发生联系,都通过 Presenter 传递。
    3、View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

    MVVM

    MVVM 是把 MVCControllerMVPPresenter 改成了 ViewModel

    View 的变化会自动更新到 ViewModelViewModel 的变化也会自动同步到 View上显示。这种自动同步是因为 ViewModel 中的属性实现了 Observer,当属性变更时都能触发对应的操作。
    img

    img

    2 MVVM模式的优点以及与MVC模式的区别

    MVVM模式的优点:

    1、低耦合:视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

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

    3、独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。

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

    MVVM 和 MVC 的区别:

    mvcmvvm 其实区别并不大。都是一种设计思想。

    主要区别

    • mvc 中 Controller演变成 mvvm 中的 viewModel,

    • mvvm 通过数据来显示视图层而不是节点操作。

    • mvvm主要解决了: mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。

    3 常见的实现MVVM数据绑定的做法有哪些?

    实现数据绑定的做法有大致如下几种:

    发布者-订阅者模式(backbone.js)
    脏值检查(angular.js)
    数据劫持(vue.js)

    1、发布者-订阅者模式:


    一般通过sub, pub的方式实现数据和视图的绑定监听,
    更新数据方式通常做法是 vm.set('property', value)

    这种方式现在毕竟太low了,我们更希望通过 vm.property = value这种方式更新数据,同时自动更新视图,于是有了下面两种方式。


    2、脏值检查:


    angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,

    最简单的方式就是通过 setInterval() 定时轮询检测数据变动,

    angular只有在指定的事件触发时进入脏值检测,大致如下:

    1、DOM事件,譬如用户输入文本,点击按钮等。( ng-click )
    
    2、XHR响应事件 ( $http )
    
    3、浏览器Location变更事件 ( $location )
    
    4、Timer事件( $timeout , $interval )
    
    5、执行 $digest() 或 $apply()
    

    3、数据劫持:


    vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,

    通过Object.defineProperty()来劫持各个属性的settergetter

    在数据变动时发布消息给订阅者,触发相应的监听回调。

    4 Object.defineProperty()方法的作用是什么?

    Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

    语法:

    Object.defineProperty(obj, prop, descriptor)
    

    参数说明:

    obj:必需。目标对象 
    prop:必需。需定义或修改的属性的名字
    descriptor:必需。目标属性所拥有的特性
    

    返回值:

    传入函数的对象。即第一个参数obj
    

    针对属性,我们可以给这个属性设置一些特性,比如是否只读不可以写;是否可以被for…in或Object.keys()遍历。

    给对象的属性添加特性描述,目前提供两种形式:数据描述和存取器描述。

    5 vue.js的两个核心是什么?

    1、数据驱动,也叫双向数据绑定。

    Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。

    2、组件系统。

    .vue组件的核心选项:

    1、模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。
    2、初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。
    3、接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。
    4、方法(methods):对数据的改动操作一般都在组件的方法内进行。
    5、生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。
    6、私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
    等等。

    6 请详细说下你对vue生命周期的理解?

    6.1 什么是vue生命周期?

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

    6.2 vue生命周期钩子函数都有哪些?分别是什么意思?
    • 组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实的dom,一般不做操作

    • 挂载数据,绑定事件等等,然后执行created函数,这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数,在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

    • 接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染,然后执行beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取下来开始render,渲染出真实dom,然后执行mounted钩子函数,此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了,可以在这里操作真实dom等事情…

    • 当组件或实例的数据更改之后,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染,一般不做什么事儿

    • 当更新完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom

    • 经过某种途径调用$destroy方法后,立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等,组件的数据绑定、监听…去掉后只剩下dom空壳,这个时候,执行destroyed,在这里做善后工作也可以

    如果觉得上面的太长,也可以如下回答:

    ​ 总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。

    ​ 创建前/后: 在beforeCreated阶段,vue实例的挂载元素el还没有。在created阶段,vue实例的数据对象data有了,el还没有.

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

    ​ 更新前/后:当data变化时,会触发beforeUpdate和updated方法。

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

    6.3 vue生命周期的作用是什么?

    生命周期中有多个事件钩子,让我们在控制整个 vue 实例的过程时更容易形成好的逻辑

    6.4 第一次页面加载会触发哪几个钩子?

    第一次加载会触发 beforeCreate、created、beforeMount、mounted

    6.5 简述每个周期具体适合哪些场景?

    生命周期钩子的一些使用方法:

    • beforecreate : 可以在这加个loading事件,在加载实例时触发

    • created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用

    • mounted : 挂载元素,获取到DOM节点 updated : 如果对数据统一处理,在这里写上相应函数

    • beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

    6.6 created和mounted的区别?
    • created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

    • mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

    6.7 vue获取数据在哪个周期函数?
    • 看实际情况,一般在 created(或beforeRouter) 里面就可以,如果涉及到需要页面加载完成之后的话就用 mounted。

    • 在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素

    • 而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,(此时document.getelementById 即可生效了)

    7 说一下你对vue路由的理解吧

    7.1 什么是vue路由?

    “Vue路由就是指vue-router,其中router是指根据url分配到对应的处理程序,所以说路由就是用来解析URL以及调用对应的控制器并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。

    7.2 vue路由的优点以及缺点是什么?
    • 优点:

      • 不需要每次都从服务器获取,渲染页面更快速
    • 缺点:

      • 不利于SEO
      • 使用浏览器前进、后退按键时重新发送请求,未合理利用缓存
      • 单页面无法记住之前滚动的位置
    7.3 请简单说一下vue路由的原理?

    Vue的路由实现:hash模式 和 history模式

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

    • 特点:

      • hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。
      • hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
    • history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。

    • 特点:

      • history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”
    7.4 怎么定义 vue-router 的动态路由?如何获取动态路由传过来的值?
    • 定义动态路由:

      • 在 router 目录下的 index.js 文件中,对 path 属性加上 /:id。
    • 获取动态路由传过来的值:

      • 使用 router 对象的 params.id 获取
    //全局获取动态路由传递过来的值
    $route.params.id
    //局部或者是在方法内获取
    this.$route.params.id
    
    7.5 请描述vue-router路由守卫的作用?

    vue-router 的导航钩子,主要用来作用是拦截导航,让他完成跳转或取消。

    7.6 路由守卫使用的方式有几种?
    • 全局的

    • 单个路由独享的

    • 组件级的

    7.7 路由守卫的钩子函数都有哪些?分别是什么意思?
    • vue-router全局有三个守卫:

      • router.beforeEach 全局前置守卫 进入路由之前
      • router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
      • router.afterEach 全局后置钩子 进入路由之后
    • 组件内的守卫:

      • beforeRouteEnter
      • beforeRouteUpdata(2.2新增)
      • beforeRouteLeave
    7.8 路由守卫钩子函数里面的三个参数分别是什么?
    • to,from,next 这三个参数:

      • to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。
      • next:Function 这个参数是个函数,且必须调用,否则不能进入路由(页面空白)。
        • next() 进入该路由。
        • next(false): 取消进入路由,url地址重置为from路由地址(也就是将要离开的路由地址)。
        • next 跳转新路由,当前的导航被中断,重新开始一个新的导航。
    • 我们可以这样跳转:next(‘path地址’)或者next({path:’’})或者next({name:’’})

    • 且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及你用在router-link或router.push的对象选项。

    7.9 路由守卫的解析流程?
    • 导航被触发
    • 在失活的组件里调用离开守卫
    • 调用全局的 beforeEach 守卫
    • 在重用的组件里调用 beforeRouteUpdate 守卫
    • 在路由配置里调用 beforEnter
    • 解析异步路由组件
    • 在被激活的组件里调用 beforeRouteEnter
    • 调用全局的 beforeResolve 守卫
    • 导航被确认
    • 调用全局的 afterEach 钩子
    • 触发 DOM 更新
    • 在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数
    7.10 vue-router路由传参的方式一共有几种?他们是如何就收传递过来的参数?
    • 三种:

      • 分别是query,params,动态路由传参
    • 接收:

      • 通过query方式传递过来的参数一般是通过this.$route.query接收
      • 通过params方式传递过来的参数一般是通过this.$route.params接收
      • 通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收
    7.11 query传参和params方式的区别是什么?
    • query使用path和name传参跳转都可以,而params只能使用name传参跳转。

    • 传参跳转页面时,query不需要再路由上配参数就能在新的页面获取到参数,params也可以不用配,但是params不在路由配参数的话,当用户刷新当前页面的时候,参数就会消失。

    • 也就是说使用params不在路由配参数跳转,只有第一次进入页面参数有效,刷新页面参数就会消失。

    7.12 什么是路由懒加载?以及路由懒加载是如何实现的?
    • 按需加载
    • 当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
    • 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。

    8 说一下你对vuex的理解?

    8.1 什么是vuex?
    • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

    • 我的个人理解是vuex其实就是一个管理数据的工具,通过vuex我们可以解决组件之间数据共享的问题,后期也方便我们管理以及维护

    8.2 vuex的优点和缺点是什么?
    • 优点:

      • 解决了非父子组件的消息传递(将数据存放在state中)
      • 减少了AJAX请求次数,有些情景可以直接从内存中的state获取
      • 数据方便管理以及维护
    • 缺点:

      • 小型项目使用的话,vuex会显得有点繁琐冗余
      • 刷新浏览器,vuex中的state会重新变为初始状态,我们如何要解决这个问题就可能需要用本地存储或者vuex的一个插件
    8.3 一般什么情况下使用 vuex?
    • 官方说的是在大型项目中推荐使用vuex,但是我个人的理解是当页面的组件比较多,业务比较复杂时,数据难以维护,这个时候我一般会使用vuex
    8.4 vuex的原理是什么?
    • 每个Vuex应用的本质是store(仓库),包含应用中大部分的状态。

    • state, getters,mutations,actions,module

    8.5 请你说一下vuex的用法?
    • 安装vuex

    • 在src目录下创建store文件夹,在该文件夹内创建index.js

    • 在store文件夹内的index.js文件内引入vuex

    • 然后在引入vue

    • 调用Vue.use()方法注册vuex

    • 对vuex进行实例化

    • 进行实例化之后通过export default导出

    • 在main.js文件内引入store文件夹内的index.js文件

    • 挂载到new Vue实例上面

    • 初始化vuex的状态和属性

    8.6 你在项目中哪些地方用到了vuex?
    • 登录模块,购物车模块,订单模块,商品模块。。。。
    8.7 vuex的运行机制什么?
    • 在vue组件里面,通过dispatch来触发actions提交修改数据的操作。

    • 然后再通过actions的commit来触发mutations来修改数据。

    • mutations接收到commit的请求,就会自动通过Mutate来修改state(数据中心里面的数据状态)里面的数据。

    最后由store触发每一个调用它的组件的更新

    8.8 vuex都有哪些属性?
    • State、Getter、Mutation 、Action、Module 五种
      • state => 基本数据
      • getters => 从基本数据派生的数据
      • mutations => 提交更改数据的方法,同步!
      • actions => 像一个装饰器,包裹mutations,使之可以异步。
      • modules => 模块化Vuex
    8.9 你是如何获取state的值,如何调用gettes里面定义的方法?如何调用mutations的方法?如何调用actions的方法?
    • state的值获取的方式有两种:
      • 第一种是组件里面进行获取 this.$store.state.状态
      • 第二种是在vuex内部进行获取
        • 函数参数里面会有一个state参数,通过这个state参数我们可以直接拿到state的值
        • getters的方法在组件内调用的话是通过this.$store.getters来进行获取,而getters的作用一般是用来获取state的值
        • mutations的方法在组件内调用时一般是通过this.$store.commit()来进行调用,而mutations的作用一般是用来改变state里面状态,只不过通过同步的方式去改变
        • actions的方法在组件内调用的话是通过this.$store.dispatch()来进行调用,而actions的作用一般是用来异步的改变状态,actions也支持promise
    8.10 vuex里面module属性的作用是什么?
    • module属性相当于是vuex里面的模块化方法,module属性可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
    • 比如:购物车模块,订单模块,商品模块…每个模块都有自己的数据,建立多个模块文件来保存各自对应模块的数据,最后,在module属性里面进行合并
    8.11 不使用vuex会带来什么问题?
    • 可维护性会下降,想修改数据要维护三个地方;
    • 可读性会下降,因为一个组件里的数据,根本就看不出来是从哪来的;
    • 增加耦合,大量的上传派发,会让耦合性大大增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背
    8.12 Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
    • 如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。
    • 如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用,并包装成promise返回,在调用处用async await处理返回的数据。如果不要复用这个请求,那么直接写在vue文件里很方便。
    8.13 Vuex中如何异步修改状态?

    actions去异步的改变state的状态,mutations是同步改变状态,调用actions内定义的方法,需要通过this.store.dispatch(),mutationsthis.store.dispatch(),mutations方法是通过this.store.commit()来进行调用,而在actions要调用mutations的方法,通过commit来进行调用

    8.14 Vuex中actions和mutations的区别?
    • Action 提交的是 mutation,而不是直接变更状态。
    • Action 可以包含任意异步操作
    • mutations只能是同步操作
    8.15 页面刷新后vuex的state数据丢失怎么解决?

    localStorage 或者就是sessionStorage ,或者借用辅助插vuex-persistedstate

    8.16 vuex怎么知道state是通过mutation修改还是外部直接修改的?

    通过$watch监听mutation的commit函数中_committing是否为true

    9 请你说一下你对vue组件通信的理解?

    vue组件的通信是为了解决组件之间数据传递的问题,分为

    • 父子组件之间的通信

    • 非父子组件的通信

    10 父组件如何与子组件怎么通信?

    • 父组件将数据绑定在子组件上
    • 子组件通过props属性来进行接收,props的接收方式有两种,分别是数组的方式接收,以及对象的方式接收,他们两个的不同是对象接收的方式可以设置默认值以及传递过来的类型

    11 子组件如何与父组件进行通信?

    • 在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了

    12 非父子组件之间如何进行通信?

    • 非父子组件之间通信我们可以使用vuex或者event bus,而这个event bus我们把它称之为中央时间总线,vue中央事件总线这种方法适用于任何情况的父子组件通信,同级别组件通信,相当于组件通信间的万金油。但是碰到多人合作时,代码的维护性较低,代码可读性低(这个缺点可以忽略)。

    15 除了组件之间的这种通信方式以外,还是什么方式可以让组件的数据进行共享?

    ​ 路由,vuex,本地存储

    16 props接收父组件发送过来的数据有几种形式?

    • 两种,一种是数组,另外一种是对象

    17 非父子组件之间通信的原理是什么?

    • 非父子组件之间通信我们一般使用event bus,中央时间总线来进行解决,而中央事件总线的鱼哪里是通过vue实例化之后的对象调用bus.emit来进行数据的发送,通过bus.$on来进行接收

    18 请描述vue的优点是什么?缺点是什么?

    • vue的优点:
      • 简单易用
      • 灵活渐进式
      • 轻量高效
        • 压索之后20KB大小
        • 虚拟DOM
      • MVVM
        • 数据驱动视图
        • 常规的操作方式都是DOM
        • 普通的javascript数据
      • 组件化
        • 组件化优点
          • 提高开发效率
          • 方便重复使用
          • 简化调试步骤
          • 提升整个项目的可维护性
          • 便于协同开发
    • vue的缺点:
      • VUE不支持IE8

    19 请你描述一下vue中让元素隐藏的方式有几种?区别是什么?

    • v-show v-if
      • 共同点:
        • v-ifv-show 都是动态显示DOM元素。
      • 区别
        • 编译过程: v-if 是 真正 的 条件渲染,因为它会确保在切换过程中条件块内的事件监听器子组件适当地被销毁重建v-show 的元素始终会被渲染并保留在 DOM 中v-show 只是简单地切换元素的 CSS 属性display
        • 编译条件: v-if 是惰性的:如果在初始渲染时条件为假,则什么也不做。直到条件第一次变为真时,才会开始渲染条件块。v-show不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换
        • 性能消耗:v-if有更高的切换消耗。v-show有更高的初始渲染消耗`。
        • 应用场景: v-if适合运行时条件很少改变时使用。v-show适合频繁切换

    20 你在vue中怎么样让你写的css样式只在你当前写的组件中显示?

    21 请你说一下keep-alive?你在哪些地方用过它?

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

    22 请你说一下在vue中如何获取dom元素?

    ref

    23 请你说一下vue中常用的指令有哪些?

    `v-bind,v-if,v-show,v-model等等

    24 请你说一下为什么使用key?

    • key值:用于 管理可复用的元素。因为Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快,但是这样也不总是符合实际需求。

    25 说一下你对axios的理解?

    • 什么是axios?

    • axios一般什么时候用?

    • 使用场景?

    • 使用的时候遇到过什么问题?

    26 说一下axios如何解决跨域?

    vue使用反向代理

    27 请描述v-model是什么?以及他的作用?以及他的原理是什么?

    • v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值
    • v-model主要提供了两个功能,view层输入值影响data的属性值,data属性值发生改变会更新view层的数值变化

    28 请描述computed,watch和methods的区别?以及他们的使用场景?

    computed是计算属性,有缓存性,当属性发生变化的时候才会执行,watch是监听,没有缓存,依赖于data,当data发生变化的时候才会执行,methods是方法,没有缓存,只要调用就会执行
    `

    29 请你描述一下你对$nextTick的理解?

    • nextTick是vue里面提供的一个方法,当dom更新循环结束之后执行延迟回调,在修改数据之后可以使用 nextTick,那么我们可以在回调中获取更新后的dom,我们写项目的时候,当时点击按钮要获取一个元素的内容,但是发现了第二次点击的时候才回去到了,后台在网上查了一下,发现是vue异步更新队列的问题,后来是通过$nextTick解决的

    30 说一下你对渐进式框架的理解?

    • 就是主张最少,可以只用一部分功能,而不必使用全部,而且可以跟其他框架结合使用,

      没有多做职责之外的事

    31 说一下你对vue数据双向绑定的理解?

    • 就是利用了Object.defineProperty()这个方法重新定义了对象获取属性get和设置属性set来操作实现的

    32 说一下vue单页面和多页面的区别?

    • 单页面就是组件之间来回跳转,跳转速度快,不需要请求数据 缺点:首屏加载慢,跳转快
    • 多页面就是页面之间来回跳转,跳转速度慢,每次跳转都需要向后台请求数据 缺点:首屏加载快,跳转速度慢

    33 请你说一下什么是vue的过滤器?你在项目中哪些地方使用过过滤器?

    你可以在一个组件的选项中定义本地的过滤器:

    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
    

    或者在创建 Vue 实例之前全局定义过滤器:

    Vue.filter('capitalize', function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    })
    
    new Vue({
      // ...
    })
    

    34 请你说一下你对vue指令的理解?以及他的使用场景? 并描述你在项目中那些地方使用过vue自定义指令?

    自定义指令:使用Vue.directive(id,definition)注册全局自定义指令,使用组件的directives选项注册局部自定义指令。
    钩子函数:
    bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

    inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

    update:第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值,之后被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。

    componentUpdated:被绑定元素所在模板完成一次更新周期时调用。

    unbind:只调用一次, 指令与元素解绑时调用。
    钩子函数的参数:(el, binding, vnode, oldVnode)

    35 请你说一下vue的核心是什么?

    • vue的核心是:数据驱动,组件化开发
      • 数据驱动:
        • mvvm模式
      • 组件化开发:
      • 就是内聚性和藕合度(高内聚,低藕合)

    36 请你说一下vue和jquery的区别?

    • jquery是直接操作DOM的而vue是操作数据的

    • vue做到了数据和视图完全分离,他首先把值和JS对象进行绑定,然后在修改JS对象的值,vue框架就会自动把DOM的值进行更新,对数据进行操作不在需要引用相应的DOM对象,他们通过Vue对象实现数据和视图的相互绑定

    • jquery则是先使用选择器($)来选取Dom对象,然后对Dom对象进行操作(如赋值丶取值丶事件绑定等)

    37 请你说一下你在vue打包项目的时候有没有出现什么问题?你是如何解决的?

    打包后文件无法读取
    在config.js中设置module.exports = {
    publicPath: ‘./’,
    }

    38 请你描述一下react和vue的区别是什么?

    1、react严格上针对的是mvc模式的view层,vue则是mvvm模式。
    2、操作dom的方式不同,vue使用的是指令操作dom,react是通过js进行操作。
    3、数据绑定不同,vue实现的是双向绑定,react的数据流动是单向的。
    4、react中state是不能直接改变的,需要使用setState改变。vue中的state不是必须的,数据主要是由data属性在vue对象中管理的。

    39 请你说一下如何优化vue首屏加载的速度?

    图片懒加载,路由懒加载等等

    40 请你说一下你对slot的理解?

    插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制

    41 请你描述一下封装vue组件的过程?

    就是将重复使用的代码放在组件中,通过传参或插槽的形式实现复用

    42 如果说你在开发项目的时候,后台的接口还没有写完,请问这个时候你一般会怎么做

    模拟数据进行功能的编写

    43 vue如何封装通用组件?

    就是将重复使用的代码放在组件中,通过传参或插槽的形式实现复用

    44 vue常用的ui组件库有哪些?

    element-ui vant

    45 vue常用的修饰符一共有哪些?

    .stop,.once,.prevent等等

    46 请你说一下ajax和axios的区别是什么?

    ajax是原生的异步方法,axios是封装后的方法,比ajax更加简便,同时可以避免地狱回掉问题

    47 vue组件如何适配移动端?

    rem,vw\vh

    48 说一下在vue中如何使用背景图片?

    正常的CSS中的方法

    49 如何解决禁用表单后移动端样式不统一问题?

    input:disabled{
    color:xxx;
    opacity:1;
    //text-fill-color文本填充颜色,只兼容webkit内核
    -webkit-text-fill-color:xxx;
    -webkit-opacity:1;
    font-size:16px;
    }

    50 请你说一下数据双向绑定的原理是什么?

    使用v-model来实现
    Vue 实现 双向数据绑定 主要采用:数据劫持结合“发布-订阅”模式的方式,通过Object.defineProperty()的 set 和 get,在数据变动时发布消息给订阅者触发监听。

    51 什么是请求拦截,什么响应拦截? 拦截点分别是那几个?

    当客户端向服务器发送数据的时候就是请求,当服务器向客户端发送数据就是响应,那么请求拦截和响应拦截分别是在发送数据前进行拦截还有是在接受数据没有渲染到页面时候进行拦截,拦截点2个。

    展开全文
  • 常见vue面试题怎么答疑?vue是一套用于构建用户界面的渐进式JavaScript框架,也是初创项目的首选前端框架。很多企业在招聘前端工程师时都会考察其对vue的了解,接下来小编就给大家分享常见的vue面试题答疑。  1...

      Web前端有哪些求职技巧?常见vue面试题怎么答疑?vue是一套用于构建用户界面的渐进式JavaScript框架,也是初创项目的首选前端框架。很多企业在招聘前端工程师时都会考察其对vue的了解,接下来小编就给大家分享常见的vue面试题答疑。

    image/20191219/58c660635ed03209367fc71b13da47c6.jpeg

      1、如何watch监听一个对象内部的变化?

      如果只是监听obj内的某一个属性变化,可以直接obj.key进行监听。

      watch: {

      'obj.question': function (newQuestion, oldQuestion) {

      this.answer = 'Waiting for you to stop typing...'

      this.debouncedGetAnswer()

      }

      }

      如果对整个obj深层监听

      watch: {

      obj: {

      handler: function (newQuestion, oldQuestion) {

      this.answer = 'Waiting for you to stop typing...'

      this.debouncedGetAnswer()

      },

      deep: true,

      immediate: true

      }

      }

      immediate的作用:当值第一次进行绑定的时候并不会触发watch监听,使用immediate则可以在最初绑定的时候执行。

      2、v-for循环时为什么要加key?

      vue的DOM渲染是虚拟DOM,数据发生变化时,diff算法会只比较更改的部分,如果数据项的顺序被改变,vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

      3、$nextTick有什么作用?

      有些时候在改变数据后立即要对DOM进行操作,此时获取到的DOM仍是获取到的是数据刷新前的DOM,无法满足需要,这个时候就用到了$nextTick。

      4、vue中的$set有什么用?

      向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为vue无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')。

      5、组件间的传值方式有哪些?

      1)provide / inject

      这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

      2)Vue.observable

      让一个对象可响应。vue内部会用它来处理 data 函数返回的对象。

      返回的对象可以直接用于渲染函数和计算属性内,并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景。

      3)$attrs

      包含了父作用域中不作为prop被识别 (且获取) 的特性绑定(class和style除外)。当一个组件没有声明任何prop时,这里会包含所有父作用域的绑定 (class和style除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

      4)$listeners

      包含了父作用域中的 (不含.native修饰器的) v-on事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

      5)props

      6)$emit

      7)eventbus

      8)vuex

      9)$parent/$children/ref

      6、vue生命周期函数有哪些?

      beforeCreate

      created

      beforeMount

      mounted

      beforeUpdate

      updated

      beforeDestroy

      Destroyed

      面试是你走向职场的敲门砖,好的面试可以让你顺利圆梦高薪。如果你想了解更多前端技能技巧或前端求职技巧,可以专业学习一下,让自己理论与实战兼备,快速就业拿高薪!

     

    展开全文
  • 2020年Vue面试题汇总

    万次阅读 多人点赞 2020-02-03 16:46:20
    2020年Vue面试题 Interview ●●●● 作者:@烦恼会解决烦恼 vue核心知识——理论篇 1、对于Vue是一套渐进式框架的理解 渐进式代表的含义是:主张最少。 Vue可能有些方面是不如React,不如Angular,...

     

    2020年Vue面试题

    Interview

    ●●●●

    作者:@烦恼会解决烦恼

     

     

     

    vue核心知识——理论篇

    1、对于Vue是一套渐进式框架的理解

    渐进式代表的含义是:主张最少。

    Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。 
    渐进式的含义,我的理解是:没有多做职责之外的事。

    2、vue.js的两个核心是什么?

    数据驱动和组件化。

    3.vue生命周期钩子函数有哪些?

    总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。具体执行流程查看下图。

    4.vue 的双向绑定的原理是什么?

        vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程:

        我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定:

    1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。

    2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。

    3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。

    流程图如下:

     

     

    vue核心知识——语法篇

     

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

        相同点: 两者都是在判断DOM节点是否要显示。

        不同点:

    a.实现方式: v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。  v-show只是在修改元素的css样式,也就是display的属性值,元素始终在Dom树上。

    b.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;  v-show只是简单的基于css切换;

    c.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素始终被保留;

    d.性能消耗:v-if有更高的切换消耗,不适合做频繁的切换;  v-show有更高的初始渲染消耗,适合做频繁的额切换;

    2、vue常用的修饰符

    a、按键修饰符

    如:.delete(捕获“删除”和”退格“键)      用法上和事件修饰符一样,挂载在v-on:后面,语法:v-on:keyup.xxx=’yyy’  <inputclass = 'aaa' v-model="inputValue" @keyup.delete="onKey"/>

    b、系统修饰符

    可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

    • .ctrl

    • .alt

    • .shift

    • .meta

    c、鼠标按钮修饰符

    • .left

    • .right

    • .middle
      这些修饰符会限制处理函数仅响应特定的鼠标按钮。如:<button @click.middle ="onClick">A</button>  鼠标滚轮单击触发   Click默认是鼠标左键单击

    d、其他修饰符
    
    • .lazy
      在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 ,我们可以添加 lazy 修饰符,从而转变为使用 change事件进行同步:

    <inputv-model.lazy="msg" >
    • .number
      如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 .number修饰符:

    <input v-model.number="age" type="number">

    这通常很有用,因为即使在type="number"时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat()解析,则会返回原始的值。

    • .trim
      如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

    <inputv-model.trim="msg">

     

     

        同样前面都有空格加上.trim后 将前后空格都去掉了。

    3、v-on可以监听多个方法吗?

        可以,例如:@click = "fn(),fn2()"     会依次执行方法

    4、vue中 key 值的作用

        使用key来给每个节点做一个唯一标识

        key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,

    否则vue只会替换其内部属性而不会触发过渡效果。

    5.Vue 组件中 data 为什么必须是函数?

        在 new Vue() 中,data 是可以作为一个对象进行操作的,然而在 component 中,data 只能以函数的形式存在,不能直接将对象赋值给它。

        当data选项是一个函数的时候,每个实例可以维护一份被返回对象的独立的拷贝,这样各个实例中的data不会相互影响,是独立的。

    6、v-for 与 v-if 的优先级

        v-for的优先级比v-if高。

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

        v-if(判断是否隐藏)

        v-for(把数据遍历出来)

        v-bind(绑定属性)

        v-model(实现双向绑定)

     

     

     

    vue核心知识——组件篇

     

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

        第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。

        第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

        第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法。

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

        父组件利用ref属性操作子组件方法。

    父:
    <child ref="childMethod"></child>
    子:
    method: {
      test() {
         alert(1)
      }
    }
    在父组件里调用test即 this.$refs.childMethod.test()

    3.vue组件之间传值

      (1)父组件给子组件传值:

    1.父组件调用子组件的时候动态绑定属性
     <parent :dataList='dataList'></parent>

    2.子组件定义props接收动态绑定的属性props: ['dataList']        

    3.子组件使用数据

      (2)子组件主动获取父子间的属性和方法:

        在子组件中使用this.$parent.属性/this.$parent.方法。

    (3)子组件给父组件传值:

    
     

    一、使用ref属性

    1.父组件调用子组件时绑定属性ref

      <parent :ref='parent'></parent>

    2.在父组件中使用this.$refs.parent.属性/this.$refs.parent.方法

    二、使用$emit方法

    1.子组件调用this.$emit('方法名‘,传值)

    2.父组件通过子组件绑定的'方法名'获取传值。

    (4)vue页面级组件之间传值

        1.使用vue-router通过跳转链接带参数传参。

        2.使用本地缓存localStorge。

        3.使用vuex数据管理传值。

    (5)说说vue的动态组件。

            多个组件通过同一个挂载点进行组件的切换,is的值是哪个组件的名称,那么页面就会显示哪个组件。

        主要考查面试这 component的 is属性。

     

    (6)keep-alive内置组件的作用

        可以让当前组件或者路由不经历创建和销毁,而是进行缓存,凡是被keep-alive组件包裹的组件,除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中

        

     (7)递归组件的用法

        组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。

        首先我们要知道,既然是递归组件,那么一定要有一个结束的条件,否则就会使用组件循环引用,最终出现“max stack size exceeded”的错误,也就是栈溢出。那么,我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时,组件将不会再进行渲染。

     

     

     

    vue核心知识——路由

    1.怎么定义vue-router的动态路由?怎么获取传过来的值?

    动态路由的创建,主要是使用path属性过程中,使用动态路径参数,以冒号开头,如下:

    {

      path: '/details/:id'

      name: 'Details'

      components: Details

    }

    访问details目录下的所有文件,如果details/a,details/b等,都会映射到Details组件上。

     

    当匹配到/details下的路由时,参数值会被设置到this.$route.params下,所以通过这个属性可以获取动态参数

    this.$route.params.id

    2.vue-router有哪几种路由守卫?

    路由守卫为:
    全局守卫:beforeEach
    后置守卫:afterEach
    全局解析守卫:beforeResolve
    路由独享守卫:beforeEnter

     

    3.$route和 $router的区别是什么?

        $router为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。

        $route 是路由信息对象||跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,包含path,params,hash,query,fullPath,matched,name等路由信息参数。

    4.vue-router响应路由参数的变化

    image.png

    • (1)用watch 检测

    • (2)组件内导航钩子函数

      image.png

    5. vue-router 传参

      (1)使用Params:

    • 只能使用name,不能使用path

    • 参数会显示在路径上,刷新不会被清空

       image.png

    (2)使用Query:

    • 参数会显示在路径上,刷新不会被清空

    • name 可以使用path路径

        image.png

     

     

    vue核心知识——vuex

    不用Vuex会带来什么问题?

    一、可维护性会下降,你要想修改数据,你得维护三个地方

    二、可读性会下降,因为一个组件里的数据,你根本就看不出来是从哪来的

    三、增加耦合,大量的上传派发,会让耦合性大大的增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背。

    1.vuex有哪几种属性?

        有五种,分别是 State、 Getter、Mutation 、Action、 Module。

    2、vuex的State特性是?
    答:
    一、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data
    二、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新
    三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中


    3、vuex的Getter特性是?
    答:
    一、getters 可以对State进行计算操作,它就是Store的计算属性
    二、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用
    三、 如果一个状态只在一个组件内使用,是可以不用getters


    4、vuex的Action特性是?
    答:
    一、Action 类似于 mutation,不同在于:
    二、Action 提交的是 mutation,而不是直接变更状态。
    三、Action 可以包含任意异步操作



    5、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
    答:
    一、如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。
    二、如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用,并包装成promise返回,在调用处用async await处理返回的数据。如果不要复用这个请求,那么直接写在vue文件里很方便。



             长按识别关注公众号

     

    展开全文
  • vue常见面试题 面试题.docx
  • vue面试题之三:vue常见面试题①

    千次阅读 2019-09-20 17:26:25
    3. vue常见面试题 1. vue的优缺点 优点:性能好,简单易用,前后端分离,双向数据绑定,单页面应用用户体验好。 缺点:不利于SEO优化。 2. keep-alive的作用是什么? <keep-alive>是Vue的内置组件,能在...

    3. vue常见面试题

    1. vue的优缺点
    • 优点:性能好,简单易用,前后端分离,双向数据绑定,单页面应用用户体验好。
    • 缺点:不利于SEO优化。
    2. keep-alive的作用是什么?
    • <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重负渲染DOM。

      <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

    <keep-alive>
      <component>
        <!-- 该组件将被缓存! -->
      </component
    </keep-alive>
    
    • Props:

      • Include:字符串或正则表达式,只有匹配的组件会被缓存

      • exclude:字符串或正则表达式,任何匹配的组件都不会被缓存

    // 组件 a
    export default {
      name: 'a',
      data(){
      	return {}
      }
    }
    
    <keep-alive include="a">
      <component>
      	<!-- name 为 a 的组件将被缓存!-->
      </component>
    </keep-alive>
    
    <keep-alive exclude="a">
      <component>
        <!-- 除了 name 为 a 的组件都将被缓存 -->
      </component>
    </keep-alive>
    
    • 配合 vue-router 使用

      • router-view 也是一个组件,如果直接被<keep-alive>包裹,所有路径屁哦诶到的视图组件都会被缓存
    <keep-alive>
      <router-view>
        <!-- 所有路径匹配到的视图组件都回呗缓存!-->
      </router-view>
    </keep-alive>
    
    • 如果指向 <router-view> 里面的某个组件被缓存,需要增加 router.meta 属性
    const router = new VueRouter({
      routes: [
        {
          path: '/home',
          name: 'Home',
          component: Home,
          meta: {
          	keepAlive: true // 需要被缓存 false:不需要被缓存
        	}
        }
      ]
    })
    
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive">
        <!-- 被缓存的试图组件!-->
      </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive">
      <!-- 不被缓存的视图组件!-->
    </router-view>
    
    3. vue中如何获取DOM元素
    • 通过给元素绑定ref=“XXX”,

    • 通过this.$refs.XXX 或者 this.$refs[‘XXX’]来获取

      * 注意:vue中操作dom需要谨慎,尤其是添加或者删除dom的时候,
    4. vue-loader是什么?使用它的用途有哪些?
    • vue-loader是解析 .vue 文件的一个加载器,将template/js/style转换成js模块。
    • js可以使用ES6语法,style样式可以用scss或者less,template 可以加jade等。
    5. Vue 中为什么使用key?
    • 用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点,可以高效的更新虚拟DOM。
    6. axios解决跨域
      1. 配置 BaseUrl, 配置访问的URL前缀。
    import Vue from 'vue'
    import App from './App'
    import Axios from 'axios'
    
    Axios.defaults.baseURL = '/api'
    // 每次发送请求都回带一个 /api 的前缀。
    
      1. 配置代理,在src文件夹下创建文件 vue.config.js文件。添加一下内容。
    module.exports = {
      outputDir: 'dist', // build 输出目录
      assetsDir: 'assets', // 静态资源目录
      lintOnSave: false, // 是否开启eslint
      devServer: {
        open: true, //是否自动弹出浏览器页面
        host: 'localhost',
        port: '8080',
        https: false, // 是否使用 HTTPS协议
        hotOnly: false, // 是否开启热更新
        proxy: {
          '/api': {
            target: 'https://www.xxx.com/api', // api服务器的地址
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        }
      }
    }
    
      1. 修改请求的URL,
    // 假设请求地址为 https://www.xxx.com/api/deatils/info
    this.$axios.get('/details/info')
      .then()
      .catch()
    
    
    7. $nextTick() 的使用
    • this.$nextTick()将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用他,然后等待dom更新。他跟全局的Vue.nextTick一样,不同的是回调的this自动绑定到调用他的实例上。
    <template>
      <div>
        <div ref="wrap">{{value}}</div>
        <button @click="clickBtn">点击改变</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'home',
      components: {
      },
      data() {
        return {
          value: '祝你面试成功'
        }
      },
      created() {
        console.log(`111: ${this.$refs['wrap']}`)
        this.$nextTick(() => {
          console.log(`222: ${this.$refs['wrap']}`)
        })
      },
      mounted() {
        console.log(`333: ${this.$refs['wrap']}`)
        this.$nextTick(() => {
          console.log(`444: ${this.$refs['wrap']}`)
        })
      },
      methods: {
        clickBtn() {
          this.value = '升职高薪'
          console.log(this.$refs['wrap'].innerText)
          this.$nextTick(() => {
            console.log(this.$refs['wrap'].innerText)
          })
        }
      }
    }
    </script>
    

    image-20190920150934386.png

    • 根据打印顺序可以看到,在created()执行的时候DOM并未进行任何渲染,而此时进行的DOM操作没作用,而在created()里面使用this.$nextTick()可以等待DOM生成以后再来获取dom对象。

    • 根据上面的放马点击栗子可以看出,在方法里直接打印的话,由于dom元素还没有更新,因此打印出来的还是为改变之前的值,而通过this.$nextTick()获取到的值为dom更新之后的值。

    • this.$nextTick()在页面交互,尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势。

    8. vue组件中的data为什么必须是一个函数?

    如果不用函数的话,实例化的组件是共享同样的一个data对象,当你修改一个属性的时候,data也恢复阿生改变。

    当data是一个函数的时候,每个实例的data属性都是独立的,不会相互影响。

    9. Vue中双向数据绑定是如何实现的?(vue双向数据绑定原理)

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

    // Object.defineProperty()方法
    let obj = {}
    let name
    Obejct.defineProperty(obj,'name',{
      get: function() {
        console.log('获取')
        return val
      }
      set: function(newVal) {
      	console.log('设置')
    	}
    })
    obj.name = 'arthas' // 在给obj设置name属性的时候,触发了set这个方法
    const val = obj.name // 在得到obj的name属性,会触发get方法。
    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <div id="test"></div>
      <input type="text" id="text">
      <script>
        const obj = {}
        const test = document.querySelector('#test')
        const text = document.querySelector('#text')
        Object.defineProperty(obj,'name',{
          get: function() {
            return val
          },
          set: function(newVal) {
            text.value = newVal
          }
        })
        text.addEventListener('input', function(e){
          // 给obj的name属性赋值,进而触发该属性的set方法
          obj.name = e.target.value
        })
        obj.name = 'arthas' // 再给obj设置name属性的时候,触发了set这个
        test.innerHTML = obj.name // 调用obj的get属性获取name
      </script>
    </body>
    </html>
    

    更深层次的点击链接查看

    以上是经过参考很多同行分享与官方文档,汇总的一份总结,如有不对,请指出,最后感谢大家观看,求点赞,求分享,求评论,求打赏~~

    展开全文
  • vue常见面试题

    2021-01-07 04:40:30
    vue面试题汇集 vue面试题汇总二 vue面试总结三 vue面试题汇总四 vue面试题汇总五 vue面试题汇总六 axios是什么?怎么使用?描述使用它来实现登录功能的流程 1.axios是基于promise使用浏览器好node.js的一个http客服...
  • vue面试题

    2021-01-26 23:28:52
    98道经典Vue面试题总结 百度前端面试题 你要的Vue面试题都在这里 常在vue中游走,多问几个为什么 20+Vue面试题整理 Vue2.0八——知识点整理 58道Vue常见面试题集锦 Vue常见面试题总结 一次关于 Vue 的自我模拟面试 ...
  • vue面试题.pdf

    2021-02-23 16:48:56
    vue常见面试题总结
  • 常见的前端vue面试题

    2021-03-08 10:27:59
    常见的前端vue面试题 1、请讲述下VUE的MVVM的理解? MVVM 是 Model-View-ViewModel的缩写,即将数据模型与数据表现层通过数据驱动进行分离,从而只需要关系数据模型的开发,而不需要考虑页面的表现,具体说来如下: ...
  • 35道常见的前端vue面试题

    千次阅读 2021-03-06 00:04:32
    来源 | https://segmentfault.com/a/1190000021936876今天这篇文章给大家分享一些常见的前端vue面试题。有一定的参考价值,有需要的朋友可以参考一下...
  • Vue 常见技术面试题

    2021-01-08 11:55:41
    Vue拦截器vuex状态管理vue生命周期、常见的生命周期函数用过哪些vue ui框架vue中的router和route的区别计算属性和侦听属性的区别vue里面delete跟vue.delete有什么区别?如果一个空白页面使用弹窗this,那么this会弹...
  • vue常见面试题

    2021-04-13 14:43:23
    vue常见面试题 1.vue优点? 答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb; 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习; 双向数据绑定:保留了angular的特点,...
  • 常见vue面试题

    2019-04-15 16:06:00
    2、路由常见的钩子函数 berforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 使用的场景 beforeRouteEnter:当路由进入之前:登陆验证、热力图的记录、 beforeRouteUpdate:当路由进行更新的时候。如果当前路由...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,598
精华内容 3,039
关键字:

常见vue面试题

vue 订阅