1.什么是MVVM?
| MVVM是一种设计思想。 |
| Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑; |
| View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个 |
| 同步View 和 Model的对象。 |
2.mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?
| mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的 |
| viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户 |
| 体验。 |
| 区别:vue数据驱动,通过数据来显示视图层而不是节点操作。 |
| 场景:数据操作比较多的场景,更加便捷 |
3.vue的优点是什么?
| 低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。 |
| 可重用性:你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。 |
| 独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。 |
| 可测试:界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。 |
4.vue组件之间传值?
| *父组件与子组件传值 |
| 父组件通过标签上面定义传值 |
| 子组件通过props方法接受数据 |
| *子组件向父组件传递数据 |
| 子组件通过$emit方法传递参数 |
| *vuex |
| *eventbus |
| *pubsub.js |
| |
5.vue2和vue3区别?vue3比vue2优点?
| 我们可以概览Vue3的新特性 |
| 速度更快、体积减少、更易维护、更接近原生、更易使用 |
| vue3相比vue2、重写了虚拟Dom实现、编译模板的优化、 |
| 更高效的组件初始化、undate性能提高1.3~2倍、 |
| SSR速度提高了2~3倍 |
6.vuex面试相关
| vue框架中状态管理。在main.js引入store,注入。新建一个目录store,….. export 。场景有:单页应用中,组件之间的状态。 |
| 当触发组件中的某一个事件或者方法得时候,会通过dispatch分发一个消息到actions当中,action会进行异步请求数据,当数据请求回来的时候,会通过commit提交到mutations当中,在mutations当中去改变state当中的状态。状态改变以后会映射组件也发生改变。 |
| 1、Vuex 是一个专为 Vue.js 设计的状态管理模式 |
| Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 |
| •1.vuex解决了组件之间同一状态的共享问题 (解决了不同组件之间的数据共享) |
| •2.组件里面数据的持久化。 |
7.v-show和v-if指令的共同点和不同点
| v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏 |
| v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果 |
8.keep-alive的作用是什么?
| <keep-alive></keep-alive> 包裹动态组件时,会缓存不活动的组件实例, |
| 主要用于保留组件状态或避免重新渲染。 |
9.Vue中引入组件的步骤?
| 1)采用ES6的import ... from ...语法或CommonJS的require()方法引入组件 |
| 2)对组件进行注册,代码如下 |
| |
| Vue.component('my-component', { |
| template: '<div>A custom component!</div>'}) |
| 3)使用组件<my-component></my-component> |
10.vue-router有哪几种导航钩子?
| 三种,一种是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。 |
| 第二种:组件内的钩子; |
| 第三种:单独路由独享组件 |
11.生命周期相关面试题
| 总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。 |
| 1-beforeCreate 初始化之后 |
| 2-created 创建完成 |
| 3-beforeMount 挂载之前 |
| 4-mounted 被创建 |
| 5-beforeUpdate 数据更新前 |
| 6-updated 被更新后 |
| 7-activated |
| 8-deactivated |
| 9-beforeDestroy 销毁之前 |
| 10-destroyed 销毁之后 |
| Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。 |
12.第一次页面加载会触发哪几个钩子?DOM 渲染在 哪个周期中就已经完成?
| *第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子 |
| *DOM 渲染在 mounted 中就已经完成了。 |
13.举例说出几种vue当中的指令和它的用法?
| v-if:判断是否隐藏; |
| v-for:数据循环; |
| v-bind:class:绑定一个属性; |
| v-model:实现双向绑定 |
| v-html:更新元素的innerHTML; |
| v-show与v-if |
| |
14.vue-loader是什么?使用它的用途有哪些?
| 解析.vue文件的一个加载器。 |
| 用途:js可以写es6、style样式可以scss或less、template可以加jade等 |
15.为什么使用key?
| 当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容。 |
16.v-if 和 v-for 可以一起使用吗?如果不可以,为什么?
| 当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,通过v-if 移动到容器元素,不会再重复遍历列表中的每个值。取而代之的是,我们只检查它一次,且不会在 v-if 为否的时候运算 v-for。 |
17.VNode是什么?虚拟 DOM是什么?
| Vue在 页面上渲染的节点,及其子节点称为“虚拟节点 (Virtual Node)”,简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。 |
18.vue2.x与vue3.x双向数据绑定的原理?
| 数据变化更新视图,视图变化更新数据。其中,View变化更新Data,可以通过事件监听的方式来实现,所以 Vue数据双向绑定的工作主要是如何根据Data变化更新View。 |
| Vue 是利用的 Object.defineProperty()方法进行的数据劫持,利用 set、get 来检测数据的读写。 |
| Vue2.x采用的是Object.defineProperty()方法 |
| Vue3.0实现数据的双向绑定原理:采用的是Proxy方法,proxy是个对象 |
| proxy比Object.defineProperty好在哪里? |
| 可以直接监听数组的变化;可以直接监听对象而非属性;Proxy返回的是一个新对象,可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改 |
| Object.defineProperty的优势:A.兼容性好,支持IE9,而Proxy的存在浏览器兼容性问题,而且无法用polyfill磨平。 |
19.Vue $nextTick作用是什么?
| 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。简单的说就是再DOM操作时,vue的更新是异步的,$nextTick 是用来知道什么时候 DOM 更新完成的。 |
20.$route和$router的区别?
| $route是“路由信息对象”,包括path,params,query,name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法,钩子函数等 |
21.vue.js的两个核心是什么(数据驱动、组件系统。)
| 数据驱动:Object.defineProperty和存储器属性: getter和setter |
| ViewModel,保证数据和视图的一致性。 |
| 组件系统:应用类UI可以看作全部是由组件树构成的。 |
22.hash路由和history路由的区别?
| hash路由在地址栏URL上有 |
| 我们进行回车刷新操作,hash路由会加载到地址栏对应的页面,而history路由一般就404报错了(刷新是网络请求,没有后端准备时会报错)。history运用了浏览器的历史记录栈 |
23.cookie,sessionStorage和localStorage的区别?
| localStorage:存储持久数据,浏览器关闭后数据不会丢失,除非主动删除数据。 |
| sessionStorage:数据在当前浏览器窗口关闭后自动删除。 |
| cookie:设置的cookie过期时间之前一直有效,即使窗口关闭或浏览器关闭。 |
| cookie数据时钟在同源的http请求中携带(即使不需要),即会在浏览器和服务器之间传递。 |
| seeeionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。 |
24.computed与watch的区别?
| computed是计算属性,会根据依赖的数据动态显示新的计算结果,计算后的值会被缓存,当依赖的值改变的时候,才会更新新的计算后的值 |
| watch 就相当于是一个 data 的数据监听回调,当依赖的 data 的数据变化就会执行回调 |
25.页面刷新后,vuex中的数据丢失
| js代码是运行在内存中的,代码运行时的所有变量、函数也都是保存在内存中的。进行刷新页面的操作,以前申请的内存被释放 |
| 解决思路:这些数据要想存储就必须存储在外部,例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。 |
26.图片懒加载和路由懒加载?
| 图片懒加载:可视区域加载,就是只加载用户可以看到的区域,这个主要由监控滚动条来实现,在没进入可视区域的时候,我们先不给这个标签赋 src 属性。 |
| 路由懒加载:1. vue异步组件 |
| component: resolve => require(['@/pages/ShopCar'],resolve) |
| 2. webpack的require.ensure() |
| component: r => require.ensure([], () => r(require('@/pages/GoodsDetailPage')), 'demot') |
27.跨域问题如何解决?
| 通过jsonp跨域 |
| nodejs中间件代理跨域: vue框架的跨域webpack.config.js部分配置 |
| |
28.scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?
| css的预编译。 |
| 使用步骤: |
| 第一步:先装css-loader、node-loader、sass-loader等加载器模块 |
| 第二步:在build目录找到webpack.base.config.js,在那个extends属性中加一个拓展.scss |
| 第三步:在同一个文件,配置一个module属性 |
| 第四步:然后在组件的style标签加上lang属性 ,例如:lang=”scss” |
| 特性: |
| •可以用变量,例如($变量名称=值); |
| •可以用混合器,例如() |
| •可以嵌套 |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」