Mr.Song

Vue面试题

Mr.Song2020年8月7日
大约 7 分钟

Vue2.x 生命周期

  1. 有哪些生命周期
    系统自带：
    beforeCreate
    created
    beforeMount
    mounted
    beforeUpdate
    updated
    beforeDestroy
    destroyed
  2. 一旦进入到页面或者组件，会执行哪些生命周期，顺序。
    beforeCreate
    created
    beforeMount
    mounted
  3. 在哪个阶段有el，在哪个阶段有data
    beforeCreate 啥也没有
    created 有data没有el
    beforeMount 有data没有el
    mounted 都有
  4. 如果加入了keep-alive会多俩个生命周期
    activated、deactivated
  5. 如果加入了keep-alive，第一次进入组件会执行哪些生命？
    beforeCreate
    created
    beforeMount
    mounted
    activated
  6. 如果加入了keep-alive，第二次或者第N次进入组件会执行哪些生命周期？
    只执行一个生命周期：activated

Vue父子组件生命周期执行顺序是什么？

  1. 加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
  2. 销毁过程
    父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

自定义指令生命周期

bind：绑定时，自定义指令绑定于相应dom时执行（类似于vue生命周期的beforeMount）
inserted：指令所在dom添加到父节点时执行，渲染时（类似于以前的mounted）
update：更新时，不保证更新完成（指令所在组件有更新时执行），不保证该更新和当前指令所在dom有关
componentUpdated：更新完成时，指令所在组件更新完成（类似于以前vue生命周期的updated）
unbind：解除绑定，类似于beforeDestroy

谈谈你对keep-alive的了解

  1. 是什么
    vue系统自带的一个组件，功能：是来缓存组件的。===》提升性能
  2. 使用场景
    就是来缓存组件，提升项目的性能。具体实现比如：首页进入到详情页，如果用户在首页每次点击都是相同的，那么详情页就没必要请求N次了，直接缓存起来就可以了，当然如果点击的不是同一个，那么就直接请求。

v-if和v-show区别

  1. 展示形式不同
    v-if是 创建一个dom节点
    v-show 是display:none 、 block
  2. 使用场景不同
    初次加载v-if要比v-show好，页面不会做加载盒子
    频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小

ref是什么？

来获取dom的

nextTick是什么?

获取更新后的dom内容

scoped原理

  1. 作用：让样式在本组件中生效，不影响其他组件。
  2. 原理：给节点新增自定义属性，然后css根据属性选择器添加样式。

computed、methods、watch有什么区别？

  1. computed vs methods区别
    computed是有缓存的
    methods没有缓存
  2. computed vs watch区别
    watch是监听，数据或者路由发生了改变才可以响应（执行）
    computed计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回
    watch是当前监听到数据改变了，才会执行内部代码

props和data优先级谁高？

props ===> methods ===> data ===> computed ===>watch

Vuex有哪些属性？

state、getters、mutations、actions、modules
state 类似于组件中data，存放数据
getters 类型于组件中computed
mutations 类似于组件中methods
actions 提交mutations的
modules 把以上4个属性再细分，让仓库更好管理

Vuex是单向数据流还是双向数据流？

Vuex是单向数据流

Vuex中的mutaitons和actions区别

mutaitons : 都是同步事物
actions : 可以包含任意异步操作

介绍一下SPA以及SPA有什么缺点

SPA是什么？单页面应用
缺点：

  1. SEO优化不好
  2. 性能不是特别好

路由导航守卫有哪些

全局、路由独享、组件内

  1. 全局 beforeEach、beforeResolve、afterEach
  2. 路由独享 beforeEnter
  3. 组件内 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

使用场景：判断是否登录，如果登录就next否则就跳转到登录页面

Vue动态路由

场景：详情页(文章、商品) router.js配置：

{
  path: "/list",
  name: "List",
  children:[
    {
      path:"/list/:id",
      name:'Details',
      component: () =>
        import("../views/Details.vue"),
    }
  ],
  component: () =>
    import("../views/List.vue"),
}

双向绑定原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
通过Object.defineProperty()来实现数据劫持的。

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

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

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

什么是虚拟DOM

其实就是数据，把dom变成数据结构。

diff算法

利用diff算法可以更多提升dom之间对比的性能（采用虚拟dom数据进行对比）。

讲一下MVVM

M就是data的model层
V就是view视图层
VM就是理解为v-model原理实现，通过view更新model

$nextTick()使用情景

created 和 mounted 阶段，如果需要操作渲染后的视图，要使用 nextTick 方法。因为mounted不会承诺其子组件也挂载完毕 通过v-show切换到输入框后，自动聚焦用得到。
点击获取某个元素的style样式时用得到

Vue.nextTick(callback) 使用原理

原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。
当你设置 vm.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

vue项目实现路由按需加载(路由懒加载)的3种方式

  • 1 . vue异步组件技术 ==== 异步加载
 path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) }
  • 2.组件懒加载方案二 路由懒加载(使用import)
 const 组件名=() => import('组件路径');
  • 3.webpack提供的require.ensure()
 { path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') },

VUE 自定义组件双向绑定的三种实现方式

  1. 父组件使用v-model绑定，子组件props接收参数，$emit触发input事件传值
  2. 父组件使用v-model绑定，子组件props接收参数，参数名称可以自定义，$emit触发方法传值，方法名称可以 自定义，通过model属性将prop参数名和事件名进行关联
  3. 父组件使用:name.sync绑定，子组件props接收参数名称为name，$emit触发update:name事件传值，这三部的name名称可以自定义，但需保持一致

vue中的三种插槽

具名插槽

// 组件
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
// 使用
<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>

作用域插槽

<span>
  <!-- 完整 v-bind:user 下面是简写形式 -->
  <slot :user="user">
    {{ user.lastName }}
  </slot>
</span>

<current-user>
  <template slot-scope="slotProp">
    {{ slotProp.user.firstName }}
  </template>
</current-user>

<!-- 省略默认插槽名字 -->
<current-user v-slot="slotProp">
  {{ slotProp.user.firstName }}
</current-user>

<!-- 显示调用默认插槽名字 -->
<current-user v-slot:default="slotProp">
  {{ slotProp.user.firstName }}
</current-user>

动态插槽

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

与 v-on 和 v-bind 类似，v-slot 也有一个简写，即使用 # 代替 v-slot。例如， v-slot:header 简写成 #header

0  字
评论
Powered by Waline v2.6.2