Vue知识点总结

2018最新前端vue面试基础总结

本篇博客总结了全部前端面试[Vue][6]方面的总结，适用于校招，秋招等，将会满足你所有的需求哦：

MVVM模式与MVC模式的区别：

• MVVM就是Model-View-ViewModel的缩写，中文意思就是模型视图。

• MVC是Model-View-Controller的缩写，中文意思是模型视图控制器。
  ···前者是将’数据模型数据双向绑定’的思想作为核心，所以视图View的数据的变化的同时也会使Model层的数据源发生变化，同理Model的数据源的数据发生变化的同时也会立即反应到视图View上。Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。ViewModel是Vue的核心，它是Vue的一个实例。DOM Listeners和 Data BIndings 是实现双向绑定的关键。Dom Listeners 监听页面所有view层的DOM元素的变化，当发生变化时，Model层的数据也会随之变化；Data Bindings监听Model层的数据变化，当Model层的数据发生变化的同时，View层的DOM元素也会同时的随之发生变化。
  ···而后者是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。

  Vue中v-show和v-if有什么不同：

  两者都是条件渲染指令，绑定boolen值；
  ···与v-if不同的是，无论v-show的值为true或者false，元素都会存在与HTML代码片段之中，只是设置其CSS的style值(display)；而v-if的值为true时，元素才会存在与HTML代码之中。

  如何让CSS只在当前的组件中起作用，不会影响全局的样式：

  在vue的每一个组件中都可以自定义各自的CSS以及JS，如希望组件内的CSS存在作用域，只需要在style标签上加入scope属性即可；

  Vue的双向数据绑定原理是什么：

  Vue.js是采用数据劫持结合发布者-订阅者模式的方法，通过Object.definePropety()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
  具体步骤：
  第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化；
  第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图；
  第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

• 在自身实例化时往属性订阅器(dep)里面添加自己

• 自身必须有一个update()方法
• 待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
  ## 指令Keep-alive的作用含义： ##
  在vue-router写着keep-alive，这里的keep-alive的含义是：如果把切换出去的组件保留在内存中，可以保留他的状态或避免重新渲染；

<component :is='currentView' keep-alive></component>

Vue组件之间通信的方法：

1. 父组件向子组件传值：
   使用props，props监听父组件传递过来的信息传递过来后，可直接引用，就如已经传递来数据塞到data里，使用时直接：

this.$refs.dataList

1. 自组件向父组件传值：
   通过自定义事件，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件，子组件通过$emit（）触发，父组件监听。

2. 非父子组件关系：
   简单的场景使用bus，复杂的场景使用vuex

<div id="app4">
<display></display>
<increment></increment>
</div>
<script>
var bus = new Vue();
Vue.component('increment', {
template: `<button @click="add">+</button>`,
data: function () {
return {count: 0}
},
methods: {
add: function () {
bus.$emit('inc', this.count+=1)
}
}
});
Vue.component('display', {
template: `<span>Clicked: <mark>{{c}}</mark> times</span>`,
data: function () {
return {c: 0}
},
created: function () {
var self=this;
// bus.$on('inc', function (num) {
// self.c = num
// });
bus.$on('inc', (num) =>
this.c = num
);
}
});
vm = new Vue({
el: "#app4",
})
</script>

vue响应式原理：

工作原理是当我们把一个普通的JavaScript对象传给vue实例的data选项的时候，vue会遍历此对象的所有属性，并使用Object.definePropert把这些属性全部转化为getter/setter。(Object.definePropert是仅ES5支持，且没有垫片脚本的特性，因此Vue不支持IE8及更低版本浏览器。）用户看不到getter/setter，但是在内部他们让Vue追踪依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而使它关联的组件得以更新。

vue-router实现原理：

单页面应用(SPA)的核心之一是：更新视图而不重新请求页面，实现这一点主要是两种方式：

• Hash通过改变hash值
• History：利用history对像新特新

而在vue-router中，它提供mode参数来决定采用哪一种方式，选择流程如下：
···默认Hash–>如果浏览器支持History新特性改用History–>如果不在浏览器环境则使用abstract
基本方法分析：
Hash

1. push()

功能: 设置新的路由添加历史记录并更新视图,常用情况是直接点击切换视图。
调用流程：
1.$router.push() //显示调用方法
2.HashHistory.push() //根据hash模式调用，设置hash并添加到浏览器历史记录(window.loaction.hash=xxx)
3.History.transotionTo() //开始更新
4.History.updataRoute() //更新路由
5.{app._route = route}
6.vm.render() //更新视图

1. replace

功能: 替换当前路由并更新视图，常用情况是地址栏直接输入新地址
流程与push基本一致
但流程2变为替换当前hash （window.location.replace= XXX）不懂此方法的可见: http://www.w3school.com.cn/jsref/met_loc_replace.asp

1. 监听地址栏变化

在setupListeners中监听hash变化(window.onhashchange)并调用replace

History
1.push
与hash模式类似，只是将window.hash改为history.pushState
2.replace
与hash模式类似，只是将window.replace改为history.replaceState
3.监听地址变化
在HTML5History的构造函数中监听popState（window.onpopstate）

两种模式对比
History模式的优点:
1.History模式的地址栏更美观。。。
2.History模式的pushState、replaceState参数中的新URL可为同源的任意URL（可为不同的html文件），而hash只能是同一文档
3.History模式的pushState、replaceState参数中的state可为js对象，能携带更多数据
4.History模式的pushState、replaceState参数中的title能携带字符串数据（当然，部分浏览器，例如firefox不支持title，一般title设为null，不建议使用）
缺点:
对于单页面应用来说，理想的场景是仅仅在进入应用时加载页面（例如index.html）,后续的网络操作靠ajax完成，
而不会重新请求页面。
但当用户直接在用户栏输入地址时则会重新请求，当地址带有参数时两者情况不一样
Hash 例如: xxx.com/#/id=5 HTTP请求不会包含后面的hash值，所以请求的仍然是 xxx.com,没有问题
History 例如: xxx.com/id=5 这时请求的便是xxx.com/id=5，如后端没有配置对应id=XXX的路由处理，则会返回404错误。

如何定义vue-router的动态路由？ 怎么获取传过来的动态参数？

在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id获取参数。

vue-router是什么？他有那些组件？

vue-router是vue用来写路由的一个插件。它的组件有router-link router-view

vue-router有哪几种导航钩子？

一共有三种。
全局钩子：router.beforeEach(to,from,next)
作用：跳转前进行判断拦截。

组件内的钩子；

路由独享组件；