vue面试题

本文详细介绍了Vue中的关键概念,包括页面加载钩子、DOM渲染时机、框架优点、双向数据绑定机制、组件化、视图与数据结构、虚拟DOM、CSS作用域、Vue-loader用途、组件生命周期、路由管理、SEO优化技巧等,帮助读者深入理解并掌握Vue开发实践。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、第一次页面加载会触发哪几个钩子?
答:第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

2、DOM 渲染在 哪个周期中就已经完成?
答:DOM 渲染在 mounted 中就已经完成了。

3、vue的优点
答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;
简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;

双向数据绑定:保留了angular的特点,在数据操作方面更为简单;

组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;

视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;

虚拟DOM:dom操作是非常耗费性能的, 不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom不过是换了另一种方式;
运行速度更快:相比较与react而言,同样是操作虚拟dom,就性能而言,vue存在很大的优势

4、如何让CSS只在当前组件中起作用
答:在组件中的style前面加上scoped

5、如何获取dom
答:ref="domRef"用法: this.$refs.domRef

6、vue-loader是什么?使用它的用途有哪些?
答:vue文件的一个加载器,将template/js/style转换成js模块
用途:js可以写es6、style样式可以scss或less、template可以加jade登

7、key的作用
需要用key来做每个节点做一个唯一标识,Diff算法就可以正确识别此节点。
作用主要是为了高效的更新虚拟DOM

8、分别简述computed和watch的使用场景
答:computed:
    当一个属性受多个属性影响的时候就需要用到computed
    最典型的例子: 购物车商品结算的时候
watch:
    当一条数据影响多条数据的时候就需要用watch
    例子:搜索数据

9、v-on可以监听多个方法吗
答:可以
例子:<input type=“text” v-on="{input:onInput,focus:onFocus, blur: onBlur} />

10、Vue中双向数据绑定是如何实现的?
答:vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法。

11、assets和static的区别
答:相同点:assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下,这是相同点
不相同点:assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。因为避免了压缩直接进行上传,在打包时会提高一定的效率,但是static中的资源文件由于没有进行压缩等操作,所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。

建议:将项目中template需要的样式文件js文件等都可以放置在assets中,走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中,因为这些引入的第三方文件已经经过处理,我们不再需要处理,直接上传。

12、delete和Vue.delete删除数组的区别
答:delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。

13、SPA首屏加载慢如何解决
答:安装动态懒加载所需插件;使用CDN资源。

14、Vue-router跳转和location.href有什么区别
答:使用location.href=’/url’来跳转,简单方便,但是刷新了页面;
使用history.pushState(’/url’),无刷新页面,静态跳转;
引进router,然后使用router.push(’/url’)来跳转,使用了diff算法,实现了按需加载,减少了dom的消耗。
其实使用router跳转和使用history.pushState()没什么差别的,因为vue-router就是用了history.pushState(),尤其是在history模式下

15、Vue里面router-link在电脑上有用,在安卓上没反应怎么解决?
答:Vue路由在Android机上有问题,babel问题,安装babel polypill插件解决。

16、.Vue2中注册在router-link上事件无效解决方法
答: 使用@click.native。原因:router-link会阻止click事件,.native指直接监听一个原生事件。

17、RouterLink在IE和Firefox中不起作用(路由不跳转)的问题
答: 方法一:只用a标签,不适用button标签;方法二:使用button标签和Router.navigate方法

18、params和query的区别
答:用法:query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.r o u t e . q u e r y . n a m e 和 t h i s . route.query.name和this.route.query.name和this.route.params.name。
url地址显示:query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
注意点:query刷新不会丢失query里面的数据
params刷新 会 丢失 params里面的数据。

19、vue初始化页面闪动问题
答:使用vue开发时,在vue初始化之前,由于div是不归vue管的,所以我们写的代码在还没有解析的情况下会容易出现花屏现象,看到类似于{{message}}的字样,虽然一般情况下这个时间很短暂,但是我们还是有必要让解决这个问题的。
首先:在css里加上[v-cloak] {
display: none;
}。
如果没有彻底解决问题,则在根元素加上style=“display: none;” :style=“{display: ‘block’}”

20、简述每个周期具体适合哪些场景
答:beforeCreate:在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

create:data 和 methods都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作

beforeMount:执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的

mounted:执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行

beforeUpdate: 当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步

updated:页面显示的数据和data中的数据已经保持同步了,都是最新的

beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁

destroyed: 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。

21、created和mounted的区别
答:created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

22、mvvm 框架是什么?
答:vue是实现了双向数据绑定的mvvm框架,当视图改变更新模型层,当模型层改变更新视图层。在vue中,使用了双向绑定技术,就是View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。

23、vue-router 是什么?它有哪些组件
答:vue用来写路由一个插件。router-link、router-view

24、active-class 是哪个组件的属性?
答:vue-router模块的router-link组件。children数组来定义子路由

25、怎么定义 vue-router 的动态路由? 怎么获取传过来的值?
答:在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id。

26、vue-router 有哪几种导航钩子?
答:三种,
第一种:是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。
第二种:组件内的钩子
第三种:单独路由独享组件
————————————————

                        版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.youkuaiyun.com/lannieZ/article/details/102907608

### Vue 面试题及答案 #### 1. Vue.js 的响应式原理是什么? Vue.js 利用 **Object.defineProperty**(Vue 2.x)或 **Proxy**(Vue 3.x)来劫持数据对象的读写操作。当数据发生变化时,Vue 能够检测到这些变化,并通知相关的视图进行更新。这种机制使得数据和视图保持同步,而无需手动操作 DOM。 具体来说,Vue 会递归地将数据对象的所有属性转换为 getter 和 setter,从而实现对数据的监听。在 Vue 3.x 中,使用 Proxy 替代了 Object.defineProperty,提供了更强大的功能和更好的性能[^1]。 #### 2. Vue 组件之间的通信方式有哪些? - **props / $emit**:父组件通过 props 向子组件传递数据,子组件通过 $emit 向父组件发送事件。 - **v-model**:本质上是 props 和 $emit 的语法糖,用于双向绑定数据。 - **provide / inject**:祖先组件向后代组件提供数据,不需要逐级传递。 - **Event Bus**:通过一个全局的 Vue 实例作为事件总线,实现任意组件间的通信。 - **Vuex**:适用于复杂应用的状态管理工具,集中管理应用的状态。 #### 3. Vue 生命周期钩子函数有哪些?分别在什么时候触发? Vue 组件的生命周期可以分为以下几个阶段: - **beforeCreate**:实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 - **created**:实例已经创建完成,属性已绑定,但 DOM 还未生成。 - **beforeMount**:挂载开始之前被调用。 - **mounted**:DOM 已经渲染完毕,可以访问真实的 DOM 元素。 - **beforeUpdate**:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 - **updated**:数据更新后调用,虚拟 DOM 重新渲染并应用补丁。 - **beforeUnmount**:实例销毁之前调用。 - **unmounted**:实例销毁后调用。 #### 4. Vue 3 相比 Vue 2 有哪些改进? - **更快的运行速度**:Vue 3 使用 Proxy 来实现响应式系统,相比 Vue 2 的 Object.defineProperty 更加高效。 - **更小的体积**:Vue 3 通过模块化设计和 Tree-shaking 技术,显著减少了框架的体积。 - **更好的 TypeScript 支持**:Vue 3 原生支持 TypeScript,提供了更好的类型推导和开发体验。 - **Composition API**:引入了类似于 React Hook 的 Composition API,使代码组织更加灵活和可复用。 - **更好的可维护性和扩展性**:Vue 3 的架构更加模块化,便于长期维护和扩展。 #### 5. Vue 中的 computed 和 watch 有什么区别? - **computed**:计算属性基于它们的依赖进行缓存,只有在其依赖的数据发生变化时才会重新计算。适合处理复杂的逻辑和模板中的表达式。 - **watch**:观察某个数据的变化,并执行相应的回调函数。适用于异步操作或需要执行开销较大的任务。 #### 6. Vue 中的 key 属性有什么作用? `key` 属性主要用于标识列表中每个元素的唯一性。当 Vue 渲染列表时,它会尽可能高效地复用现有的元素,而不是重新创建新的元素。通过设置唯一的 `key`,可以帮助 Vue 更准确地判断哪些元素发生了变化,从而提高渲染效率。 #### 7. Vue 中的 v-if 和 v-show 有什么区别? - **v-if**:根据条件决定是否渲染元素。如果条件为假,则元素不会出现在 DOM 中。 - **v-show**:通过 CSS 的 `display` 属性控制元素的显示与隐藏。无论条件如何,元素始终存在于 DOM 中。 #### 8. Vue 中的 nextTick 是什么?有什么用途? `nextTick` 是 Vue 提供的一个方法,用于在下次 DOM 更新循环结束后执行回调函数。由于 Vue 的响应式系统是异步更新的,因此在某些情况下,直接访问或操作 DOM 可能无法获取最新的状态。通过 `nextTick`,可以确保在 DOM 更新完成后执行相关操作。 #### 9. Vue 中的 mixin 是什么?有什么优缺点? - **mixin**:是一种分发 Vue 组件中可复用功能的方式。可以通过定义 mixin 对象,包含组件的选项(如 data、methods、生命周期钩子等),然后将其混入到多个组件中。 - **优点**:提高代码的复用性和可维护性。 - **缺点**:可能导致命名冲突和逻辑混乱,特别是在大型项目中使用过多的 mixin 时。 #### 10. Vue 中的插槽(slot)是什么?如何使用? 插槽是 Vue 提供的一种内容分发机制,允许父组件向子组件传递 HTML 内容。通过 `<slot>` 标签,可以在子组件中预留一个位置,供父组件填充内容。 - **默认插槽**:父组件直接传递内容给子组件。 - **具名插槽**:通过 `name` 属性指定不同的插槽位置。 - **作用域插槽**:子组件可以向父组件传递数据,父组件可以根据这些数据自定义内容。 ```html <!-- 子组件 --> <template> <div> <slot name="header"></slot> <p>主要内容</p> <slot name="footer"></slot> </div> </template> <!-- 父组件 --> <template> <child-component> <template #header> <h1>头部内容</h1> </template> <template #footer> <p>底部内容</p> </template> </child-component> </template> ``` #### 11. Vue 中的 keep-alive 是什么?有什么用途? `keep-alive` 是 Vue 提供的一个内置组件,用于缓存动态组件的状态。当组件被切换时,`keep-alive` 可以保留组件的状态,避免重复渲染和初始化。这对于提升用户体验和性能非常有帮助。 ```html <keep-alive> <component :is="currentComponent"></component> </keep-alive> ``` #### 12. Vue 中的 directive 是什么?如何自定义指令? 指令是 Vue 提供的一种特殊的属性,用于直接操作 DOM。常见的内置指令包括 `v-model`、`v-show`、`v-if` 等。 要自定义指令,可以通过 `directives` 选项定义一个对象,包含 `bind`、`inserted`、`update`、`componentUpdated` 和 `unbind` 等钩子函数。 ```javascript // 自定义指令 directives: { focus: { inserted(el) { el.focus(); } } } ``` #### 13. Vue 中的 Vuex 是什么?有什么作用? Vuex 是 Vue 官方提供的状态管理模式和库,用于管理应用中的共享状态。它采用集中式存储管理所有组件的状态,并提供了一套规则来保证状态的变化是可以预测的。 - **State**:存储应用的状态。 - **Getters**:从 state 中派生出一些状态。 - **Mutations**:修改 state 的唯一方式,必须是同步函数。 - **Actions**:提交 mutations,可以包含异步操作。 - **Modules**:将 store 分割成模块,每个模块拥有自己的 state、getters、mutations、actions。 #### 14. Vue 中的 router 是什么?如何实现路由导航? Vue Router 是 Vue 官方的路由管理器,用于构建单页应用(SPA)。它提供了声明式的路由配置、嵌套路由、动态路由等功能。 要实现路由导航,可以通过 `<router-link>` 组件或编程式导航(`$router.push`、`$router.replace` 等)。 ```html <router-link to="/home">首页</router-link> ``` ```javascript this.$router.push('/about'); ``` #### 15. Vue 中的 Composition API 是什么?有什么优势? Composition API 是 Vue 3 引入的新特性,类似于 React Hook,允许开发者在不使用类组件的情况下,更好地组织和复用逻辑代码。它提供了一系列函数(如 `ref`、`reactive`、`watch`、`computed` 等),帮助开发者更灵活地管理组件的状态和逻辑。 - **优势**: - 提高代码的可读性和可维护性。 - 更好的类型推导和支持 TypeScript。 - 更容易复用逻辑代码。 ```javascript import { ref, onMounted } from 'vue'; export default { setup() { const count = ref(0); function increment() { count.value++; } onMounted(() => { console.log('组件已挂载'); }); return { count, increment }; } }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值