Vue相关问题

1. 说一下Vue的双向绑定数据的原理

vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调

2. 解释单向数据流和双向数据绑定

单向数据流： 顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种 action 来维护对应的 state

双向数据绑定：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量业务无关的代码。缺点就是无法追踪局部状态的变化，增加了出错时 debug 的难度

vue生命周期钩子

1.beforcreate

2.created

3.beformount

4.mounted

5.beforeUpdate

6.updated

7.actived

8.deatived

9.beforeDestroy

10.destroyed

 

3. Vue 如何去除url中的 #

vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 #。如果不想使用 #， 可以使用 vue-router 的另一种模式 history

new Router({
  mode: 'history',
  routes: [ ]
})

需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面

4. 对 MVC、MVVM的理解

MVC

特点：

1. View 传送指令到 Controller
2. Controller 完成业务逻辑后，要求 Model 改变状态
3. Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的

MVVM

特点：

1. 各部分之间的通信，都是双向的
2. 采用双向绑定：View 的变动，自动反映在 ViewModel，反之亦然

具体请移步 这里

5. 介绍虚拟DOM

参考这里

6. vue生命周期的理解

vue实例有一个完整的生命周期，生命周期也就是指一个实例从开始创建到销毁的这个过程

• beforeCreate() 在实例创建之间执行，数据未加载状态
• created() 在实例创建、数据加载后，能初始化数据，dom渲染之前执行
• beforeMount() 虚拟dom已创建完成，在数据渲染前最后一次更改数据
• mounted() 页面、数据渲染完成，真实dom挂载完成
• beforeUpadate() 重新渲染之前触发
• updated() 数据已经更改完成，dom 也重新 render 完成,更改数据会陷入死循环
• beforeDestory() 和 destoryed() 前者是销毁前执行（实例仍然完全可用），后者则是销毁后执行

7. 组件通信

父组件向子组件通信

子组件通过 props 属性，绑定父组件数据，实现双方通信

子组件向父组件通信

将父组件的事件在子组件中通过 $emit 触发

非父子组件、兄弟组件之间的数据传递

/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();

/*监听事件*/
event.$on('eventName', (val) => {
    //......do something
});

/*触发事件*/
event.$emit('eventName', 'this is a message.')

Vuex 数据管理

8. vue-router 路由实现

路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能

参考 这里

9. v-if 和 v-show 区别

使用了 v-if 的时候，如果值为 false ，那么页面将不会有这个 html 标签生成。

v-show 则是不管值为 true 还是 false ，html 元素都会存在，只是 CSS 中的 display 显示或隐藏

10. $route和$router的区别

$router 为 VueRouter 实例，想要导航到不同 URL，则使用 $router.push 方法

$route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等

11. NextTick 是做什么的

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

具体可参考官方文档 深入响应式原理

12. Vue 组件 data 为什么必须是函数

因为js本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了

13. 计算属性computed 和事件 methods 有什么区别

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的

不同点：

computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值

对于 method ，只要发生重新渲染，method 调用总会执行该函数

14. 对比 jQuery ，Vue 有什么不同

jQuery 专注视图层，通过操作 DOM 去实现页面的一些逻辑渲染； Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作

Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发

15. Vue 中怎么自定义指令

全局注册

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部注册

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

参考 官方文档-自定义指令

16. Vue 中怎么自定义过滤器

可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})

<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>

过滤器也同样接受全局注册和局部注册

17. 对 keep-alive 的了解

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

<keep-alive>
  <component>
    <!-- 该组件将被缓存！ -->
  </component>
</keep-alive>

可以使用API提供的props，实现组件的动态缓存

具体参考 官方API

18. Vue 中 key 的作用

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误

具体参考 官方API

19. Vue 的核心是什么

数据驱动 组件系统

20. vue 等单页面应用的优缺点

优点：

• 良好的交互体验
• 良好的前后端工作分离模式
• 减轻服务器压力

缺点：

• SEO难度较高
• 前进、后退管理
• 初次加载耗时多

21. vue-router 使用params与query传参有什么区别

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 则不会有这个问题

为什么组件中的data属性的值必须是一个函数？

因为在一个组件被多次引用的情况下，如果data的值是一个Object的话，那么由于Object是一个引用类型，所以即使是该组件被多次引用，而其实操作的是同一个对象，最终导致了引用该组件的所有位置都同步的显示了。

Vue相关问题

mvc是什么？mvp是什么？ mvvm是什么？他们区别和原理是什么？
http://www.360doc.com/content/16/0413/11/32348297_550241237.shtml
一、MVC（Model-View-Controller）
即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。
MVC使用非常广泛，比如JavaEE中的SSH框架
二、MVP（Model-View-Presenter）
与MVC的基本思想有相通的地方：Controllerer负责逻辑的处理，Model提供数据，View负责显示。
MVP与MVC的重要区别是：在MVP中View不直接使用Model，他们之间的通信是通过Presenter来进行的，所有的交互都发生在Presenter内部，而在MVC中View会直接从Model中读取数据而不是通过Controller。
二、MVVM（Model-View-ViewModel）
即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
MVVM和MVP的关系：MVVM基本与MVP模式一致，唯一的区别是MVVM采用双向绑定（data-binding）
MVVM的优点？
1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。
2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
4. 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
一个model+view+viewModel框架，数据模型model，viewModel连接两个
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷

谈谈你对vue的理解和看法？
https://www.jianshu.com/p/0c0a4513d2a6
https://blog.csdn.net/wmwmdtt/article/details/55095420
（1）简洁 （2）轻量 （3）快速 （4）数据驱动 （5）模块友好 （6）组件化

vuejs与angularjs以及react的区别？
https://www.jianshu.com/p/e24f95349c1f
react和vue有哪些不同，说说你对这两个框架的看法
相同点
· 都支持服务器端渲染
· 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
· 数据驱动视图
· 都有支持native的方案,React的React native,Vue的weex
不同点
· React严格上只针对MVC的view层,Vue则是MVVM模式
· virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
· 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
· 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
· state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理

聊聊你对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的理解？
1、使用vue不必担心布局更改和类名重复导致的js重写，因为它是靠数据驱动双向绑定，底层是通过Object.defineProperty() 定义的数据 set、get 函数原理实现。
2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工具包就可以开工。项目经理坐等收楼就好。
3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。
4、js的代码无形的规范，团队合作开发代码可阅读性更高。

vue的原理？
https://cn.vuejs.org/v2/guide/reactivity.html
https://blog.csdn.net/tangxiujiang/article/details/79594860
Vue的双向数据绑定原理是什么？
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
vue钩子函数并解释？created和mounted的区别，分别在什么时候用?
https://www.jb51.net/article/146883.htm
https://www.cnblogs.com/goloving/p/9211295.html
https://segmentfault.com/a/1190000008010666
beforeCreate/created/beforeMounted/mounted
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。
vue-router是什么？它有哪些组件？
https://www.cnblogs.com/SamWeb/p/6610733.html
https://www.cnblogs.com/bydzhangxiaowei/p/9055484.html
vue用来写路由一个插件。router-link、router-view
在vue-router中, 我们看到它定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。<router-link> 就是定义页面中点击的部分，<router-view> 定义显示部分，就是点击后，区配的内容显示在什么地方。所以 <router-link> 还有一个非常重要的属性 to，定义点击之后，要到哪里去， 如：<router-link to="/home">Home</router-link>
怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id
导航到 user 组件，路径中肯定有user, id 不同，那就给路径一个动态部分来匹配不同的id. 在vue-router中，动态部分 以 : 开头，那么路径就变成了 /user/:id, 这条路由就可以这么写： { path:"/user/:id", component: user }.
vue-router实现原理？
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面,
实现这一点主要是两种方式:
1.Hash: 通过改变hash值
2.History: 利用history对象新特性（详情可出门左拐见: http://www.cnblogs.com/yanze/p/7641774.html）
而在vue-router中，它提供mode参数来决定采用哪一种方式，选择流程如下:
默认Hash-->如果浏览器支持History新特性改用History-->如果不在浏览器环境则使用abstract
选好mode后创建history对象(HashHistory或HTML5History或AbstractHistory)

前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式:
1. 在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航
2. 使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL。
vue-router有哪几种导航钩子？它们有哪些参数？
https://blog.csdn.net/weixin_41399785/article/details/79382243
vue-router 的导航钩子，主要用来作用是拦截导航，让他完成跳转或取消。
答：三种，
全局导航钩子：beforeEach、beforeResolve、afterEach
作用：跳转前进行判断拦截。
单独路由独享组件：beforeEnter
路由组件上的钩子：beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave
每个钩子方法接收三个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
① next()：进入管道中的下一个钩子，如果全部的钩子执行完了，则导航的状态就是 confirmed（确认的）
② next(false)：这代表中断掉当前的导航，即 to 代表的路由对象不会进入，被中断，此时该表 URL 地址会被重置到 from 路由对应的地址
③ next(‘/’) 和 next({path: ‘/’})：在中断掉当前导航的同时，跳转到一个不同的地址
④ next(error)：如果传入参数是一个 Error 实例，那么导航被终止的同时会将错误传递给 router.onError() 注册过的回调
注意：next 方法必须要调用，否则钩子函数无法 resolved

vue如何实现组件之间的通信？
https://blog.csdn.net/zhoulu001/article/details/79548350

vue如何实现父子组件通信，以及非父子组件通信？
https://blog.csdn.net/mr_fzz/article/details/54636833
父组件向子组件传值：
子组件在props中创建一个属性，用来接收父组件传过来的值；
在父组件中注册子组件；
在子组件标签中添加子组件props中创建的属性；
把需要传给子组件的值赋给该属性
子组件向父组件传值：
子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；
在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
子组件访问父组件实例子 $parent
this.$parent
在子组件中判断this.$parent获取的实例是不是父组件的实例
在子组件中console.log(this.$parent) 打印出this.$parent
在父组件中console.log(this) 打印出this
看看打印出来的两个实例是不是同一个
如果是同一个 就可以在子组件中通过this.$parent.属性名和方法名，来调用父组件中的数据或者方法
父组件访问子组件变量 this.$refs.usernameInput
给子组件添加ref属性然后，通过vm.$refs来调用子组件的methods中的方法或者获得data
父组件： 在子组件中加上ref即可通过this.$refs.ref.method调用

prop 验证，和默认值
我们在父组件给子组件传值得时候，为了避免不必要的错误，可以给prop的值进行类型设定，让父组件给子组件传值得时候，更加准确，prop可以传一个数字，一个布尔值，一个数组，一个对象，以及一个对象的所有属性。
组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告
比如传一个number类型的数据，用defalt设置它的默认值，如果验证失败的话就会发出警告。
prop 如何传一个对象的所有属性
方法一：使用不带参数的v-bind写法
v-bind中没有参数，而组件中的props需要声明对象的每个属性
方法二：使用带参数的v-bind写法
v-bind后跟随参数todo，组件中的props需要声明该参数，也就是v-bind后跟随参数todo，
组件就可以通过todo来访问对象的属性

vue的子向父传递参数，我们一般是emit单个值，如果需要emit多个值，怎么实现？
子组件传出单个参数时：
// 子组件
this.$emit('test',this.param)
// 父组件
@test='test($event,userDefined)'
子组件传出多个参数时：
// 子组件
this.$emit('test',this.param1，this.param2, this.param3)
// 父组件 arguments 是以数组的形式传入
@test='test(arguments,userDefined)'
请详细说下你对vue生命周期的理解？
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
vue生命周期的理解？
总共分为8个阶段：
beforeCreate----创建前 组件实例更被创建，组件属性计算之前，数据对象data都为undefined，未初始化。
created----创建后 组件实例创建完成，属性已经绑定，数据对象data已存在，但dom未生成，$el未存在
beforeMount---挂载前 vue实例的$el和data都已初始化，挂载之前为虚拟的dom节点，data.message未替换
mounted-----挂载后 vue实例挂载完成，data.message成功渲染。
beforeUpdate----更新前 当data变化时，会触发beforeUpdate方法
updated----更新后 当data变化时，会触发updated方法
beforeDestory---销毁前 组件销毁之前调用
destoryed---销毁后 组件销毁之后调用，对data的改变不会再触发周期函数，vue实例已解除事件监听和dom绑定，但dom结构依然存在

vue路由传参数
https://blog.csdn.net/weixin_41883384/article/details/81066443
https://blog.csdn.net/u014628388/article/details/81085624
①.params:参数不会显示到路径上
// 一定要写name,params必须用name来识别路径
传递参数：用$router，this.$router.push
接受参数：用$route，this.$route.params
②.query：最好也用name来识别，保持与params一致性，路径传参
传递参数：用$router，this.$router.push
接受参数：用$route，this.$route. Query
注意：如果路由上面不写参数，也是可以传过去的，但不会在 url 上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失，那依赖这个参数的 http 请求或者其他操作就会失败。
③.通过 router-link 我们可以向路由到的组件传递参数，这在我们实际使用中时非常重要的。
通过<router-link> 标签中的to传参
<router-link>标签中的to属性进行传参，需要注意的是这里的to要进行一个绑定，写成:to。
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
name：就是我们在路由配置文件中起的name值。
params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。
用$route.params进行接收.
④.vue-router 利用url传递参数　
　　:冒号的形式传递参数
　　　 在路由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。
在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。
在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。
在App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了。
query 传参和 params 传参的区别
用法上的： query 要用 path 来引入，params 要用 name 来引入，接收参数都是类似的，分别是 this.$route.query.name 和 this.$route.params.name。注意接收参数的时候，已经是$route 而不是$router 了哦！！
展示上的： query 更加类似于我们 ajax 中 get 传参，params 则类似于 post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示所以两者不能同时使用！！！

路由是怎么配置的？有子路由怎么配置？
https://www.cnblogs.com/padding1015/p/7884861.html
子路由是用children
为什么需要懒加载？
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
路由的懒加载怎么实现？
https://blog.csdn.net/weixin_38704338/article/details/79103230
https://www.cnblogs.com/datiangou/p/10148831.html
路由懒加载resolve => require([URL], resolve),支持性好

axios是什么？怎么使用？
https://www.jianshu.com/p/2278d33791a2
https://www.cnblogs.com/Upton/p/6180512.html
https://www.jianshu.com/p/3b5e453f54f5
https://www.cnblogs.com/axl234/p/7144767.html
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
描述使用它实现登录功能的流程？
https://blog.csdn.net/miaozhenzhong/article/details/80560447
https://blog.csdn.net/qq673318522/article/details/55506650
https://www.jianshu.com/p/e5c9162d14e3
npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？
跨域，添加用户操作，更新操作。

说出至少4种vue当中的指令和它的用法？
v-if：判断是否隐藏；
v-for：数据循环出来；
v-bind:class：绑定一个属性；
v-model：实现双向绑定
v-model是什么？怎么使用？vue中标签怎么绑定事件？
可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog() />
v-for循环的li标签，点击当前li高亮，怎么实现？
步骤1：在data里面定义一个i:0;
步骤2：在li绑定点击事件，点击事件中，将当前索引赋值给data里面的i
步骤3：在li中判断i==index的时候，改变此li的样式
指令v-el的使用？
有时候我们想就像使用jquery那样去访问一个元素，此时就可以使用v-el指令，去给这个元素注册一个索引，方便通过所属实例的$el访问这个元素。
注意
HTML不区分大小写，所以v-el:someEl将转换为全小写。可以用v-el:some-el然后设置this.$el.someEl。
示例
<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent // -> "hello"
this.$els.otherMsg.textContent // -> "world"
this.$els.msg //-><span>hello</span>
指令keep-alive作用
keep-alive的含义：把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。
<component :is='curremtView' keep-alive></component>

watch 如何使用
https://www.cnblogs.com/shiningly/p/9471067.html
https://www.cnblogs.com/carriezhao/p/9330137.html
之前做一个H5的项目。需求是当用户在输入完了手机号和验证码之后，登录按钮才可以点击。
在没有使用vue之前，我们可能是通过input的change事件来判断，用户是否输入了内容，然后修改按钮的状态。现在有了vue，就省事了很多，我们只需要在watch中，监听数据模型的值改变即可。
在input 上绑定一个v-mode="pass"绑定一个数据名， 在data里写入绑定的事件名，通过watch来监听输入内容的改变，但是如果，监听的是一个对象 里面有一个deep属性可以在选项参数中指定deep：true.也叫深度监听
<input v-model="passw2" placeholder="请再次输入密码" />
①. 直接写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名
②. immediate和handler
这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。
③. deep
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。
④. 如果watch监测的是一个对象的话，直接使用watch是不行的，此时我们可以借助于computed计算属性来完成。
methods、计算属性computed和侦听属性watch的区别和使用？
http://www.imooc.com/article/74276
Vue提供了多种逻辑处理的方法，单纯的方法methods，computed(计算属性)以及watch等，
methods和computed比较：
methods是交互方法需要主动去触发，而computed则是在检测到data数据变化时自动触发的。
methods是一次性无缓存的计算，computed则是有缓存的。methods每次计算后都会把变量回收，再次访问的时候会重新计算。而computed则是依赖数据的，数据占用内存是不会被回收掉的，再次访问的时候不会重新计算，而是返回上次计算的值，当依赖的数据发生改变时才会再次计算。
计算属性computed是基于它们的依赖进行缓存的。也就是说，计算属性只有在它的相关依赖发生改变时才会重新求值。计算属性默认只是 getter，不过在需要时你也可以提供一个 setter。
侦听属性watch是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
compute和watch比较：
共同点是：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。
区别：
(1).watch擅长处理的场景：一个数据影响多个数据
(2).computed擅长处理的场景：一个数据受多个数据影响
当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch。

计算属性computed不能计算在data中已经定义过的变量。
计算属性如何使用
一般我们在写vue的时候，在模板内写的表达式非常便利，它运用于简单的运算，但是他也有一些复杂的逻辑，包括运算、函数调用等，那么就用到了计算属性，他依赖于data中数据变化的 data 中数据变化的时候 计算属性就会重新执行，视图也会更新。
计算属性的 set get 如何使用
每一个计算属性都包含一个getter 和一个setter ；
绝大多数情况下，我们只会用默认的getter 方法来读取一个计算属性，在业务中很少用到setter,所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter 和setter 都声明。
但在你需要时，也可以提供一个setter 函数， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，

scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
css的预编译。
使用步骤：
第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
第三步：还是在同一个文件，配置一个module属性
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”
几大特性:
可以用变量，例如（$变量名称=值）；
可以用混合器，例如（）
可以嵌套

mint-ui是什么？怎么使用？说出至少三个组件使用方法？
基于vue的前端组件库。npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import {Toast} from ‘mint-ui’。组件一：Toast(‘登录成功’)；组件二：mint-header；组件三：mint-swiper

什么是RESTful API？怎么使用?
是一个api的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。标准有：.post .put .delete

自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？
全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding

请说下封装 vue 组件的过程？
https://www.cnblogs.com/wisewrong/p/6834270.html
https://blog.csdn.net/tangxiujiang/article/details/79620542
https://www.jianshu.com/p/233d17dfbd16
首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。
vue-loader是什么？使用它的用途有哪些？
解析.vue文件的一个加载器，跟template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等

请说出vue.cli项目中src目录每个文件夹和文件的用法？
assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件

vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {
第二步：在需要用的页面（组件）中导入：import smithButton from ‘../components/smithButton.vue’
第三步：注入到vue的子组件的components属性上面,components:{smithButton}
第四步：在template视图view中使用，<smith-button> </smith-button>
问题有：smithButton命名，使用的时候则smith-button。

Vue里面的data为什么是个函数且return?
作用域的问题，避免全局污染

你做过的项目中，vue和哪些ui框架一起使用过？
Element 、iview 、mint-ui

vue的虚拟dom？
虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。

插槽，具名插槽，插槽默认内容
单个插槽；在父组件写一个标签，在子组件通过slot来接受标签里的内容,他只能用一个slot。单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一个组件中只能有一个该类插槽。
具名插槽：在父组件标签写入slot，子组件里面写name名字，他们两个名字要相对应，才能通过名字在找到对应的位置。相对应的，具名插槽就可以有很多个，只要名字（name属性）不同就可以了。
作用域插槽
举个例子，比如我写了一个可以实现条纹相间的列表组件，发布后，使用者可以自定义每一行的内容或样式（普通的slot就可以完成这个工作）。而作用域插槽的关键之处就在于，父组件能接收来自子组件的slot传递过来的参数，子组件与父组件的数据动态交互的一种常见案例
父组件中必须要有template元素，且必须有scope特性，scope特性中是临时变量名，
接收从子组件中传递上来的属性，属性可以是任意定义的。
动态组件
在我们平时使用vue中的模板的时候，许多时候都是直接定义成一个固定的模板，但是，vue中提供了一个动态模板，可以在任意模板中切换，就是用vue中<component>用:is来挂载不同的组件。
我们在components中注册了三个模板，当我们点击当前按钮的时候，就会将模板切换模板，可以说是非常方便了。如果要把组件切换过程中的将状态保留在内存中，可以添加一个 keep- alive 指令参数，防止重复渲染DOM。
动态组件上使用keep-alive
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
state,getter,mutation,action,module,plugins 各自的用途，和用法
State:{ count: 0 } 保存着所有的全局变量
Getter： 对state中的数据派生出一些状态，例如对数据进行过滤。（可以认为是store中的计算属性），会对state中的变量进行过滤再保存，只要state中的变量发生了改变，它也会发生变化，不变化的时候，读的缓存。
Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
一条重要的原则就是要记住 mutation 必须是同步函数。
Action: Action 类似于 mutation, 不同点在于，Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作，mutation只能是同步。
有点不同的是Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
Module： //模块，可以写很多模块，最后都引入到一个文件。分散管理。
生成实例的时候 都放在Store的modules中
plugins：插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务。

Vuex
简述一下$nextTick的用法

vuex是用来做什么的？

vuex跟cookie的区别？
vuex是中心化状态管理方案，getter/state/mutaion/action是一套的，集中管理，实现数据共享和同步。
由列表页跳转到详情页，有传递一个参数到详情页，刷新详情页，页面会出现404吗？
https://router.vuejs.org/zh/guide/essentials/history-mode.html

谈谈vuex的单向数据流？
https://www.jianshu.com/p/1ebc15645abe

vuex是什么？怎么使用？哪种功能场景使用它？
vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
什么是vuex，使用vuex的好处
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。
好处：
可以做状态管理 采用localstorage保存信息，数据便一直存储在用户的客户端中
使用场景：适合在巨大后复杂的项目中使用，
vuex是什么？在你开发的项目中是怎么使用vuex？
中心化状态管理方案
谈下vuex的核心，vuex有什么优点和缺点？mutation和action有什么区别？异步是写在mutaion里面还是action里面？
Vuex核心是getter/state/mutaion/action.
mutatiion是用来改变state
action是用来提交mutaion
异步是写在action

vuex中使用persistedstate 插件进行长久储存 （需要自己写代码测试）
安装 npm install vuex-persistedstate --save
store.js引入
import VuexPersistence from "vuex-persist";
创建一个对象：
const vuexLocal = new VuexPersistence({
storage:window.localStorage
})
安装进vuex插件：
export default new Vuex.Store({
state:{
info:{}
},
mutations:{
setInfo(state,info){
state.info=info;
}
},
plugins:[VuexPersistence()]
})
默认存储到localStorage
想要存储到sessionStorage，配置如下
import createPersistedState from "vuex-persistedstate"const store = new Vuex.Store({
plugins: [createPersistedState({
storage: window.sessionStorage
})]
})

webpack原理是什么？

webpack用了哪些？
https://www.jianshu.com/p/dce7546a5d20

vue webpack打包项目修改哪些配置
Config文件夹下面的index.js 设置里面的assetsPublicpath属性值为./
如果图片太大的话，可以设置bulid文件夹下面的webpack.base.conf.js，设置图片的limit将它的值设大点，
Utils.js添加publicpath为../../
vue源码结构

node.js有用过吗？express有用过吗？
肯定说有用过，至少要学自己学习过写过demo
相关知识点见 https://nodejs.org/en/

你觉得哪些项目适合vue框架？
1、数据信息量比较多的，反之类似企业网站就无需此框架了。
2、手机web和app应用多端共用一套界面的项目，因为使用vue.cli+webpack后的前端目录，非常有利于项目的跨平台部署。

PC端项目你会在哪些场景使用Vue框架？
上万级数据需要瀑布流更新和搜索的时候，因为数据庞大的时候，用原生的dom操作js和html都会有列表的html布局，迭代很困难。再一个dom节点的大面积添加会影响性能。
那么vue为什么解决这些问题呢？
第一：只需用v-for在view层一个地方遍历数据即可，无需复制一段html代码在js和html两个地方。
第二：vue通过Virtual Dom就是在js中模拟DOM对象树来优化DOM操作。