本篇文章给大家谈谈vue性能优化面试题，以及vue性能优化最佳实践对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、前端Vue面试必过题 优选(钩子函数)
• 2、VUE基础面试题（3）
• 3、前端vue面试题分享（附答案）
• 4、vue面试题之三：vue常见面试题①
• 5、2021-11-10.Vue前端面试题及答案
• 6、vue2和vue3区别面试题

前端Vue面试必过题 优选(钩子函数)

①自定义指令是什么？以及自定义指令的使用场景

    在Vue中，有很多内置指令，但是这些指令只能满足我们最基础的使用，当我们在实际项目中遇到了必须要对DOM进行操作的逻辑时，我们就用到了自定义指令

②自定义指令的钩子函数

    bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

    inserted：被绑定元素插入父节点时调用 

    update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

    componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

    unbind：只调用一次，指令与元素解绑时调用。

    在父组件给子组件传值的时候，给子组件加一个判断，如果数据没有请求到就不渲染当前组件

    vue-router传参两种方式：params和query

方法一：

    query 方式传参和接收参数

     传参：

     接收参数：

       this.$route.query.id

    传参是this.$router,接收参数是this.$route

两者区别：

        $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

        $route为当前router跳转对象，里面可以获取name、path、query、params等

方法二：

     params方式传参和接收参数

    传参：

接收参数: this.$route.params.id

query和oarams的区别：

    query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示

    全局导航钩子：beforeEach、afterEach

    组件内导航：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

    独享导航守卫：beforeEnter

VUE基础面试题（3）

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。这里没有 nextTick 来访问 Dom

在挂载开始之前被调用：相关的 render 函数首次被调用。

在挂载完成后发生，在当前阶段，真实的 Dom 挂载完毕，数据完成双向绑定，可以访问到 Dom 节点

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁（patch）之前。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程

发生在更新完成之后，当前阶段组件 Dom 已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新，该钩子在服务器端渲染期间不被调用。

实例销毁之前调用。在这一步，实例仍然完全可用。我们可以在这时进行善后收尾工作，比如清除计时器。

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

可以在钩子函数 created、beforeMount、mounted 中进行异步请求，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。

能更快获取到服务端数据，减少页面 loading 时间；

ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

Vue2--------------vue3

beforeCreate = setup()

created = setup()

beforeMount = onBeforeMount

mounted = onMounted

beforeUpdate = onBeforeUpdate

updated = onUpdated

beforeDestroy = onBeforeUnmount

destroyed = onUnmounted

activated = onActivated

deactivated = onDeactivated

errorCaptured = onErrorCaptured

前端vue面试题分享（附答案）

本篇文章给大家分享一些常见的前端vue面试题，有一定的参考价值，希望对大家有所帮助。

如下，判断to.path当前将要进入的路径是否为登录或注册，如果是就执行next()，展示当前界面。如果不是，就弹出alert，然后移至登录界面。

这样就可实现，用户在未登录状态下，展示的一直是登录界面。

持续更新中......

vue面试题之三：vue常见面试题①

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

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

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

更深层次的点击链接查看

2021-11-10.Vue前端面试题及答案

const vm = new Vue({

...

methods: {

handlerEvent(event) {

console.log(event) // 鼠标点击时，获取到事件对象

}

}

})

1、如果只是事件函数的调用，函数名称后面不要添加括号

好处：函数执行时，第一个形式参数会被系统自动注入

一个事件对象，提供给函数使用

@click="handlerEvent"

2、如果事件函数调用执行时，需要传递参数，函数名称后面

必须添加括号，如果要使用事件对象，就必须手工注入(固定语法)

@click="handlerEvent($event)"

事件冒泡是JS语法中的一种事件触发机制，描述的是目标元素上的事件一旦发生，就会根据DOM节点结构，将事件逐步依次触发到父节点上的一种事件机制

原生JS中通过兼容性语法阻止事件冒泡

event.stopPropagation?event.stopPropagation():event.cancelBubble=true

Vue中对于事件冒泡的处理进行了封装，提供了事件修饰符完成阻止冒泡行为

固定语法：标签对象的事件属性上，添加 @事件对象.stop="处理函数"

.self事件修饰符的作用，就是让事件的触发方式只能由当前标签上发生的事件触发！

.lazy作为表单修饰符，经常用在表单元素上，用于将表单数据的同步机制延迟到表单元素失去焦点时再进行同步，节省资源、提高整体效率！

Vue数据双向绑定的特性，指代的是Vue实例中的数据和网页视图中的数据绑定，实例中数据的更新会直接影响视图的渲染展示，视图中的数据更新会自动同步到实例中的数据，这样的操作机制就是数据双向绑定机制；Vue底层主要是通过Object.defineProperty()数据劫持的操作方式完成的！

数据劫持本质上就是一种变量的高级声明方式，通过数据劫持的语法声明的变量，我们可以针对变量数据的查询、编辑进行监听，随时根据变量的使用情况进行功能的添加，如数据的双向绑定，完成数据的自动同步和自动渲染！

vue2和vue3区别面试题

1、vue2相较vue3代码可读性比较差。vue2中选项API格式的代码的可读性较差，当需要实现的某一个功能涉及到多个属性的时候，就会出现在

props中接收参数

在data中定义变量

在watch中监听变化

在computed中定义需要使用到的计算属性

在methods中定义事件响应方法

对相同数据操作的代码会被分隔到各个属性内，不利于阅读代码。而vue3的组合式API对这一缺点进行了优化，使用组合式API能够将我们想要关联的代码放到一个组合里，增加了代码的可读性和可维护性。

2、vue2使用的API中使我们的代码大量的使用了this，不利于代码逻辑的复用。而vue3使用的组合式API在涉及到跨组件之间提取，复用逻辑时，会非常的灵活。且Vue3中的composition API对类型推导很友好，对于TS的兼容性更高。

3、Vue2需要对每个对象的每个属性进行遍历，当对象的属性还是对象时，需要递归监听，影响性能。对于已创建的实例不允许动态添加根级别的响应式属性，不具备监听数组的能力。而vue3可以监听原生数组并监听对象属性的动态添加和删除。

vue性能优化面试题的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue性能优化最佳实践、vue性能优化面试题的信息别忘了在本站进行查找喔。