vue面试题

1、在vue中watch和created哪个先执行?为什么?

答:watch 中的 immediate 会让监听在初始值声明的时候去执行监听计算,否则就是 created 先执行

2、vue中mixins和extends有什么区别?

答:https://blog.csdn.net/qq_26443535/article/details/107803358

3、vue中mixins有什么使用场景?

答:一般一些有重复方法的组件,可以考虑抽一个mixin。或者是比如一些页面权限控制的内容,也可以考虑抽一个mixin

4、在vue中created与activated有什么区别?

答:created():在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el property 目前尚不可用。

activated():是在路由设置<keep-alive></keep-alive>时,才会有这个生命周期。在被 keep-alive 缓存的组件激活时调用

5、在vue项目如何引入异步组件?

答:componets: {my-componets: () => import('./my-model-component')}

6、在vue项目中scss scoped穿透符>>>无效的解决方案有哪些?

答:可以使用 /deep/ 操作符( >>> 的别名)

7、为什么在v-for中的key不推荐使用随机数或者index呢?那要怎么使用才比较好呢

答:因为在插入数据或者删除数据的时候,会导致后面的数据的key绑定的index变化,进而导致从新渲染,效率会降低;当数据进行更改的时候,会通过key来判断虚拟dom树是否进行了更改。如果发现了相同的dom-key就可以直接复用。减少了渲染的性能损耗

8、vue-loader在webpack编译流程中的哪个阶段?

答:编译模板阶段:从入口文件出发,调用所有配置的Loader对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理

9、预渲染和SSR(服务端渲染)有什么区别?
答:服务端渲染和预渲染的使用场景还是有较明显的区别的。预渲染的使用场景更多是我们所说的静态页面的形式。服务端渲染适用于大型的、页面数据处理较多且较为复杂的、与服务端有数据交互的功能型网站,一个明显的使用场景就是电商网站。

10、你有用过预渲染技术吗?怎么做的?

答:https://www.jianshu.com/p/9067fdda1425?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
  https://blog.csdn.net/huangjianfeng21/article/details/92421738

11、使用vue如何判断页面是否编辑及编辑页面未保存离开时,给出弹窗提示

答:使用watch监听数据的改变,在组件路由beforeRouterLeave中进行判断。demo

12、vue的.sync修饰符可以用表达式吗?为什么?
答:不可以
13、v-if和v-show哪个优先级更高?


14、如何批量引入组件?

答:https://github.com/haizlin/fe-interview/issues/2084  https://www.jianshu.com/p/a65076b6f3e7
15、vue的v-for如何倒序输出?

答:先把数组做一层reverse()倒叙处理,然后在执行v-for
16、如何在全局使用axios的实例呢?

答:在main.js中导入axios,将axios挂载到Vue的原型对象上。在main.js中导入axios,将axios挂载到Vue的原型对象上。
17、v-show指令算是重排吗?

答:页面渲染时,当页面中元素的位置,大小或结构、定位发生改变,或者对HTML结构增删查改时,浏览器会对所有的dom进行重新排序,这就是DOM回流,严重影响浏览器性能。

v-show指令其原理就是改变display涉及到了DOM结构所以发生了重排。

18、axios同时请求多个接口,如果当token过期时,怎么取消后面的请求?

答:https://juejin.cn/post/6844903933735878663
19、从0到1自己构架一个vue项目,说说有哪些步骤、哪些重要插件、目录结构你会怎么组织

答:https://github.com/haizlin/fe-interview/issues/983
20、你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解

答:

21、你知道v-model的原理吗?说说看

答:原生input其实只是一个语法糖,:bind="value"与@change="value = $event.target.value"的结合。自定义组件的时候的v-model默认监听change事件和绑定value 的prop。
22、你有使用过vue开发多语言项目吗?说说你的做法?

答:
23在使用计算属性的时,函数名和data数据源中的数据可以同名吗?

答:不能同名 因为不管是计算属性还是data还是props 都会被挂载在vm实例上,因此 这三个都不能同名

24、vue中data的属性可以和methods中的方法同名吗?为什么?

答:不能
25、怎么给vue定义全局的方法?

答:1、通过prototype,这个非常方便。Vue.prototype[method]=method;
  2、通过插件Vue.use(plugin);
  3、通过mixin,Vue.mixin(mixins);

26、vue2.0不再支持v-html中使用过滤器了怎么办?

答:使用过滤器 Vue.filter
27、怎么解决vue打包后静态资源图片失效的问题?

答:一般都是路径问题
28、怎么解决vue动态设置img的src不生效的问题?

答:用ruquire
29、使用vue后怎么针对搜索引擎做SEO优化?

答:使用服务端渲染,vue官方推荐nuxt.js
30、跟keep-alive有关的生命周期是哪些?描述下这些生命周期

答:https://www.cnblogs.com/hy96/p/12213144.html
如果现在让你从vue/react/angularjs三个中选择一个,你会选哪个?说说你的理由

答:vue,上手简单,主要是我只会vue
31、你知道vue2.0兼容IE哪个版本以上吗?

答:8以上
32、使用vue开发一个todo小应用,谈下你的思路

答:
33、你有看过vue推荐的风格指南吗?列举出你知道的几条

答:1、使用v-for时记得加key,可以快速定位到需要更新的DOM节点,提高效率。
2、永远不要把 v-if 和 v-for 同时用在同一个元素上。提高渲染效率
3、优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线
34、你是从vue哪个版本开始用的?你知道1.x和2.x有什么区别吗?

35、你知道vue中key的原理吗?说说你对它的理解

答:作用的话,便于diff算法的更新,key的唯一性,能让算法更快的找到需要更新的dom,需要注意的是,key要唯一,不然会出现很隐蔽性的更新问题。
36、vue中怎么重置data?

答:Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象
this.$data获取当前状态下的data
this.$options.data()获取该组件初始状态下的data。
Object.assign(this.$data, this.$options.data())
37、vue渲染模板时怎么保留模板中的HTML注释呢?

答:comments设为true,默认false,设为true之后将会保留且渲染模块中的HTML注释,

38、Vue.observable你有了解过吗?说说看

答:了解过,类似状态管理器
39、你知道style加scoped属性的用途和原理吗?

答:防止样式污染。在标签上绑定了自定义属性,防止css全局污染但是很多时候使用ui框架如果加scope就不能覆盖,这个时候一般写sass 会在最外层包裹该组件名的id 就可以不使用scoped 了
40、你期待vue3.0有什么功能或者改进的地方?

答:可以完全的监听数组和对象
41、vue边界情况有哪些?

答:没遇到过边界情况 https://cn.vuejs.org/v2/guide/components-edge-cases.html
42、如何在子组件中访问父组件的实例?

答:vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用(https://www.cnblogs.com/jin-zhe/p/9523029.html)
Vue中子组件调用父组件的方法,这里有三种方法提供参考:
1:直接在子组件中通过this.$parent.event来调用父组件的方法
2:在子组件里用$emit向父组件触发一个事件,父组件监听这个事件
3:父组件把方法传入子组件中,在子组件里直接调用这个方法
https://www.cnblogs.com/jin-zhe/p/9523782.html)
43、watch的属性用箭头函数定义结果会怎么样?

答:会报错; this 是undefind
44、在vue项目中如果methods的方法用箭头函数定义结果会怎么样?

答:回报错,同上
45、在vue项目中如何配置favicon?

答:人工在index.html中引入
在Vue-cli3可以修改vue.config.js的baseurl设定
46、你有使用过babel-polyfill模块吗?主要是用来做什么的?

答:没用过;

Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

Babel默认不转码的API非常多,详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。

47、说说你对vue的错误处理的了解?

答:http://www.imooc.com/article/288017?block_id=tuijian_wz
48、在vue事件中传入$event,使用e.target和e.currentTarget有什么区别?

答:event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素。
49、在.vue文件中style是必须的吗?那script是必须的吗?为什么?

答:不是
50、vue怎么实现强制刷新组件?

答:1.如果要在组件内部中进行强制刷新:调用this.$forceUpdate()强制重新渲染组件2.如果是刷新某个子组件:利用v-if指令的特性;当组件的key 值变更时,会自动的重新渲染

51、vue自定义事件中父组件怎么接收子组件的多个参数?

答:this.$emit('test',this.param) or this.$emit('test',this.param1,this.param2, this.param3)
52、实际工作中,你总结的vue最佳实践有哪些?

答:全部存在vue风格指南里面了
53、vue给组件绑定自定义事件无效怎么解决?

答:1、组件外部加修饰符.navtive;2、组件内部声明$emit('自定义事件')
54、vue的属性名称与method的方法名称一样时会发生什么问题?

答:报错
55、vue变量名如果以_、$开头的属性会发生什么问题?怎么访问到它们的值?

答:报错 变量未定义;以 _ 或 $ 开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性、API 方法冲突;你可以使用例如 $data.xxx或者_data.xxx 的方式访问这些属性。
56、vue使用v-for遍历对象时,是按什么顺序遍历的?如何保证顺序?

答:在遍历对象时,会按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
57、vue如果想扩展某个现有的组件时,怎么做呢?

答:1:使用Vue.extend直接扩展、2:使用Vue.mixin全局混入、3HOC封装 4、加slot扩展

58、说下$attrs和$listeners的使用场景

答:https://www.cnblogs.com/hy96/p/14544223.html
59、分析下vue项目本地开发完成后部署到服务器后报404是什么原因呢?

1.检查nginx配置,是否正确设置了资源映射条件;
2.检查vue.config.js中是否配置了publicPath,若有则检查是否和项目资源文件在服务器摆放位置一致。答:
60、v-once的使用场景有哪些?

答:定时器销毁;单次触发的场景
61、说说你对vue的表单修饰符.lazy的理解

答:input标签v-model用lazy修饰之后,vue并不会立即监听input Value的改变,会在input失去焦点之后,才会触发input Value的改变
62、vue为什么要求组件模板只能有一个根元素?

答:组件的template最终会转换成VNode对象,一个组件对应一个根元素对应一个VNode对象
63、EventBus注册在全局上时,路由切换时会重复触发事件,如何解决呢?

答:建议在created里注册,在beforeDestory移出
64、怎么修改vue打包后生成文件路径?

答:webpack:output.path ;vue-cli3: outputDir
65、你有使用做过vue与原生app交互吗?说说vue与ap交互的方法

答:app定义一个方法传给我们,根据方法调用

66、使用vue写一个tab切换

答:v-for循环list,根据索引值设置active的样式和显示内容
67、vue中什么是递归组件?举个例子说明下?

答:https://blog.csdn.net/badmoonc/article/details/80380557
68、怎么访问到子组件的实例或者子元素?

答:this.$children/this.$refs.xx
69、在子组件中怎么访问到父组件的实例?

答:this.$parent
70、在组件中怎么访问到根实例?

答:this.$root
71、说说你对Object.defineProperty的理解

答:Object.defineProperty定义新属性或修改原有的属性;vue的数据双向绑定的原理就是用的Object.defineProperty这个方法,里面定义了setter和getter方法,通过观察者模式(发布订阅模式)来监听数据的变化,从而做相应的逻辑处理。
72、vue组件里写的原生addEventListeners监听事件,要手动去销毁吗?为什么?

答:需要,原生DOM事件必须要手动销毁,否则会造成内存泄漏
72、vue组件里的定时器要怎么销毁?

答:vue中优雅的使用定时器

73、vue组件会在什么时候下被销毁?

答:页面关闭、路由跳转、v-if和改变key值
74、使用vue渲染大量数据时应该怎么优化?说下你的思路!

 答:虚拟列表:vue-virtual-scroll-list,vue-virtual-scroller……

  冻结属性,让不必要的属性不响应:Object.freeze, 或者使用 Object.defineProperty 将对象属性的configurable设置为false

75、在vue中使用this应该注意哪些问题?

答:多用箭头函数吧

76、你有使用过JSX吗?说说你对JSX的理解

答:没用过。jsx不是一门新的语言,是一种新的语法糖。让我们在js中可以编写像html一样的代码。允许XML语法直接加入到JavaScript代码中,让你能够高效的通过代码而不是模板来定义界面
77、说说组件的命名规范

答:vue风格指南
78、怎么配置使vue2.0+支持TypeScript写法?

答:没搞过ts
79、<template></template>有什么用?

答:被当做一个不可见的包裹元素,主要用于分组的条件判断和列表渲染。
80、vue的is这个特性你有用过吗?主要用在哪些方面?

答:vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题,https://www.cnblogs.com/caoxueying2018/p/10593604.html (刚刚测试了一下,好像没这个问题了。vue2.0之后就做了容错处理)
81、vue的:class和:style有几种表示方式?

答::class 绑定变量 绑定对象 绑定一个数组 绑定三元表达式   :style 绑定变量 绑定对象 绑定函数返回值 绑定三元表达式 ;demo
82、你了解什么是函数式组件吗?

答:了解:https://juejin.cn/post/6844903630575763470
83、vue怎么改变插入模板的分隔符?

答:https://cn.vuejs.org/v2/api/#delimiters
84、组件中写name选项有什么作用?

答:项目使用keep-alive时,可搭配组件name进行缓存过滤;DOM做递归组件时需要调用自身name:vue-devtools调试工具里显示的组见名称是由vue中组件name决定的
85、说说你对provide和inject的理解

答:组件之间传值用的
86、开发过程中有使用过devtools吗?

答:用过,不然怎么调试
87、说说你对slot的理解有多少?slot使用场景有哪些?

答:用过;插槽,以前用过切换标题
88、你有使用过动态组件吗?说说你对它的理解

答:通过Vue内置组件 <component></component> 的 is 属性控制不同组件的渲染
89、prop验证的type类型有哪几种?

答:Number, String, Boolean, Array, Function, Object
90、prop是怎么做验证的?可以设置默认值吗?

答:可以设置
91、怎么缓存当前打开的路由组件,缓存后想更新当前组件怎么办呢?

答:keep-alive加上actived钩子函数
92、说说你对vue组件的设计原则的理解

答:不懂
93、你了解vue的diff算法吗?

答:我的理解:计算出虚拟 DOM 中真正变化的部分,并且只针对该部分进行 DOM 更新,而非重新渲染整个页面

94、vue如何优化首页的加载速度?

答:异步路由和异步加载;还有分屏加载, 按需加载, 延时加载图片等;做好ssr呗

95、vue打包成最终的文件有哪些?

答:js\css\html加资源
96、ajax、fetch、axios这三都有什么区别?

答:ajax:最原始的后端请求技术,new XMLHttpRequest()创建xhr对象,用setRequestHeader()设置请求头、send发送请求等。。
  axios:写法axios().then().catch(),基于XMLHttpRequest封装的Promise实现版本,区别有从 node.js 创建 http 请求等
  fetch:fetch().then().then().catch(),基于原生js,没有使用XMLHttpRequest对象
97、vue能监听到数组变化的方法有哪些?为什么这些方法能监听到呢?

答:都是在框架内重写过的,并不是原生的方法了,新的方法 里面增加了监听
98、vue中是如何使用event对象的?

答:@click=“func” 默认第一个参数传入event对象;@click="func(0, $event)" 如果自己需要传入参数和event对象,则需要使用$event来获取event对象并传入func
99、vue首页白屏是什么问题引起的?如何解决呢?

答:出现白屏是因为SPA单页面,第一次加载的东西太多了 ,这种情况可以使用路由懒加载分担一下,一进页面先看到哪些,就加载哪些就好了。component:() => import(/* webpackChunkName: "customer" */ '@/components/customer/add'),
100、说说你对单向数据流和双向数据流的理解

答:单向数据流:所有状态的改变可记录、可跟踪,源头易追溯;所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性;一旦数据变化,就去更新页面(data-页面),但是没有(页面-data);如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。
双向数据流:无论数据改变,或是用户操作,都能带来互相的变动,自动更新。
101、移动端ui你用的是哪个ui库?有遇到过什么问题吗?

答:vant,mint等等吧,各有各的坑,不过大部分都是可以查到解决方案的
102、你知道nextTick的原理吗?

答:微任务和宏任务吧
103、说说你对v-clock和v-pre指令的理解

答:v-cloak指令只是在标签中加入一个v-cloak自定义属性,在HTML还编译完成之后该属性会被删除。
  v-pre可以用来阻止预编译,有v-pre指令的标签内部的内容不会被编译,会原样输出。
104、写出你知道的表单修饰符和事件修饰符

答:事件修饰符.stop .prevent .capture .self .once .passive
  表单修饰符.number .lazy .trim
105、说说你对proxy的理解

答:https://www.cnblogs.com/hy96/p/14464822.html
106、你有自己用vue写过UI组件库吗?

答:写过;还发不到npm了
107、用vue怎么实现一个换肤的功能?

答:echarts换肤将颜色都在vuex中动态更换,别的普通样式就切换css就行了
108、有在vue中使用过echarts吗?踩过哪些坑?如何解决的?

答:用过;that.chart.setOption(this.option, true)第二个参数默认是false,更新echarts时,之前的数据不会删掉,一直在后面递增;柱状图绑定点击时间的时候,更新图标之前一定要销毁事件,不谈事件会递增;

109、如果让你教一个2-3年经验前端经验的同事使用vue,你该怎么教?

答:看vue官方文档
110、vue性能的优化的方法有哪些?

答:太多了,百度吧;https://juejin.cn/post/6844903913410314247
111、SSR解决了什么问题?有做过SSR吗?你是怎么做的?

答:解决了首屏加载过慢的问题
112、说说你觉得认为的vue开发规范有哪些?

答:vue风格指南
113、vue部署上线前需要做哪些准备工作?

答:主要assetsPublicPath、publicPath 两个
114、vue过渡动画实现的方式有哪些?

答:1.使用vue的transition标签结合css样式完成动画
  2.利用animate.css结合transition实现动画
  3.利用 vue中的钩子函数实现动画
115、vue在created和mounted这两个生命周期中请求数据有什么区别呢?

答:看实际情况,一般在 created(或beforeRouter) 里面就可以,如果涉及到需要页面加载完成之后的话就用 mounted。

  在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素
  而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,(此时document.getelementById 即可生效了)

116、vue父子组件双向绑定的方法有哪些?

答:1.利用对象的引用关系来实现
  2.父子组件之间的数据传递
  3.使用.sync修饰符
117、vue怎么获取DOM节点?

答:ref、document
118、vue项目有做过单元测试吗?

答:无;参考文献
119、vue项目有使用过npm run build --report吗?

答:无;给 process.env 对象添加了一个属性 npm_config_report: "true",表示开启编译完成后的报告。
120、如何解决vue打包vendor过大的问题?

答:开启gzip压缩
121、webpack打包vue速度太慢怎么办?

答:升级webpack4,支持多进程
122、vue在开发过程中要同时跟N个不同的后端人员联调接口(请求的url不一样)时你该怎么办?

答:devServer中把所有的服务人员的地址代理都写进去,
  然后动态更改接口的baseUrl,这样切换不同后端人员的时候不用重启
123、vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?

答:https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/permission.html#%E6%8C%87%E4%BB%A4%E6%9D%83%E9%99%90
124、说下你的vue项目的目录结构,如果是大型项目你该怎么划分结构和划分组件呢?

答:views目录存放一级路由的组件,即视图组件
  Components目录存放组件
  Store存放vuex相关文件
  Router目录存放路由相关文件
  Untils目录存放工具js文件
  API目录存放封装好的与后端交互的逻辑
  Assets存放静态文件
125、在移动端使用vue,你觉得最佳实践有哪些?

答:不懂什么意思
126、你们项目为什么会选vue而不选择其它的框架呢?

答:Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API;vue是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和dom,这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。
127对于即将到来的vue3.0特性你有什么了解的吗?

答:可以直接监听到对象的新增和删除、监听的是整个对象而不是对象的一个属性;可以监听到整个数组变化

128、vue开发过程中你有使用什么辅助工具吗?

答:vue-devtools
129、vue和微信小程序写法上有什么区别?

答:https://www.jianshu.com/p/d4a053599572
130、怎么缓存当前的组件?缓存后怎么更新?

答:keep-alive
  通过actived钩子
131、你了解什么是高阶组件吗?可否举个例子说明下?

答:不了解。混入?
132、为什么我们写组件的时候可以写在.vue里呢?可以是别的文件名后缀吗?

答:配合相应的loader 想咋写就咋写
133、vue-loader是什么?它有什么作用?

答:解析和转换 .vue 文件,提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template,再分别把它们交给对应的 Loader 去处理。
134、说说你对vue的extend(构造器)的理解,它主要是用来做什么的?

答:复用组件;比如说一个全局的alert demo demo
135、如果将axios异步请求同步化处理?

答:async ,await
136、怎么捕获组件vue的错误信息?

答:errorHandler 错误事件暴露出来
137、为什么vue使用异步更新组件?

答:批量更新 收集当前的改动一次性更新 节省diff开销吧?
138、如何实现一个虚拟DOM?说说你的思路

答:可以使用 document.createDocumentFragment 创建虚拟节点
139、写出多种定义组件模板的方法

答:https://learnku.com/articles/4382/seven-ways-to-define-a-component-template-by-vuejs
140、SPA单页面的实现方式有哪些?

答:hash/history
141、说说你对SPA单页面的理解,它的优缺点分别是什么?

答:博客上有
142、说说你都用vue做过哪些类型的项目?

答:
143、在vue项目中如何引入第三方库(比如jQuery)?有哪些方法可以做到?

答:很多
144、使用vue手写一个过滤器

答:略
145、你有使用过render函数吗?有什么好处?

答:没用过
146、写出你常用的指令有哪些?

答:v-once v-pre v-clock v-for v-html v-text v-model
147、手写一个自定义指令及写出如何调用

答:见博客
148、组件进来请求接口时你是放在哪个生命周期?为什么?

答:一般在created 因为在这个生命周期我们常用到的都已经初始化好了
  如果涉及dom 那就mounted
149、你有用过事件总线(EventBus)吗?说说你的理解

答:兄弟组件传值方式
150、说说vue的优缺点分别是什么?

答:优点:模块化,开发及维护成本较低
  缺点:SPA项目过大时首屏加载慢
151、DOM渲染在哪个周期中就已经完成了?

答:beforeMount吧,渲染完成但尚未挂载到页面中
152、第一次加载页面时会触发哪几个钩子?

答:beforeCreate, created, beforeMount, mounted
153、vue生命周期总共有几个阶段?

答:8个
154、vue生命周期的作用是什么?

答:准确地控制数据流和其对DOM的影响
155、vue和angular有什么区别呢?

答:https://www.cnblogs.com/scode2/p/8820613.html
156、如何引入scss?引入后如何使用?

答:1、安装scss依赖包
  2、在 webpack下配置好对应的loader
  3、在style样式标签上添加lang="scss",即<style lang="scss">。
157、使用vue开发过程你是怎么做接口管理的?

答:封装axios 请求拦截 响应拦截
158、为何官方推荐使用axios而不用vue-resource?

答:大势所趋.
159、你了解axios的原理吗?有看过它的源码吗?

答:1.axios通过对Promise的封装实现异步请求;
160、你有封装过axios吗?主要是封装哪方面的?

答:封装处理配置(路径、时间、token)、统一管理接口、错误处理、不同形式的请求、消息提示、loading等。
161、如何中断axios的请求?

答:cancelToken (https://blog.csdn.net/qq_43074355/article/details/84108307
162、axios是什么?怎样使用它?怎么解决跨域的问题?

答:是一种异步请求方法;npm i axios 反向代理
163、说说你对vue的template编译的理解?

答:将template里的组件编译成虚拟dom
164、v-on可以绑定多个方法吗?

答:可以;例如<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />
165、vue常用的修饰符有哪些?列举并说明

答:同上
166、你认为vue的核心是什么?

答:一,数据驱动:专注于View 层。它让开发者省去了操作DOM的过程,只需要改变数据。
  二,组件响应原理:数据(model)改变驱动视图(view)自动更新
  三,组件化:扩展HTML元素,封装可重用的代码。
167、v-model是什么?有什么用呢?

答:语法糖;,相当于v-bind:value="xxx" 和 @input,意思是绑定了一个value属性的值,子组件可对value属性监听,通过$emit('input', xxx)的方式给父组件通讯。自己实现v-model方式的组件也是这样的思路。
168、说说你对vue的mixin的理解,有什么应用场景?

答:混入;博客上有详细说明。自己找
169、SPA首屏加载速度慢的怎么解决?

答:1.通过Gzip压缩;2.使用路由懒加载:3.利用webpack中的externals这个属性把打包后不需要打包的库文件都分离出去,减小项目打包后的大小:4.使用SSR渲染
170、删除数组用delete和Vue.delete有什么区别?

答:delete:不能触发vue的响应式更新 Vue.delete:能
171、动态给vue的data添加一个新的属性时会发生什么?怎样解决?

答:直接添加属性会因为新的属性没有监听导致页面不能响应该数据的变化。通过vue.$set方法来动态添加响应式属性
对象类型写法:this.$set("要给哪个对象添加","添加的对象的key",'添加的对象的value')
数组类型写法:this.$set('你要修改的数据','你要修改这个数组的索引值',要修改的值val)

172、组件和插件有什么区别?

答:组件 (Component) 是用来构成你的 App 的业务模块,它的目标是 App.vue。;插件 (Plugin) 是用来增强你的技术栈的功能模块,它的目标是 Vue 本身。

173、说说你使用vue过程中遇到的问题(坑)有哪些,你是怎么解决的?

答:这能说的完?
174、说说你对选项el,template,render的理解

答:el: 把当前实例挂载在元素上
  template: 实例模版, 可以是.vue中的template, 也可以是template选项, 最终会编译成render函数
  render: 不需要通过编译的可执行函数
  template和render, 开发时各有优缺点, 不过在线上尽量不要有template

template模版 -> 编译生成 AST(提取最大静态树) ->生成render函数 ->生成虚拟dom -> 经过diff、patch算法 生成新的ui

175、vue实例挂载的过程是什么?

答:https://www.jianshu.com/p/7508d2a114d3
176、vue在组件中引入插件的方法有哪些?

答:import、vue.use()
177、v-if和v-for的优先级是什么?如果这两个同时出现时,那应该怎么优化才能得到更好的性能?

答:当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以我们应该先把v-if过滤出来,在使用v-for渲染
178、分别说说vue能监听到数组或对象变化的场景,还有哪些场景是监听不到的?无法监听时有什么解决方案?

答:vue无法监听的数组变化的场景:【1】通过数组索引改变数组元素的值;【2】改变数组的长度 ;解决方案:【1】this.$set(arr, index, newVal);【2】通过splice(index,num,val)【3】使用临时变量作为中转,重新赋值数组;
  vue无法监听到对象变化的场景:【1】对象的增加、删除无法被vue监听到;解决方案:【1】使用 this.$set(object, key, value)(vue 无法监听 this.set 修改原有属性)【2】使用Object.assign(),直接赋值的原理;(推荐使用)

179、$nextTick有什么作用?

答:vue响应式的改变一个值以后,此时的dom并不会立即更新,如果需要在数据改变以后立即通过dom做一些操作,可以使用$nextTick获得更新后的dom。
180、为什么data属性必须声明为返回一个初始数据对应的函数呢?

答:对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题。
181、怎么在watch监听开始之后立即被调用?

答:immediate:true
182、watch怎么深度监听对象变化?

答:博客上有写过;
183、watch和计算属性有什么区别?

答:当你有一些数据需要随着其它数据变动而变动时,使用computed,它具有缓存;
   当你需要根据某个属性是否发生变化时执行相应函数,使用watch;不具有缓存性

184、vue如何监听键盘事件?

答:v-on:keyup后面接修饰符,代表你想监听的按键
185、v-for循环中key有什么作用?

答:key唯一标识、防止复用dom、高效更新dom;diff时更快更准确找到变化的位置。
186、怎么在vue中使用插件?

答:缓缓打出一个 ? 号
187、你有写过自定义组件吗?

答:写过?还发布npm了,npm i timestamp-hy
188、说说你对keep-alive的理解是什么?

答:keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染

189、怎么使css样式只在当前组件中生效?

答:scoped 或者给组件起一个唯一的类名
190、你有看过vue的源码吗?如果有那就说说看

答:看过,太多了不好说
191、你有写过自定义指令吗?自定义指令的生命周期(钩子函数)有哪些?

答:https://cn.vuejs.org/v2/guide/custom-directive.html#%E7%AE%80%E4%BB%8B
192、v-show和v-if有什么区别?使用场景分别是什么?

答:
193、说说你对MVC、MVP、MVVM模式的理解

答:https://www.cnblogs.com/keitsi/p/5764785.html
194、说下你对指令的理解?

答:主要提供了一种机制,将数据的变化映射为DOM行为
195、请描述下vue的生命周期是什么?

答:生命周期就是vue从开始创建到销毁的过程,分为四大步(创建,挂载,更新,销毁),每一步又分为两小步,如beforeCreate,created。beforeCreate前,也就是new Vue的时候会初始化事件和生命周期;beforeCreate和created之间会挂载Data,绑定事件;接下来会根据el挂载页面元素,如果没有设置el则生命周期结束,直到手动挂载;el挂载结束后,根据templete/outerHTML(el)渲染页面;在beforeMount前虚拟DOM已经创建完成;之后在mounted前,将vm.$el替换掉页面元素el;mounted将虚拟dom挂载到真实页面(此时页面已经全部渲染完成);之后发生数据变化时触发beforeUpdate和updated进行一些操作;最后主动调用销毁函数或者组件自动销毁时beforeDestroy,手动撤销监听事件,计时器等;destroyed时仅存在Dom节点,其他所有东西已自动销毁。这就是我所理解的vue的一个完整的生命周期;
196、vue组件之间的通信都有哪些?

答:见博客
197、什么是虚拟DOM?

答:虚拟DOM是:用JS来模拟一颗 DOM 树,放在浏览器内存中
  当你要改变时,虚拟 DOM 使用 diff 算法进行 新旧虚拟 dom 的比较将修改了的更新到实际的 DOM 树,减少了 DOM 操作
198、什么是双向绑定?原理是什么?

答:通过Observer 把数据劫持(Object.defineProperty()) 、加入到订阅器(Dep) 订阅器收集订阅者(Watcher )、视图通过编译(Compile)、解析指令(Directive)等一些列操作收集给订阅者 、最后通过触发数据变化update 通知所有订阅者完成数据驱动
199、vue和react有什么不同?使用场景是什么?

答:1、vue是完整一套由官方维护的框架,核心库主要有由尤雨溪大神独自维护,而react是不要脸的书维护(很多库由社区维护),曾经一段时间很多人质疑vue的后续维护性,似乎这并不是问题。
  2、vue上手简单,进阶式框架,白话说你可以学一点,就可以在你项目中去用一点,你不一定需要一次性学习整个vue才能去使用它,而react,恐怕如果你这样会面对项目束手无策。
  3、语法上vue并不限制你必须es6+完全js形式编写页面,可以视图和js逻辑尽可能分离,减少很多人看不惯react-jsx的恶心嵌套,毕竟都是作为前端开发者,还是更习惯于html干净。
  4、很多人说react适合大型项目,适合什么什么,vue轻量级,适合移动端中小型项目,其实我想说,说这话的人是心里根本没点逼数,vue完全可以应对复杂的大型应用,甚至于说如果你react学的不是很好,写出来的东西或根本不如      vue写的,毕竟vue跟着官方文档撸就行,自有人帮你规范,而react比较懒散自由,可以自由发挥
  5、vue在国内人气明显胜过react,这很大程度上得益于它的很多语法包括编程思维更符合国人思想
200、说说vue的优缺点

答:优点:1. 数据驱动
  2.模块化
  3.轻量级
  4.SPA
  5. 版本3.0的界面化管理工具比较好使
  6.vue易入门
缺点:1. 不支持低版本浏览器
201、有使用过vue吗?说说你对vue的理解

答:同上

 

posted @ 2021-04-20 16:17  菜鸟小何  阅读(1285)  评论(0编辑  收藏  举报