【前端--面试】常见面试题（三）—— Vue

最新推荐文章于 2025-03-21 11:25:59 发布

原创最新推荐文章于 2025-03-21 11:25:59 发布 · 210 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

面试

知识点总结

本文深入探讨Vue.js的双向数据绑定原理，介绍如何通过Object.defineProperty实现数据劫持和发布-订阅模式。同时，讲解vue-router的history模式消除URL中的#。对比v-if和v-show在DOM操作上的差异，并解析$router和$route的区别及用法。此外，详述$nextTick在更新DOM时的作用。进一步，解释Vue组件中data为何必须为函数，以确保数据隔离。最后，展示如何自定义指令和利用keep-alive进行组件缓存，提升应用性能。

Vue的双向绑定数据的原理

采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

Vue 如何去除url中的

vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 #。如果不想使用 #，可以使用 vue-router 的另一种模式 history。

new Router({
  mode: 'history',
  routes: [ ]
})

v-if 和 v-show 区别

使用了 v-if 的时候，如果值为 false ，那么页面将不会有这个 html 标签生成。v-show 则是不管值为 true 还是 false ，html 元素都会存在，只是 CSS 中的 display 显示或隐藏。

route和route和route和router的区别

$router 为 VueRouter 实例，想要导航到不同 URL，则使用 $r o u t e r . p u s h 方法$ route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等。

NextTick的作用

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

Vue 组件 data 为什么必须是函数

因为js本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，就不会相互影响了。

Vue 中怎么自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

在局部注册：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

keep-alive 的作用

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染，还可以使用API提供的props，实现组件的动态缓存

<keep-alive>
  <component>
    <!-- 该组件将被缓存！ -->
  </component>
</keep-alive>

Vue 的核心是什么

数据驱动组件系统

vue 等单页面应用的优缺点

优点：
良好的交互体验
良好的前后端工作分离模式
减轻服务器压力

缺点：
SEO难度较高
前进、后退管理
初次加载耗时多

标签

#vue.js #javascript #面试