Vue经典面试题汇总(持续更新)

本文详细解析Vue.js中的重要概念,包括虚拟DOM中的key作用、组件状态管理、Vue生命周期、响应式系统、计算属性与watch的区别、路由原理与实践。深入探讨了如何选择合适的key,Vue组件的data为何必须为函数,Vuex的state特性,以及Vue CLI中自定义组件的使用。同时,文章涵盖了Vue的生命周期及其在实际开发中的应用场景,组件间通信方法,路由跳转方式,以及Vue与Angular、React的比较。此外,还讨论了Vue-router的导航守卫和常见面试问题,如v-if与v-show的区别、Vue的响应式原理、MVVM模式以及Vue的常用指令。最后,分享了解决Vue在Android上路由失效的技巧,以及Vue组件封装的最佳实践。

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

虚拟DOM中key的作用:

        key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】的差异比较,比较规则如下:

       key的对比规则:

        1、旧虚拟DOM中找到了与新虚拟DOM相同的key:

  • 若虚拟DOM中内容没变,直接使用之前的真实DOM
  • 若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM              

        2、旧虚拟DOM中未找到与新虚拟DOM相同的key

  •  创建新的真实DOM,随后渲染到页面
用index作为key可能会引发的问题:

        1、若对数据进行:逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ===> 界面效果没问底,但效率低

        2、如果结构中还包含输入类的DOM:会产生错误DOM更新 ===> 界面有问题

开发中如何选择key?

        1、最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值

        2、如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的

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

       目的是为了防止多个组件实例对象之间共用一个data,产生数据污染。

       保证组件的独立性和可复用性,data是一个函数,组件实例化的时候将会调用这个函数,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次,就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变。

换句话说:一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。

介绍一下Vue的响应式系统

   (1)任何一个 Vue Component 都有一个与之对应的 Watcher 实例

   (2)Vue 的 data 上的属性会被添加 getter 和 setter 属性

   (3)当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)

   (4)data 被改动时(主要是用户操作), 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新

vue的响应式原理是什么,与vue3的有何不同?

Vue在初始化数据时,会使用 Object.defineProperty 重新定义data中的所有属性,当页面使用对应属性时,首先会进行依赖收集(收集当前组件的 watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。

Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化,并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

computed与watch的区别

  (1)computed擅长处理的场景:一个数据受多个数据影响;watch擅长处理的场景:一个数据影响多个数据。 
  (2)功能上:computed是计算属性,watch是监听一个值的变化,然后执行对应的回调。
  (3)是否调用缓存:computed支持缓存,只有依赖数据发生改变,才会重新进行计算;而watch不支持缓存,数据变,直接会触发相应的操作。
  (4)是否调用return:computed中的函数必须要用return返回,watch中的函数不是必须要用return。
 (5)computed不支持异步 ,当computed内有异步操作时无效,无法监听数据的变化;而watch支持异步。
 (6)computed默认第一次加载的时候就开始监听;watch默认第一次加载不做监听,如果需要第一次加载做监听,添加immediate属性,设置为true(immediate:true)


介绍一下Vue的生命周期

        每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

Vue 2中的生命周期钩子

Vue 3选项式API的生命周期选项

Vue 3 组合API中生命周期钩子

描述

beforeCreate

beforeCreate

setup()

创建前,此时data

methods

的数据都还没有初始化

created

created

setup()

创建后,data

中有值,尚未挂载,可以进行一些Ajax

请求

beforeMount

beforeMount

onBeforeMount

挂载前,会找到虚拟DOM

,编译成Render

mounted

mounted

onMounted

挂载后,DOM

已创建,可用于获取访问数据和DOM

元素

beforeUpdate

beforeUpdate

onBeforeUpdate

更新前,可用于获取更新前各种状态

updated

updated

onUpdated

更新后,所有状态已是最新

beforeDestroy

beforeUnmount

onBeforeUnmount

销毁前,可用于一些定时器或订阅的取消

destroyed

unmounted

onUnmounted

销毁后,可用于一些定时器或订阅的取消

activated

activated

onActivated

keep-alive

缓存的组件激活时

deactivated

deactivated

onDeactivated

keep-alive

缓存的组件停用时

errorCaptured

errorCaptured

onErrorCaptured

捕获一个来自子孙组件的错误时调用

renderTracked

onRenderTracked

调试钩子,响应式依赖被收集时调用

renderTriggered

onRenderTriggered

调试钩子,响应式依赖被触发时调用

serverPrefetch

onServerPrefetch

组件实例在服务器上被渲染前调用

「父子组件的生命周期」:

  • 加载渲染阶段:父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
  • 更新阶段:父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
  • 销毁阶段:父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
vue生命周期的作用是什么?


        Vue生命周期中有多个事件钩子,让我们在控制整个Vue实例过程时更容易形成好的逻辑。

简单描述每个周期具体适合哪些场景

beforecreate : 可以在这加个loading事件,在加载实例时触发
created : 初始化完成时的事件写在这⾥,如在这结束loading事件,异步请求也适宜在这⾥调⽤
mounted : 挂载元素,获取到DOM节点
updated : 如果对数据统⼀处理,在这⾥写上相应函数
beforeDestroy : 可以做⼀个确认停⽌事件的确认框
nextTick : 更新数据后⽴即操作dom


组件之间是怎么通信的

组件之间通信主要分为三种:父子传参子父传参兄弟传参

父子传参:父组件通过自定义属性的方式传参,通过props属性给子组件传参,子组件通过props属性去接收参数。
子父传参:子组件通过自定义事件的方式传参,通过$emit去进行传参。

兄弟传参:Event Bus  事件总线

Vue.prototype.$bus = new Vue
解释一下vue3中provide/inject的响应式原理是如何工作的?

在 Vue 3 中,provide函数可以提供一个响应式的值。当使用refreactive创建的响应式数据被provide时,后代组件通过inject获取到这个数据后,会建立起响应式连接。

例如,当provide一个ref类型的数据sharedData,在后代组件中inject这个数据后,如果sharedData的值发生变化,因为 Vue 3 的响应式系统会追踪数据的变化,后代组件中使用这个inject数据的地方会自动更新。这是基于 Vue 3 的Proxy代理对象来实现响应式的,Proxy能够拦截对象的各种操作(如get、set等),当provide的数据发生set操作(值被修改)时,依赖这个数据的组件会收到通知并更新。 


Vue.cli中怎样使用自定义的组件?

在 components 目录新建组件文件
在需要用到的页面import中导入
使用component注册
在 template 视图中使用组件标签


Vue如何实现按需加载配合webpack设置

webpack中提供了require.ensure( )来实现按需加载。以前引入路由是通过import这样的方式引入,改为const定义方式进行引入。
不进行页面按需加载引入方式 import home from ../../common/home.vue
进行页面按需加载的引入方式:const home = r =>require.ensure([],() =>require('../../common/home.vue)))


scss是什么?在Vue.cli中的安装使用步骤是?有哪几大特性

css的预编译语言。

使用步骤:

第一步:先装css-loader、node-loader、sass-loader等加载器模块;
第二步:在build目录找到webpack.base.config.js,在extends属性中加一个拓展.scss;
第三步:在同一个文件,配置一个module属性;
第四步:然后在组件的style标签加上lang属性 ,例如:lang=”scss”
特性:

可以用变量,例如($变量名称=值);

可以用混合器;

可以嵌套;

如何让 CSS 只在当前组件中起作用?

将当前组件的<style>修改为<style scoped>。

在Vue中,<style scoped> 的主要作用是实现组件级别的样式隔离,防止样式污染全局作用域。它的原理是通过PostCSS处理,在编译时为组件内的CSS选择器和DOM元素添加唯一的属性标识(如data-v-xxxxxx),从而实现样式作用域的限定。

具体原理:

  1. 编译阶段,Vue会对带有scoped的style标签进行处理
  2. 为当前组件模板中的所有DOM元素添加一个唯一的data属性(如data-v-f3f3eg9
  3. 同时将style中的CSS选择器转换为带有该属性选择器的形式(如.example → .example[data-v-f3f3eg9]

示例代码:

<!-- 编译前 -->
<style scoped>
.example {
  color: red;
}
</style>

<!-- 编译后 -->
<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

注意事项:

  1. 使用scoped后,父组件的样式不会渗透到子组件
  2. 深度选择器可以使用>>>/deep/::v-deep来影响子组件
  3. 对动态生成的DOM(如v-html)无效
  4. 会增加CSS选择器的权重

 

聊聊你对Vue.js的template编译的理解?

        简⽽⾔之,就是先转化成AST树,再得到的render函数返回VNode(Vue的虚拟DOM节点)
详情步骤:
        ⾸先,通过compile编译器把template编译成AST语法树(abstract syntax tree 即 源代码的抽象语法结构的树状表现形式),compile是createCompiler的返回值,createCompiler是⽤以创建编译器的。另外compile还负责合并option。
        然后,AST会经过generate(将AST语法树转化成render funtion字符串的过程)得到render函数,render的返回值是VNode,VNode是Vue的虚拟DOM节点,⾥⾯有(标签名、⼦节点、⽂本等等) 

Vue 路由跳转的几种方式

第一种方式:router-link (声明式路由)
第二种方式:router.push(编程式路由)
第三种方式:this.$router.push() (函数里面调用)
第四种方式:this.$router.replace() (用法同上,push)
第五种方式:this.$router.go(n)


Vue的路由实现:hash模式和history模式

hash 模式 (默认)

  • 工作原理: 监听网页的hash值变化 —> onhashchange事件, 获取location.hash
  • 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
  • 会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转
  • 主要用在单页面应用(SPA)

history 模式

  • 工作原理: 主要利用 history.pushState() API 来改变URL, 而不刷新页面.
  • 其实一共有五种模式可以实现改变URL, 而不刷新页面.
  • 需要后台配置支持, 如果输入一个并不存在的url, 需要后端配置做 “兜底配置”, 不是粗暴的返回404, 而是返回首页
Vue与Angular以及React的区别?

基本概念:

  • Angular 是一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用。
  • React 是一个用于构建用户界面的 JavaScript 库
  • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

三者比较:
        相同点

  • 都是基于javascript/typescript的前端开发库,为前端开发提供高效、复用性高的开发方式
  • 都有组件和模板的开发思想
  • 各自的组件都有生命周期,不用的组件可以卸载,不占用资源
  • 都支持指令,如样式、事件等的指令

        不同点

  • 创始和发行不同:Angular是由 google 提供支持的,初始发行于 2016年9月;React由Facebook维护,初始发行于 2013年3月;Vue是由前google人员创建,初始发行于2014年2月
  • 应用类型不同:Angular支持开发native应用程序、SPA单页应用程序、混合应用程序和web应用程序;React支持开发SPA和移动应用程序;Vue支持开发高级SPA,开始支持native应用程序
  • 模型不同:angular基于MVC(模型-视图-控制器)架构;react和vue是基于Virtual DOM(虚拟的文档对象模型)
  • 数据流 流向不同:Angular使用的是双向数据绑定,React用的是单数据流的,而Vue则支持两者。
  • 对微应用和微服务的支持不同:Angular使用的是TypeScript,因此它更适合于单页Web应用(single page web application,SPA),而非微服务。相反,React和Vue的灵活性更适合微应用和微服务的开发。
  • 对原生应用的支持不同: React Native为iOS和Android开发原生应用;Angular的NativeScript已被原生应用所采用,特别是Ionic框架已经被广泛地运用在制作混合应用等方面;Vue的Weex平台正在开发之中,尚无下一步使之成为全面跨平台的计划。
  • 框架和库:Angular 是一个框架而不是一个库,因为它提供了关于如何构建应用程序的强有力的约束,并且还提供了更多开箱即用的功能。React 和 Vue 是一种库,可以和各种包搭配。
  • 组件之间传值方式不同:Angular 中直接的父子组件,父组件可以直接访问子组件的 public 属性和方法,也可以借助于@Input 和 @Output 进行通讯。没有直接关系的,借助于 Service 单例进行通讯;React 组件之间通过通过prop或者state来通信,不同组件之间还有Rex状态管理功能;Vue组件之间通信通过props ,以及Vuex状态管理来传值

vue-router中导航守卫有哪些?
  • 全局守卫:全局前置——router.beforeEach(to,from,next);全局后置——router.afterEach(to,from)  作用:跳转前进行判断拦截
  • 路由独享守卫:beforeEnter(to,from,next)
  • 组件内守卫:beforeRouteEnter (to, from, next) ; beforeRouteLeave (to, from, next)
为什么使用Vue?

       优点:轻量级的框架、双向数据绑定、组件化开发、单页面路由、学习成本低、虚拟dom、渐进式框架、数据和结构的分离、运行速度快、插件化
       缺点:不支持ie8以下、社区没有angular和react丰富、缺乏高阶教程和文档、单页面应用不利用seo优化、首次加载时耗时多


说出至少 8 种 vue 指令和它的用法?

      v-htmlv-text: 渲染元素内容(两者的区别是,v-html可以渲染data里面的css内容和样式,v-text只能渲染data里的内容)

       v-if:判断是否隐藏;

       v-show:切换元素的display属性;
       v-for:数据循环;
       v-bind:class:绑定一个属性(可绑定任意属性);

       v-on:事件绑定;

       v-once:只会渲染元素或组件一次;
       v-model:实现双向绑定;


v-if和v-show的区别

       v-if通过控制dom节点的方式,添加和删除元素,进而实现显示或隐藏元素,v-show通过设置dom元素的display来实现显示或隐藏的操作,并不会删除dom
       v-if隐藏会将组件销毁,显示时会将其内部的监听事件重建,v-show只是设置display,并不会阻止子组件内部的监听事件
v-if有着更高的切换消耗,v-show有着更高的初始渲染消耗


为什么避免 v-if 和 v-for 一起用?

        当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,通过v-if 移动到容器元素,不会再重复遍历列表中的每个值。取而代之的是,只检查它一次,且不会在 v-if 为否的时候运算 v-for。

什么是 MVVM ?

       MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。
       在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
       ViewModel 通过双向数据绑定把 View 层和 Model 层连接起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。


vuex是什么?怎么使用?哪种功能场景使用它?

       vue框架中状态管理。在main.js引入store注入。新建一个目录store 。场景有:单页应用中,组件之间的状态,音乐播放、登录状态、加入购物车等。

vuex有哪几种属性?

有五种,分别是 State、 Getter、Mutation 、Action、 Module。

  • vuex的State特性

    Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于一般Vue对象里面的data。

    state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新。

    通过mapState和mapGetters把全局 state 和 getters 映射到当前组件的 computed 计算属性中。

  • vuex的Getter特性 :getters 可以对State进行计算操作,它就是Store的计算属性。

    虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用。

    如果一个状态只在一个组件内使用,可以不用getters。

  • vuex的Mutation特性:Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态;Action 可以包含任意异步操作。

不用Vuex会带来什么问题?

可维护性会下降,想修改数据要维护三个地方;

可读性会下降,因为一个组件里的数据,根本就看不出来是从哪来的;

增加耦合,大量的上传派发,会让耦合性大大增加,Vue用Component本意就是为了减少耦合,现在这么用,和组件化的初衷相背。

在 Vue 3 中,如何理解全局状态管理工具(如 Pinia)与组件通信的关系?其原理是什么?

关系:全局状态管理工具是一种高级的组件通信方式。它允许不同组件共享和修改同一个状态。组件不再是直接的父子或兄弟通信,而是通过访问和操作全局状态来间接通信。

原理:以 Pinia 为例,它基于 Vue 3 的响应式原理。store中的状态是通过ref或reactive来创建的响应式数据。当一个组件修改了store中的状态(通过store的actions),因为状态是响应式的,依赖这个状态的其他组件会自动更新。Pinia 内部通过subscribe等机制来监听状态的变化,当状态改变时,通知所有依赖这个状态的组件进行重新渲染。这就实现了跨组件的状态共享和通信。

keep-alive 的作用是什么?

包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

vue-loader 是什么?用途有哪些?

解析.vue文件的一个加载器。

用途:js 可以写es6、style样式可以scss或less、template可以加jade等。

如何获取dom


        在我们的vue项⽬中,难免会因为引⽤第三⽅库⽽需要操作DOM标签,vue为我们提供了ref属性。 ref 被⽤来给元素或⼦组件注册引⽤信息。引⽤信息将会注册在⽗组件的 $refs 对象上。如果在普通的 DOM 元素上使⽤,引⽤指向的就是 DOM 元素;如果⽤在⼦组件上,引⽤就指向组件实例

iframe的优缺点?

        iframe也称作嵌⼊式框架,嵌⼊式框架和框架⽹页类似,它可以把⼀个⽹页的框架和内容嵌⼊在现有的⽹页中。
        优点:

  • 解决加载缓慢的第三⽅内容如图标和⼴告等的加载问题
  • Security sandbox
  • 并⾏加载脚本
  • ⽅便制作导航栏

        缺点:

  • iframe会阻塞主页⾯的Onload事件
  • 即使内容为空,加载也需要时间
  • 没有语意
请说出vue.cli项⽬中src⽬录每个⽂件夹和⽂件的⽤法?


        assets⽂件夹是放静态资源;

        components是放组件;

        router是定义路由相关的配置;

        view视图;

        app.vue是⼀个应⽤主组件;

        main.js是⼊⼝⽂件


vue常⽤的修饰符
  • .stop:等同于JavaScript中的event.stopPropagation(),防⽌事件冒泡
  • .prevent:等同于JavaScript中的event。preventDefault(),防⽌执⾏预设的⾏为(如果事件可取消,则取消该事件,⽽不停⽌事件的进⼀步传播);
  • .capture:与事件冒泡的⽅向相反,事件捕获由外到内
  • .self:只会触发⾃⼰范围内的事件,不包含⼦元素;
  • .once:只会触发⼀次。
⾃定义指令(v-check、v-focus)的⽅法有哪些?它有哪些钩⼦函数?还有哪些钩⼦函数参数?
  • 全局定义指令:在vue对象的directive⽅法⾥⾯有两个参数,⼀个是指令名称,另外⼀个是函数。组件内定义指令:directives
  • 钩⼦函数:bind(绑定事件触发)、inserted(节点插⼊的时候触发)、update(组件内相关更新)
  • 钩⼦函数参数:el、binding
vue的两个核⼼点

        数据驱动,组件系统

  • 数据驱动:ViewModel,保证数据和视图的⼀致性
  • 组件系统:应⽤类UI可以看做全部是由组件树构成的
delete和Vue.delete删除数组的区别

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


 
Vue-router跳转和location.href有什么区别


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


RouterLink在IE和Firefox中不起作⽤(路由不跳转)的问题


        ⽅法⼀
        只⽤a标签,不使⽤button标签
        ⽅法⼆
        使⽤button标签和Router.navigate⽅法


请说下封装 vue 组件的过程?


        ⾸先,组件可以提升整个项⽬的开发效率。能够把页⾯抽象成多个相对独⽴的模块,解决了我们传统项⽬开发:效率低、难维护、复⽤性等问题。
        然后,使⽤Vue.extend⽅法创建⼀个组件,然后使⽤Vue.component⽅法注册组件。⼦组件需要数据,可以在props中接受定义。⽽⼦组件修改好数据后,想把数据传递给⽗组件。可以采⽤emit⽅法。


params和query的区别


        ⽤法:query要⽤path来引⼊,params要⽤name来引⼊,接收参数都是类似的,分别是this. $router.query.name 和 this.$router.params.name。url地址显⽰:query更加类似于我们ajax中get传参,params则类似于post,说的再简单⼀点,前者在浏览器地址栏中显⽰参数,后者则不显⽰
        注意点:query刷新不会丢失query⾥⾯的数据params刷新会丢失params⾥⾯的数据


vue mock数据


        在项⽬中尝试了mockjs,mock数据,实现前后端分离开发。
        关于mockjs,官⽹描述的是

  • 前后端分离
  • 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
  • 数据类型丰富
  • 通过随机数据,模拟各种场景。

        总结:在后端接⼝没有开发完成之前,前端可以⽤已有的接⼝⽂档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接⼝返回的数据,并将随机的模拟数据返回参与相应的数据交互处理,这样真正实现了前后台的分离开发。
        与以往的⾃⼰模拟的假数据不同,mockjs可以带给我们的是:在后台接⼝未开发完成之前模拟数据,并返回,完成前台的交互;在后台数据完成之后,你所做的只是去掉mockjs:停⽌拦截真实的ajax,仅此⽽已。


vue初始化页⾯闪动问题


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


vue更新数组时触发视图更新的⽅法


       push();pop();shift();unshift();splice();sort();reverse()


vue常⽤的UI组件库

element ui

Ant Design Vue

uviewui


mint-ui是什么?怎么使⽤?说出⾄少三个组件使⽤⽅法?


        基于vue的前端组件库。
        npm安装,然后import样式和js,vue.use(mintUi)全局引⼊。在单个组件局部引⼊:import {Toast} from ‘mint-ui’。

  • 组件⼀:Toast(‘登录成功’);
  • 组件⼆:mint-header;
  • 组件三:mint-swiper

Vue⾥⾯router-link在电脑上有⽤,在安卓上没反应怎么解决?


        Vue路由在Android机上有问题,babel问题,安装babel polypill插件解决


Vue2中注册在router-link上事件⽆效解决⽅法


        使⽤@click.native。原因:router-link会阻⽌click事件,.native指直接监听⼀个原⽣事件。
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值