vue高频面试题汇总

文章目录

• • • vue在生命周期的做法和生命周期的不同阶段?
    • 为什么vue组件中data必须是一个函数?
    • vue中v-if和v-show有什么区别呢?
    • $nextTick是什么？
    • v-for key的作用
    • 组件传值
    • 公共事件修饰符
• • *

vue在生命周期的做法和生命周期的不同阶段?

总共分为8在创建阶段之前/之后,在装货前/后,在更新/后,在破坏/后。

建前/后： 在beforeCreate阶段，vue山元素实例el和数据对象data都为undefined尚未初始化。created阶段，vue数据对象的实例data有了，el为undefined尚未初始化。

载入前/后：在beforeMount阶段，vue实例的$el和data所有初始化,但仍然虚拟安装之前dom节点，data.message没有更换。mounted阶段，vue实例安装完成,data.message成功地呈现。

更新前/后：当data当改变时,它将触发beforeUpdate和updated方法

销毁前/执行后:destroy方法后,data不会再触发周期函数的变化,表明vue实例已经解除武装事件倾听和沟通dom约束力,但dom结构仍然存在

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

对象是一个引用类型,当重用组件,由于数据都指向同一个对象data对象,当修改组件data在其他可重用的组件data同时将修改;Object如果引用地址是不同的,这个问题将不会发生。

vue中v-if和v-show有什么区别呢?

v-if和v-show看起来相似,但当条件是不正确的,相应的标签元素是不可见的,但有一个区别这两个选项:

1. v-if当切换条件,适当标签将创建和销毁v-show在初始化期间只加载一次,因此v-if相对高于成本v-show大。
2. v-if它是惰性气体条件为真时,只显示标签;v-if不会渲染标签。v-show无论初始条件是真是假,标签将会呈现,它只做简单的事情CSS切换。

$nextTick是什么？

vue实现响应不是关于变化的数据dom立即改变,但遵循一个特定的策略dom更新。

nextTick 是在下次 DOM 更新循环结束后,执行延迟修改数据后回调并使用它nextTick,你可以获得更新 DOM

v-for key的作用

• 当Vue用 v-for 更新的列表呈现的元素,它默认为“重用”政策。Vue也不会移动DOM而不是简单地重用每个元素来匹配数据项的变化,确保它显示每个元素,呈现在一个特定的索引。

• 为了给Vue一个提示,以便它可以跟踪每个节点的身份重用和重新排序现有元素,您需要为每个项目提供一个惟一的标识符 key 属性。key属性只能的类型 string或者number类型。

• key 主要是用于特殊的属性Vue的虚拟DOM算法,旧的和新的nodes在比较过程中识别VNodes如果不习惯 key，Vue将使用一个方法来减少动态元素,尽可能尝试修复它吗/一个算法重用相同类型的元素。key它将基于key这些变化将重新排列元素的顺序和删除它们 key 不存在的元素。

• • *

组件传值

父传子

通过props传递

父组件： 

子组件: props[value],接收数据,验收后,使用和data使用中定义的数据是相同的

子传父

绑定一个定制事件父组件的子组件和子组件$emit()触发这个事件并传递一个值。

父组件： 

子组件: this.$emit(receive,传输数据)

哥哥组件的价值转移

通过中央通信 let bus = new Vue()

A：methods :{ 函数{bus.$emit(定制事件名称,数据)} 发送

B：created （）{bus.$on(‘A发送自定义事件名称的函数)} 执行数据接收

通过vuex

A：methods :{ 函数{bus.$emit(定制事件名称,数据)} 发送

B：created （）{bus.$on(‘A发送自定义事件名称的函数)} 执行数据接收

公共事件修饰符

• .stop:阻止冒泡
• .prevent:块的默认行为
• .self:只有绑定元素本身触发
• .once: 2.1.4 新增,只触发一次
• passive: 2.3.0 新增,滚动事件的默认行为 (即滚动行为) 将立即触发,不能和 .prevent 一起使用
• .sync 修饰符

从 2.3.0 起vue重新.sync修饰符,但这一次它只存在在编译时语法糖。 v-on 班长。

将扩展为:

当子组件需要被更新 foo 它需要显式值时触发一个更新事件:
this.$emit(update:foo, newValue)