vue总结
1.vue和react、angular的区别？
vue的优点：
1.低耦合：视图可以独立于model变化和修改，一个viewModel可绑定到不同的view上
2.可复用：可以把一些视图逻辑放在一个viewModel里，让很多view重用这段视图逻辑
3.独立开发
vue的缺点：不支持IE8、生态环境不如angular和react、首屏渲染慢、SEO较差
vue和react对比如何选型？从性能、生态圈、数据量、数据的传递上作比较？
1.vue和react都提供了虚拟dom、提供了响应式和组件化的视图开发、有配套的路由和状态管理工具
2.性能上：vue优于react
3.生态圈：vue：es6+webpack+vue-cli+vue-router+vuex+vue组件；react：es6+webpack+react+redux+react-router
vue和angular：
相同点：都支持指令（内置指令和自定义指令）、都支持过滤器、都支持数据双向绑定、都不支持低端浏览器
不同点：
1.angular学习成本高，而vue本身提供的api比较简单直观
2.性能上，angular依赖对数据做脏检查，所以watcher越多越慢，vue使用依赖追踪的观察并且使用异步队列更新，所有数据都是独立触发的。
vue和react：
相同点：
1.react采用JSX语法，vue的组件开发中也推崇用.vue文件格式，对文件内容都有一些约定，都需要编译
2.中心思想相同，都是组件化，组件之间可以嵌套
3.都提供合理的钩子函数
4.都不内置ajax、router等功能到核心包，而是以插件方式加载
不同点：
1.react依赖Virtual dom, vue使用虚拟dom
2.vue在模板中提供了指令，过滤器等，可以方便的操作dom
2.什么是mvvm？mvc框架和mvvm框架的区别？
mvvm是model-view-viewModel的缩写，model代表数据模型，也可以在model中定义数据修改和操作的逻辑、view代表ui组件，它负责将数据模型转化成ui展示出来、viewModel是一个同步view和model的对象。
在mvvm框架下，view和model没有直接的联系，是通过viewModel进行交互的，viewModel通过双向数据绑定把view层和model层联系起来，view数据的变化会同步到model中，model数据的变化也会立即反应到view上。
mvvm和mvc的区别？
mvc是model-view-controller的缩写，controller就是mvvm中的viewModel，mvvm主要解决了mvc中大量的dom操作导致的页面性能降低，加载速度变慢的问题。
区别：mvvm通过数据来显示改变视图层，而不是直接操作dom
3.vue生命周期？
1.beforeCreate：刚刚创建组件，dom 和data还没有初始化
2.ceated：data初始化完成，方法可以调用，数据加载最好放在created里
3.beforeMounted：dom挂载完成前，数据初始化已完成，但是还是显示{{}},因为vue使用虚拟dom占位
4.mounted：数据和dom挂载完成，可以执行dom操作
5.beforeUpdate：只要是页面数据变化就会触发，页面数据还是原来的数据，还没有完成更新
6.updated：数据更新完毕，页面数据是更新之后的
7.beforeDestroy：组件销毁前，类似路由钩子beforeRouterLeave，都是在路由跳转之前，但是无法阻止路由跳转
8.destroyed：组件销毁完成
4.vue-router实现原理？
js根据url的变化，清除当前页面的内容，将要展示的内容组件挂载到当前页面上，更新视图但不重新请求页面，实现了单页面路由跳转
路由模式：hash模式、history模式、abstract模式
1.hash模式：浏览器url#后面的部分，包括#，hash是url中的锚点通过锚点值的改变来渲染指定dom位置的不同组件
2.history模式：可以去掉hash模式下的#，只需要在router配置里加上mode: 'history', 但是history模式会出现404问题，需要后端配合
3.abstract模式：使用一个不依赖于浏览器的浏览历史虚拟管理后台
路由间的跳转？
1.声明式跳转（标签）：router-link to
2.编程式跳转（js）：函数内使用this.$router.push()
路由钩子？
1.全局钩子：beforeEach，afterEach
2.单个路由独享的钩子：beforeEnter
3.组件内的钩子：beforeRouterEnter、beforeRouterLeave
5.vuex是什么？应用场景？
vuex是vue的状态管理工具，可以帮助我们管理共享状态。使用场景：单页面应用中组件间的状态管理，播放器，购物车等
使用：安装vuexnpm install vuex --save --> 初始化store index.js --> 在main.js中挂载store
vuex的几个属性：
state：全局要访问的state对象，相当于vue对象中的data属性
getter：实时监听state的变化，store的计算属性
mutation：同步操作，修改状态，在组件中使用this.store.dispatch('方法名')触发
不使用vuex会带来什么问题?
可维护性下降、可读性下降、会增加耦合性
6.vue怎么实现数据双向绑定的？
数据劫持+发布订阅模式：当监控的数据对象改变之后，这个变更会被广播给所有的订阅该数据的watcher，然后由watcher实现对页面的重新渲染
vue是如何进行数据劫持的？通过打印data中的属性我们可以看到每个data中的属性都有一个对应的set和get方法，这是因为vue是通过Object.defineProperty来实现数据劫持的，Object.defineProperty可以通过set和get监听对象的属性值
例子：
<h2 id="title"></h2>
<input id="input" type="text" onkeyup="keyup(event)" oninput="value=value.replace(/[^\d]/g, '')"/>
<button onclick="add()">add</button>
title和input都可以显示value值，点击button和输入input都会实时更新value值。
//1.初始化数据源
let vm = {
value: 0
}
//2.定义Dep,用来存放watcher和发布
var Dep = function(){
this.list = [];
this.add = function(fn){
this.list.push(fn)
}
this.notify = function(newValue){
this.list.forEach(function(fn){
fn(newValue)
})
}
}
//3.定义更新html的方法--watcher
function renderTitle(newValue){
$('#title').text(newValue)
}
function renderInput(newValue){
$('#input').val(newValue)
}
//4.初始化Dep，添加watcher
var dep = new Dep();
dep.add(renderTitle);
dep.add(renderInput);
//5.创建观察者，实时更新vaule
function observer(obj, key, value){
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
set: function(newValue){
if(value != newValue){
value = newValue;
dep.notify(newValue)
}
},
get: function(){
return value
}
})
}
//6.页面用到的两个方法
function keyup(e){
let value = Number.parseInt(e.target.value);
vm.value = Number.isNaN(value) ? 0 : value;
}
function add(){
vm.value += 1;
}
//7.初始化observer
observer(vm, 'value', vm.value);
//8.初始化页面，将数据渲染到页面
dep.notify(vm.value);
7.vue3是怎么实现数据双向绑定的？和vue2有什么区别？
vue3是通过es6的proxy实现数据双向绑定的，比vue2的优势就是可以检测到数组内部数据的变化
8.v-on可以绑定多个事件吗？
可以，v-on="{click: a, mouseLeave: b}"
绑定多个事件可以分为一个元素绑定多种事件，一个事件绑定多个函数
<!-- 一个元素绑定多种事件 -->
<button v-on="{click: a, mouseLeave: b}">click</button>
<button @click="a" @mouseLeave="b">click</button>
<!-- 一个事件绑定多个函数 : 按顺序执行-->
<button @click="a(), b()">a,b</button>
<button @click="c()">c</button><!-- 这里的c函数内可以调用a和b，打到绑定多个函数的效果-->
9.vue的filter是做什么用的？
过滤器，对数据进行过滤，比如得到字符串中的某几个字符，或者进行字符串拼接等
过滤器分为全局过滤器和组件过滤器；
全局：
Vue.filter("globalFilter", function(value){
//do something
return value+ '.....'
})
局部（组件内）：
filters:{
filter1: function(value){
return value+'...'
}
}
10.vue组件之间传值是怎么实现的？
1.父组件传给子组件：props
2.子组件传父组件：子组件内用$emit触发父组件传的方法
11.vue-cli中怎么自定义组件？
1.新建组件文件，并在文件内用export default{}导出
2.在需要的页面import组件，并且在components中注册组件
3.在template中使用并传值
12.scss是什么？怎么使用？有什么特性？
scss是css的预编译。
使用步骤：
1.安装css-loader、sass-loader、node-loader
2.在build目录找到webpack.base.config.js，在extends属性中加入一个扩展.scss
3.在webpack.base.config.js文件内配置module属性
4.在组件内的style标签上加入 lang='scss'
特性：1.可以使用变量；2.可以用混合器；3.可以嵌套
13.keep-alive有什么作用？
用<keep-alive></keep-alive>包裹动态组件时，会缓存不活动的组件实例，用于保留组件状态，避免组件重现渲染。
14.vue中如何自定义指令？
使用Vue.directive(id, [definition])
第一个参数：指令的名称，定义的时候不需要加v-前缀，调用的时候必须加v-；
第二个参数：是一个对象，这个对象上会有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作
1.定义全局指令
Vue.directive("focus", {
// 每个函数第一个参数都是el，表示绑定了指令的元素
bind: function(el){//指令被绑到元素上的时候回立即执行，只执行一次
},
inserted: function(el){//元素插入到dom中的时候回执行inserted，只触发一次
el.focus()
},
updated: function(el){//元素更新的时候会触发
}
})
2.定义局部指令
directives:{
focus: {
inserted: function(el){//元素插入到dom中的时候回执行inserted，只触发一次
el.focus()
},
}
}
使用指令<input v-focus/>