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
1、MVC（Model-View-Controller）
即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思同样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。‘MVC是单向通讯。也就是View跟Model，必须经过Controller来承上启下。
MVC使用很是普遍，好比JavaEE中的SSH框架
2、MVP（Model-View-Presenter）
与MVC的基本思想有相通的地方：Controllerer负责逻辑的处理，Model提供数据，View负责显示。
MVP与MVC的重要区别是：在MVP中View不直接使用Model，他们之间的通讯是经过Presenter来进行的，全部的交互都发生在Presenter内部，而在MVC中View会直接从Model中读取数据而不是经过Controller。
2、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的理解？
一、使用vue没必要担忧布局更改和类名重复致使的js重写，由于它是靠数据驱动双向绑定，底层是经过Object.defineProperty() 定义的数据 set、get 函数原理实现。
二、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起本身的工具包就能够开工。项目经理坐等收楼就好。
三、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。
四、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之间通讯的桥梁，主要作的事情是:
一、在自身实例化时往属性订阅器(dep)里面添加本身
二、自身必须有一个update()方法
三、待属性变更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能够写es六、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框架？
一、数据信息量比较多的，反之相似企业网站就无需此框架了。
二、手机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操做。