VUE面试题

一、vue 生命周期

先看一张图片,图片来源于官网:https://cn.vuejs.org/v2/guide/instance.html

以上钩子详细:(只解释了几个主要的)

1.beforeCreate

在页面被加载的时候首先会创建一个Vue的实例,并且初始化该实例,在实例初始化之后,此时被调用的生命周期钩子叫做:beforeCreate,这个时候数据的观测和事件还没有被调用(特就是说此时还读取不到data里面的数据和实力内的方法)

2.created

当vue实例初始化后,实例创建完成后立即调用的是:created,此时数据观测和方法的运算,watch/event 事件回调都已经配置完成。(也就是说此时能读取data的数据和方法了)

  • 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,因为此时的dom还没有挂载,对dom操作是没有用的,只有放在nextTick的回调里面才会被执行有效

场景:页面需求数据的ajax请求,初始化操作

3.beforeMount

实例创建完成后,即将被挂载,挂载之前立即调用beforeMount该钩子在服务器端渲染期间不被调用。),运行执行render

4.mounted

这时候创建完成后所有el都挂载后执行

场景:挂载元素内dom节点的获取,对dom的操作等

5.beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。

6.destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

更多新增的钩子见官网:https://cn.vuejs.org/v2/api/#errorCaptured

7.beforeUpdate:数据更新时调用,但不进行DOM重新渲染,在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理


8.updated:这个状态下数据更新并且DOM重新渲染,当这个生命周期函数被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行

场景:任何数据的更新,如果要做统一的业务逻辑处理

 

 

vue 269个知识点(面试题)https://juejin.cn/post/6844903876231954446

 

很全面的vue面试题总结

VUE面试题

  1. v-show 与 v-if 区别
  2. 动态绑定class的方法
  3. 计算属性和 watch 的区别
  4. 怎样理解单向数据流
  5. keep-alive
  6. 自定义组件的语法糖 v-model 是怎样实现的
  7. 生命周期
  8. 组件通信
  9. 路由跳转
  10. vue-router 有哪几种导航钩子
  11. Vue.js 2.x 双向绑定原理
  12. 什么是 MVVM,与 MVC 有什么区别
  13. vuex
  14. this.$nextTick()
  15. vue的原理
  16. 理解Vue中的Render渲染函数
  17. slot插槽

v-show 与 v-if 区别

  1. v-hsow和v-if的区别:
    v-show是css切换,v-if是完整的销毁和重新创建。
  2. 使用
    频繁切换时用v-show,运行时较少改变时用v-if
  3. v-if=‘false’ v-if是条件渲染,当false的时候不会渲染

绑定 class 的数组用法

  • 对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
  • 数组方法v-bind:class="[class1, class2]"
  • 行内 v-bind:style="{color: color, fontSize: fontSize+'px' }"

计算属性和 watch 的区别

计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。
所以区别来源于用法,只是需要动态值,那就用计算属性;需要知道值的改变后执行业务逻辑,才用 watch,用反或混用虽然可行,但都是不正确的用法。
说出一下区别会加分
computed 是一个对象时,它有哪些选项?
computed 和 methods 有什么区别?
computed 是否能依赖其它组件的数据?
watch 是一个对象时,它有哪些选项?

  1. 有get和set两个选项
  2. methods是一个方法,它可以接受参数,而computed不能,computed是可以缓存的,methods不会。
  3. computed可以依赖其他computed,甚至是其他组件的data
  4. watch 配置
    handler
    deep 是否深度
    immeditate 是否立即执行

总结

当有一些数据需要随着另外一些数据变化时,建议使用computed。
当有一个通用的响应数据变化的时候,要执行一些业务逻辑或异步操作的时候建议使用watcher

事件修饰符

  • 绑定一个原生的click事件, 加native,
  • 其他事件修饰符

stop prevent self

  • 组合键

click.ctrl.exact 只有ctrl被按下的时候才触发

组件中 data 为什么是函数

为什么组件中的 data 必须是一个函数,然后 return 一个对象,而 new Vue 实例里,data 可以直接是一个对象?

因为组件是用来复用的,JS 里对象是引用关系,这样作用域没有隔离,而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。

keep-alive

https://cn.vuejs.org/v2/guide...

自定义组件的语法糖 v-model 是怎样实现的

https://www.cnblogs.com/attac...
根据官方文档介绍,v-model本质上就是语法糖,即利用v-model绑定数据后,其实就是既绑定了数据,又添加了一个input事件监听,如下:

clipboard.png

怎样理解单向数据流

这个概念出现在组件通信。父组件是通过 prop 把数据传递到子组件的,但是这个 prop 只能由父组件修改,子组件不能修改,否则会报错。子组件想修改时,只能通过 $emit 派发一个自定义事件,父组件接收到后,由父组件修改。
一般来说,对于子组件想要更改父组件状态的场景,可以有两种方案:
在子组件的 data 中拷贝一份 prop,data 是可以修改的,但 prop 不能:

export default {
  props: {
    value: String
  },
  data () {
    return {
      currentValue: this.value
    }
  }
}

如果是对 prop 值的转换,可以使用计算属性:

export default {
  props: ['size'],
  computed: {
    normalizedSize: function () {
      return this.size.trim().toLowerCase();
    }
  }
}

生命周期

  • 创建前后 beforeCreate/created

在beforeCreate 阶段,vue实例的挂载元素el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象有了,el还没有。

  • 载入前后 beforeMount/mounted

在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前未虚拟的DOM节点,data尚未替换。
在mounted阶段,vue实例挂载完成,data成功渲染。

  • 更新前后 beforeUpdate/updated

当data变化时,会触发beforeUpdate和updated方法。这两个不常用,不推荐使用。

  • 销毁前后beforeDestory/destoryed

beforeDestory是在vue实例销毁前触发,一般在这里要通过removeEventListener解除手动绑定的事件。实例销毁后,触发的destroyed。

组件间的通信

  1. 父子 props/event parent/parent/children ref provide/inject
  2. 兄弟 bus vuex
  3. 跨级 bus vuex provide.inject

路由的跳转方式

一般有两种

  1. <router-link to='home'> router-link标签会渲染为<a>标签,咋填template中的跳转都是这种;
  2. 另一种是编程是导航 也就是通过js跳转 比如 router.push('/home')

Vue.js 2.x 双向绑定原理

这个问题几乎是面试必问的,回答也是有深有浅。基本上要知道核心的 API 是通过 Object.defineProperty() 来劫持各个属性的 setter / getter,在数据变动时发布消息给订阅者,触发相应的监听回调,这也是为什么 Vue.js 2.x 不支持 IE8 的原因(IE 8 不支持此 API,且无法通过 polyfill 实现)。
https://cn.vuejs.org/v2/guide...

什么是 MVVM,与 MVC 有什么区别

http://www.ruanyifeng.com/blo...

nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后,立即使用这个回调

  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值