vue最新面试题

九州县令

已于 2022-06-02 09:42:27 修改

阅读量216

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-05-27 19:05:58 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48201140/article/details/125008855

版权

vue 专栏收录该内容

10 篇文章

订阅专栏

1、vue的生命周期以及页面初次加载会触发哪些钩子

根组件实例：8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)
组件实例：8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)
全局路由钩子：2个 (beforeEach、afterEach)
组件路由钩子：3个 (beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)
指令的周期： 5个 (bind、inserted、update、componentUpdated、unbind)
beforeRouteEnter的next所对应的周期
nextTick所对应的周期

如果有子组建

父beforeCreate --> 父created --> 父beforeMount --> 子beforeCreate --> 子created --> 子beforeMount --> 子mounted --> 父mounted

2、vue中data为什么必须是一个函数

防止组件在重复使用时，数据互相干扰，使用函数将产生新作用域，所以同一个组件在不同位置被使用时，不适用同一份数据

3、v-for里面key的作用

key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度，具有唯一性
原理: 在数据发生变化，vue是先根据真实DOM生成一颗 virtual DOM ，当 virtual DOM 某个节点的数据改变后会生成一个新的 Vnode ，然后 Vnode 和 oldVnode 作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使 oldVnode 的值为 Vnode ，来实现更新节点。
（1）先去同级比较，然后再去比较子节点
（2）先去判断一方有子节点一方没有子节点的情况
（3）比较都有子节点的情况
（4）递归比较子节点

4、vue实现数据双向绑定的原理

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。即数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变

5、vue-router有几种模式

hash模式地址栏URL中的#符号，不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

history模式利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法，这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。history模式，会出现404 的情况，需要后台配置。

6、route和router的区别及router生命周期

$r o u t e r 是 V u e R o u t e r 的实例，在 s c r i p t 标签中想要导航到不同的 U R L, 使用 r o u t e r . p u s h 方法。返回上一个历史 h i s t o r y 用$ router.to(-1)
$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

router生命周期
router异步解析执行，此时router在 resolve 完之前一直处于等待中。
三个参数：
to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子

7、Keep-live 生命周期钩子

在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated
activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用
deactivated：组件被停用(离开路由)时调用

8、vue组件通信的方法

1.父组件向子组件传值  子组件通过props接收
2.子组件向父组件传值  子组件通过$emit传值
3.vuex
4.localStorage
5.provide/inject  主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。
provide: { //父组件传值
    name: '数据'
}
inject: ['name'] //子组建接收
6.$emit/$on通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级
Event.$emit('方法', this.name) 传值
Event.$on('data-a',name => {
	     this.name = name;  //箭头函数内部不会产生新的this，这边如果不用=>,this指代Event
	 })  取值

9、vue中如何自定义指令

全局注册注册主要是用过Vue.directive方法进行注册
Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()  // 页面加载完成之后自动让输入框获取到焦点的小功能
  }
})
局部注册通过在组件options选项中设置directive属性
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
    }
  }
}

10、watch 和 computed 的区别

computed是监听多个值来改变一个值，而watch是一个值来影响一个值
computed具有缓存性
computed在computed中定义，watch的数据在data定义

wactch：
1.不支持缓存。数据变化直接触发操作；
2.watch支持异步；
3.监听的函数接收两个参数（newValue, oldValue）
当一个属性发生变化时，需要执行对应的操作；一对多；
监听数据必须是data中声明过或者父组件传递过来的props中的数据。
页面第一次渲染时候，watch函数是不会执行的，只有当数据变化时才会触发操作。函数有两个参数，
deep 控制是否要看这个对象里面的属性变化，但是其无法监听到数组的变动和对象的新增
immediate 控制是否在第一次渲染是执行这个函数
举例场景：现在有父组件P，和他的2个子组件C1，C2。C1改变父组件P的data，并且需要把这个值传给C2，这时候发现C2组件的data值没有变换还是最初父组件P传的值，考虑在组件C2中用watch来解决
案例：异步操作开销巨大的操作，比如远程服务获取搜索列表。

computer：
1.支持缓存，只有依赖数据发生改变，才会重新进行计算
2.不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
比如：购物车商场总数计算