Vue面试题进

概念性问题

什么是MVVM？MVC？他们的区别是什么 [已完成]

他们都是常见的软件架构思想
- mvc
  - 视图（View）：用户界面。
  - 控制器（Controller）：业务逻辑
  - 模型（Model）：数据保存
  - 通信方式： view -> controller -> model -> view
- mvvm
  - 视图（View）
  - 模型（Model）
  - 视图模型（ViewModel）
  - 通信方式： view <-> ViewModel -><- model

双向数据绑定的原理 [已完成]

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

说一下你了解的vue3.0 [已完成]

速度快，体积小，使用ts重构响应式原理改变proxy，diff算法 composition

Performance: 性能比Vue 2.x快了1.2-2倍
- diff算法优化
  - Vue3.0中新增了虚拟dom的静态标记
- hoistStatic 静态提升
- 在Vue3中对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可
- cacheHandlers 事件侦听器缓存
  - 默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化，但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可
Tree shaking support: 按需编译，体积比Vue 2.x更小
Composition API: 组合API（类似React Hooks）
Better TypeScript support：更好的Ts支持
Custom Renderer API：暴露了自定义的渲染API
Fragment， Teleport（Protal），Suspense：更先进的组件
组合API（Composition API）是 Vue3.0 的一个新特性。它的诞生主要是解决 Vue2.0 存在的问题，即数据和业务逻辑分离的问题

通用

常⻅的事件的修饰符有哪些 [已完成]

.stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递） .prevent：阻止默认事件的发生 .capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件 .self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响 .once：设置事件只能触发一次，比如按钮的点击等。 .passive：该修饰符大概意思用于对DOM的默认事件进行性能优化，根据官网的例子比如超出最大范围的滚动条滚动的 .native：在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。

为什么要设置key值，特别是循环操作的时候 [已完成]

key的作用主要是为了diff算法更高效的更新虚拟DOM。另外vue中在使用相同标签名元素（组件复用）的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，

为什么在html中进⾏事件的绑定操作 [已完成]

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

如何定义组件、指令、过滤器？全局、局部定义的⽅式各⾃是什么？[已完成]

[组件] 全局：Vue.component("Component",{template:""}) 本地组件：放在vue实例中 components:{ Component:{ template:"" } }

[指令] 全局： Vue.directive("focus",{ inserted:function(el){ el.focus() } })

本地：放在vue实例中 directives:{ focus:{ inserted:function(el){ el.focus() } } }

[过滤器]： {{msg|fn}} 全局：Vue.filter("fn",mgs=>{ return msg.replace(/you/g,"me") })

本地: filters:{ fn:function(msg){} }

在Vue中进⾏数据请求⼀般采⽤什么⽅式 [已完成]

1：Vue-resource （1）：先进性模块的安装 cnpm i vue-res –S （2）：在入口文件main.js里引入vue-resource （3）：使用这个插件 use.resource （4）：在项目中使用this.$http.get() 2：axios （1）：axios是第三方插件，要先进行插件的安装。Cnpm i axios –S （2）：直接调用，和Vue-resource的区别是：axios在一个页面用一次就要调用一次。Vue-resource是绑定全局。 3：axios的跨域请求（1）：在config>index.js>proxyTable配置：target填写自己想要的地址（2）：在使用axios时，URL为地址后面所带的参数，配置好以后运行即可 4：多个并发请求（1）：在以上的配置下，定义多个axios请求函数，用axios.all统一调用即可。详解见：www.jianshu.com/p/6b82722e2…

在Vue⽂件中template模板部分，使⽤template标签的作⽤是什么 [已完成]

h5新增标签更加语义化用于包裹多个元素，并且自己不存在

使用template时，会忽略template标签直接输出template中的内容。template不会渲染成元素，用div的话会被渲染成元素。把if,show,for等语句抽取出来放在template上面，把绑定的事件放在temlpate里面的元素上，可以使html结构更加清晰，还可以改善一个标签过长的情况。

介绍⼀下SPA，优势以及不⾜，如何解决 [已完成]

1：SPA的全称是单页面应用。一个SPA就是一个web应用，他所需的资源有HTML JS CSS等，一次请求就加载完成。也就是不需要刷新的动态加载用术语“单页”就是在页面初始化加载以后就永远不会刷新重新加载。

优点
- 良好的交互体验
- 良好的前后端工作分离模式
- 减轻服务器压力
缺点
- SEO难度较高
- 前进、后退管理
- 初次加载耗时多

首屏渲染慢，解决方案

1.按需加载

2.路由懒加载

3.图片懒加载，股价屏，上拉加载

4.数据缓存

Vue和React有哪些相似的地⽅ [已完成]

二者都是当下流行的主流框架一、使用 Virtual DOM 二、提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。三、将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

import * as xxx from yyy，xxx的意思是什么 [已完成]

由于该文件导出不止一个函数，所以不能采用上面方法。此时应该导入整个模块，把tools文件里所有exports的方法都导入： import * as tools from "js文件的路径"

textarea中如果实现换⾏，在利⽤ {{}}插值表达式显示textarea中的内容是不显示换⾏的，如果需要显示换⾏，如何实现 [已完成]

1.使用模板字符串 2. 在字符串中加入 \n

1：用正则表达式去匹配换行符，然后用替换。用V-html绑定到标签上，但是这种方式比较麻烦，所以不建议使用。 2：设置write-space属性，给元素节点加上一个类名。设置 css属性 write-space：pre-wrap。Pre-wrap值的意思是保留空白并且正常运行。

v-if与v-show的差异区别以及应⽤场景 [已完成]

v-if 是“真正”的条件渲染,也是惰性的,只有条件为真时才会渲染,有更高的切换开销 v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换,有更高的初始渲染开销如果非常频繁地切换,使用v-show。运行时条件很少改变,则使用v-if

组件

$data,$ el, $ref,$ options，实例属性有哪些 [已完成]

$data: Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。$ el: Vue 实例使用的根 DOM 元素 $ref: 一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。$ options: 用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处

为什么component中的data是⼀个function [已完成]

答：因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。　　组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了

methods/computed/watch之间的概念以及区别 [已完成]

computed：计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。 method：只要发生重新渲染， method 调用总会执行该函数。 watch：没有缓存性,更多的是观察的作用,可以监听某些数据执行回调

样式处理⽅式有⼏种？多样式设置该如何操作 [已完成]

绑定 HTML Class

对象语法：
数组语法：
用在组件上绑定内联样式
对象语法：
data: { styleObject: { color: 'red', fontSize: '13px' } }
数组语法：
自动添加前缀
多重值

全局样式如何设置，有哪⼏种⽅法

写一个css样式，在main.js里面引入

组件样式应该如何设置 [已完成]

当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

例如，如果你声明了这个组件： Vue.component('my-component', { template: '

' })

然后在使用它的时候添加一些 class：

HTML 将被渲染为：

对于带数据绑定 class 也同样适用：

当 isActive 为 truthy[1] 时，HTML 将被渲染成为：

Vue组件中如何引⼊外部的CSS⽂件 [已完成]

@import css文件的相对路径

如何优雅的只在当前⻚⾯中覆盖ui库中组件的样式 [已完成]

在assent中新建css的style.stylus,然后找到需要修改的类名修改并在main.js中引入

⽣命周期钩⼦函数有哪些 [已完成]

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed activated deactivated errorCaptured

mixins代码混⼊的功效及作⽤是什么 [已完成]

分发可复用功能

什么是slot [已完成]

简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活

动态组件加载⽅式是什么

keep-alive的作⽤是什么 [已完成]

缓存组件

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

数据请求是在哪个钩⼦函数中执⾏？为什么？

数据请求可以在created,beforeMount，mounted里面接收数据

⽗组件如何找到⼦组件并调⽤⼦组件中的⽅法？⼦组件如何找到⽗组件并调⽤⽗组件中的⽅法 [已完成]

父传子在父组件里面自定义一个属性在子组件里面用props接受

插槽

使用this. $root或者this.$ parent

依赖注入(穿透性) 父组件使用 provide() {return {xxxx}} 子组件 inject: ['xxxx']
子传父在父组件里面定义一个自定义的方法在子组件里面调用this. $emit() this.$ emit()的第一个参数是自定义方法的名字，后面是参数

作用域插槽

使用this.$refs

vue中provide与inject的作⽤与功能是什么

通过在父组件中provide一些数据然后再所有子组件中都可以通过inject获取使用该参数, 主要是为了解决一些循环组件比如tree, menu, list等, 传参困难, 并且难以管理的问题, 主要用于组件封装, 常见于一些ui组件库

组件传参

组件之间的关系有哪些 [已完成]

父传子
子传父
兄弟组件传值

通过中央通信 let bus = new Vue()
- A: methods: {函数{bus.$emit("自定义事件名",数据)}}发送
- B: created() {bus.$on("A发送过来的自定义事件名",函数)}进行数据接收
通过vuex

组件之间的数据传递⽅式是如何的 [已完成]

父传子 props $root$ parent 插槽 provide inject
子传父 $emit 作用域插槽$ refs
兄弟组件传值

通过中央通信 let bus = new Vue()
- A: methods: {函数{bus.$emit("自定义事件名",数据)}}发送
- B: created() {bus.$on("A发送过来的自定义事件名",函数)}进行数据接收
通过vuex eventbus(中央事件总线)

props的接收⽅式有⼏种

2种,数组和对象

观察者模式的使⽤场景

轻量级的组件数据传递⽅式可以通过什么操作

eventBus(中央事件总线)

指令

Vue常⽤指令有哪些 [已完成]

v-bind 缩写成 :
v-if
v-for
v-model
v-on 缩写成 @
v-once 只渲染一次
v-html 将内容转成标签解析 innerHTML
v-text 将内容直接输出 innerTEXT
v-else 后面没东西，紧挨着v-if
v-else-if
v-show

v-model的修饰符主要有哪⼏个 [已完成]

.number 输入字符串转为有效的数字 .lazy 取代input监听change事件 .trim 输入首尾空格过滤

指令的⽣命周期钩⼦函数有哪些 [已完成]

5个

bind

inserted

update

componentUpdate

unbind

new Vue [创建实例] 初始化事件和生命周期 beforeCreate[当初始化完成时，vue会自动触发一个生命周期钩子函数] 注入数据,初始化响应式数据 created[created执行后，基本上vue实例的初始也完成了] 是否有el和template选项 beforeMount 将数据挂载到模板中,将虚拟dom转成真实dom mounted 数据改变时触发,dom的更新前后 beforeUpdate 将改变后的数据重新渲染 updated 组件销毁的时候触发 beforeDestroy destroyed activaed 缓存组件被激活时调用 deactivated 缓存组件被停用时调用 errorCaptured 子孙组件出错时调用

指令的⽣命周期钩⼦函数的参数通常有哪些呢 [已完成]

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property： name：指令名，不包括 v- 前缀。 value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。 oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。 arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。 modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vNode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVNode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

v-cloak 属性应该如何使⽤，其作⽤是什么 [已完成]

解决{{}}闪现问题，要配合css一起使用

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

过滤器

过滤器第⼀个参数是什么 [已完成]

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数

如何定义多参数？多参数的调⽤⽅式是怎么样的 [已完成]

{{ message | filterA('arg1', arg2) }} filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。在父组件里设置filters:{filter(){return xxx}},filters:{filterA(){return xxx}}

动画

在Vue中如何实现动画 [已完成]

使用animate.css动画库
使用Js钩子函数
使用velocity js动画库
使用标签过渡类名设置样式
- v-enter：定义进入过渡的开始状态
- v-enter-active：定义过渡的状态
- v-enter-to: 定义进入过渡的结束状态
- v-leave: 定义离开过渡的开始状态
- v-leave-active：定义过渡的状态
- v-leave-to: 定义离开过渡的结束状态

vue的transition中mode可以设置什么值？各⾃代表什么意思

mode - string，控制离开/进入过渡的时间序列。

有效的模式有 "out-in"（先出后进）和 "in-out"（先进后出）；默认同时进行

vue的transition中appear的作⽤是什么

appear - boolean，是否在初始渲染时使用过渡。默认为 false。

vue如果想对多个元素实现动画操作⽤什么⽅法

元素作为多个元素/组件的过渡效果。渲染一个真实的 DOM 元素。默认渲染，可以通过 tag attribute 配置哪个元素应该被渲染。注意，每个的子节点必须有独立的 key，动画才能正常工作

如何指定transition的动态类型为transition或者animation类型

通过css

路由问题

在Vue中如何实现路由操作，操作步骤是怎么样的

路由表-> main.js引入 -> router-link router-view

路由的内容渲染通过什么⽅式实现。

hashchange事件

如何实现路由的⾼亮显示，需要注意什么内容

用加active-class 是否精确匹配exact两个属性

to:表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。 tag:有时候想要渲染成某种标签，例如

。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。 active-class:设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

路由的嵌套如何实现

使用children

在根目录设置在根目录的子组件里设置就实现了路由嵌套

程序式的路由跳转如何实现 [已完成]

push replace go

1.router-link标签会渲染为标签，咋填template中的跳转都是这种； 2.另一种是编辑是导航，也就是通过js跳转比如router.push('/home')

路由的重定向如何实现

路由中配置redirect属性

路由的分块加载如何实现

component :()=>import()

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。 Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。 const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

路由中的钩⼦函数分成⼏⼤类，都有哪些 [已完成]

全局的路由钩子函数：beforeEach、afterEach 单个的路由钩子函数：beforeEnter 组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

什么是route，什么是router，它们的区别是什么 [已完成]

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$ router是“路由实例”对象包括了路由的跳转方法，钩子函数等

Vue路由模式有哪⼏种？其实现原理是什么 [已完成]

答: hash模式和 history模式 abstract模式（不在浏览器端，强制使用此模式，适用weex框架）

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。 hash 模式下:仅 hash 符号之前的内容会被包含在请求中，如 www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。 history 模式:前端的 URL 必须和实际向后端发起请求的 URL 一致，如 www.xxx.com/items/id。后端… /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

路由变化⻚⾯数据不刷新问题该如何解决 [已完成]

使用beforeRouteUpdate（to, from, next){}

或者使用watch(){

$route(){}

}

调用this.$set()方法
调用this.$forceUpdate()方法
解决方案： this.items = [...this.items]。通过解构赋值，重新给items赋值。

如果在created钩⼦函数中设置了setTimeout或者setInterval，在实现路由切换或跳转前需要进⾏什么操作

在销毁前清除计时器

Vue的scrollBehavior中savedPosition的作⽤是什么 [已完成]

后退或者前进的时候，保留滚动条记录

[使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样] scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的前进/后退按钮触发) 时才可用。这个方法返回滚动位置的对象信息 [将其挂载到从页面级别的过渡组件的事件上，令其滚动行为和页面过渡一起良好运行是可能的。但是考虑到用例的多样性和复杂性，我们仅提供这个原始的接口，以支持不同用户场景的具体实现。]

router-link⾥的元素点击加stop失效如何解决 [已完成]

使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。

列表进⼊详情⻚的传参问题，操作步骤如何

路由中的参数如何设置、传递、获取 [已完成]

paops:true

vue-router 可以通过 params 与 query 进行传参 // 传递 this. $router.push({path: './xxx', params: {xx:xxx}}) this.$ router.push({path: './xxx', query: {xx:xxx}}) // 接收 this. $route.params this.$ route.query params 是路由的一部分,必须要有。query 是拼接在 url 后面的参数，没有也没关系 params 不设置的时候，刷新页面或者返回参数会丢，query 则不会有这个问题

什么是路由设置中的meta信息 [已完成]

定义路由的时候可以配置 meta 字段，我们可以在这里设置一些自定义信息，供页面组件或者路由钩子函数中使用。路由前置守卫：（我们可以通过 $route.meta.xxxx 获取路由元信息中的数据）我们可以在钩子函数 router.beforeEach 中获取 meta 中的 title 数据，并设置为页面标题

vue-cli构建的项⽬如何设置每个⻚⾯的title [已完成]

我们可以在钩子函数 router.beforeEach 中获取 meta 中的 title 数据，并设置为页面标题

路由中next的作⽤是什么

function一定调用该方法resolve折耳根钩子,执行效果依赖next方法的调用参数,可以控制网页的跳转

Vuex

请你介绍⼀下什么是Vuex [已完成]

vuex是状态管理模式（全局状态管理工具） vuex由5部分组成

state ：存放全局状态的地方
getters：可以认为是store的计算属性
mutations：唯一能改变state的地方，存放纯函数，不能放异步函数，（写事件的，相当于 methods)
actions：用来写异步函数的
module:数据分块

Vuex中的异步处理如何实现 [已完成]

在actions里面操作，提交到mutations

vuex中的异步方法，例如请求都要在actions中声明，通过解构出commit参数，再将请求返回的数据通过commit提交到mutations中声明的方法进行修改state中的数据

如何利⽤Vue实现⼀个购物⻋操作，分析⼀下操作流程以及会使⽤到的主要技术栈和知识点

mapState/mapGetters/mapMutations/mapActions的功能作⽤是什么 [已完成]

mapState:为组件创建计算属性以返回 Vuex store 中的状态 mapGetters:为组件创建计算属性以返回 getter 的返回值 mapActions:创建组件方法分发 action mapMutations:创建组件方法提交 mutation

在组件中如何调⽤Vuex中的mutations⽅法？⼜如何调⽤actions中的⽅法 [已完成]

dispatch调用actions中的方法,commit调用mutations方法

Vuex中的modules的功能是什么 [已完成]

modules，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理

vuex数据的持久化问题如何解决 [已完成]

解决方案通过 vuex-persistedstate这个插件，来实现将数据存储到本地，从而实现刷新后state仍然还存在。

数据放到vuex的同时，在本地存储localStorage里面同时存一份

插件

Vue的插件是如何理解的？有⽆使⽤过⼀些插件 [已完成]

插件通常用来为 Vue 添加全局功能使用过的插件:vuex,vue-router

有没有编写过⾃定义的插件？如果有，简述⼀下⾃定义插件的开发流程 [已完成]

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象

添加全局方法或 property
添加全局资源
注入组件选项
添加实例方法

框架

与Vue经常配合的UI框架你们使⽤的是哪些 [已完成]

ElementUI pc端饿了么
vant 移动端有赞
iView
mintui 移动端
vuetify pc+移动
ant-design-vue 蚂蚁金服
cube-ui 滴滴

elementUI,mintUI等在进⾏⼀些click操作时⽆法响应事件（⽐如表头点击），该如何解决 [已完成]

用@click.native即可解决

UI框架如果很⼤，是否会采⽤按需加载，什么是UI框架组件的按需加载 [已完成]

会：按需加载是前端性能优化的一种。按需加载：指的是当用户触发了动作时才加载对应的功能。触发的动作，是要看具体的业务场景而言，包括但不限于以下几个情况：鼠标点击、输入文字、拉动滚动条，鼠标移动、窗口大小更改等。加载的文件，可以是JS、图片、CSS、HTML等。后面将会详细介绍“按需”的理解。

难点问题

nextTick的作⽤是什么 [已完成]

dom更新完成后执行的方法

作用：Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM. $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用$ nextTick，则可以在回调中获取更新后的 DOM

单向数据流与双向数据绑定的区别是怎么样的 [已完成]

单向数据流：组件之间

双向数据绑定:view 和viewmodel

单向数据流：顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种 action 来维护对应的
state双向数据绑定：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化，增加了出错时 debug 的难度

Vue中如何实现全局变量的定义

1：设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。使用方式1：在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。使用方式2：在程序入口的main.js文件里面，将上面那个Global.vue文件挂载到Vue.prototype

Vue的⻣架屏实现是否有了解

在开发webapp的时候总是会受到首屏加载时间过长的影响，主流的解决方法是在载入完成之前显示loading图效果，而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题，越来越多的APP采用了“骨架屏”的方式去提升用户体验。使用vue-server-renderer来实现骨架屏

ssr(server side render)服务器端渲染是否有了解

SSR简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序优点:1. 更利于SEO。2.更利于首屏渲染劣势:1.更高的开发要求 2.更高的服务器要求

nuxt是什么，它与vue之间的关系是怎么样的

路由 nuxt按照 pages 文件夹的目录结构自动生成路由 http://localhost:3000/user/reg 相当于去访问 pages文件夹下的 user文件夹下的 reg.vue vue需在 src/router/index.js 手动配置路由
入口页面 nuxt页面入口为 layouts/default.vue vue页面入口为 src/App.vue
nuxt 类似 router-view , nuxt-link 类似 router-link
webpack配置 nuxt内置webpack，允许根据服务端需求，在 nuxt.config.js 中的build属性自定义构建webpack的配置，覆盖默认配置 vue关于webpack的配置存放在build文件夹下
asyncData 里面发送ajax 这个东西跟生命周期这些都是平级的要理解asyncData方法执行时，其实是在服务端完成的，这个数据是在服务端渲染好了的作者：布卡卡的晴空链接：www.jianshu.com/p/777c92079… 来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Vue中axios的拦截器有没有使⽤过。该功能主要可以实现什么⽬标

请求拦截

响应拦截

1.axios：从 node.js 创建 http 请求支持 Promise API 客户端支持防止CSRF 提供了一些并发请求的接口（重要，方便了很多的操作） 2.jQuery ajax：本身是针对MVC的编程,不符合现在前端MVVM 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案 JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

在watch或者created⾥⾯操作dom，需要⽤什么⽅式?

在标签中加上ref='dom'，然后在代码中this. $refs.dom这样就拿到了页面元素例如：<div class='box' ref='myBox'>你好</div> 让你好的颜色显示为红色：this.$ refs.myBox.style.color = 'red

有⼀个列表显示10000条记录，如何优化它的性能，原理如何

1.分页

2.上拉加载更多

watch对象,内部属性值改变后不触发watch⽅法需要如何解决

对象，数组，如果更改里面的数据，会响应式，但是如果新增内容不能变

注意：数组的push方法，也可以实现响应式

vue开发的时候常⽤的调试⼯具是什么，如何监控vuex状态的变化

深度监听

obj:{

handler(){

需要执行的代码

}，

deep:true

}

在Vue项⽬开发的时候，⼀般采⽤的常⽤在线编辑器是什么

vue中$set的使⽤场景

vuejs 中的.native原⽣事件是什么意思？如何使⽤

vue动态组件加载的实现⽅法是什么

1.使用import导入组件，可以获取到组件 2.使用import导入组件，直接将组件赋值给componet 3.使用require 导入组件，可以获取到组件 4.使用require 导入组件，直接将组件赋值给componet

vue中render: h => h(App);是什么意思 [已完成]

h是Vue.js 里面的 createElement 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。

vue数据改变，DOM不渲染问题如何解决 [已完成]

调用this.$set(对象名，更改的键名，更改的值名)方法
调用this.$forceUpdate()方法
解决方案： this.items = [...this.items]。通过解构赋值，重新给items赋值。

vue题目进阶