1.双向绑定的原理?
Vue 采用数据劫持+订阅发布模式实现双向绑定。通过 Object.defineProperty()，为组件中 data 的每个属性添加 get 和 set 方法，在数据变动时，触发 set 里相应的监听回调函数，将变动信息发布给订阅者
2.MVC和MVVM的区别？
MVC ：单向
MVC 是Model-View-Controller
View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈
所有通信都是单向的
MVVM：双向
MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型，View 代表 UI 组件，
ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。
所有通信都是双向向的
3.computed、watch和methods区别?
(1).computed是计算属性，依赖其他属性值，并且computed的值有缓存。只有computed依赖的属性值发生变化，computed的值才会重新计算。
(2).watch：没有缓存性，起到观察的作用，即监听数据的变化。
(3).methods:定义函数，它需要手动调用才能执行
4.slot是什么？有什么作用？
(1).slot是插槽，其中包括匿名插槽，具名插槽和作用域插槽。
(2).可以通过slot插槽向子组件内部指定位置传递内容
5.过滤器的作用？如何实现一个过滤器？
过滤器的功能是对要显示的数据进行格式化后再显示
filters: {
moneyFilters(value) {
return "￥" + Number(value).toFixed(2)
}
},
6.自定义指令的作用？如何实现一个自定义指令？
自定义指令可以用来操作DOM，并且是可复用的
Vue.directive('focus', (a,b)=>{
a.textContent = b.value.toUpperCase()
})
7.常见的修饰符及其作用？
trim:自动过滤用户输入的首空格字符，而中间的空格不会过滤
number:自动将用户的输入值转为数值类型
stop:阻止了事件冒泡
prevent:阻止了事件的默认行为
once:绑定了事件以后只能触发一次，第二次就不会触发
8.v-if v-show v-html的原理？
v-if：v-if会先调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染。
v-show：v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中修改show属性值，也就是常说的display。
v-html：v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。
9.v-if和v-show的区别？
v-if显示隐藏是将dom元素整个添加或删除
v-show隐藏则是为该元素添加css--display:none，dom元素还在。
如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用 v-if较好。
10.说一下v-model的原理和v-on的原理
v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。 可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。
v-on原生事件绑定是通过 addEventListener 绑定给真实元素的，组件事件绑定是通过 Vue 自定义的$on 实现的
11.data为什么是一个函数?
一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果 data 是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间 data 不冲突，data 必须是一个函数。
12.keep-alive
在组件切换过程中,把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
13.简单说一下vue的生命周期？
1 初始化前 --BeforeCreated
2 初始化完成 --created
3 双向数据绑定前 ---BeforeMount
4 双向数据绑定完成 --Mounted
5 更新前 --BeforeUpdate
6 更新完成--updated
7 销毁前--BeforeDestroyed
8 销毁完成--Destroyed
14.created和mounted的区别？
created：页面渲染之前进行调用，通常在html生成之前进行数据初始化。
mounted：页面渲染之后进行调用，通常用于改变某些dom数据或者属性。
15.组件通信的方式有哪些？
父传子：props、root、 refs
子传父 emit、parent、
同级传：eventBus、vuex
3.vuex
16.路由的hach与hlstory的区别?
url显示： hash:有#，很low。hlstory:无#，好看。
回车刷新：hash:可以加载hash值对应页面，hlstory:一般就是404掉了。
支持版本：hash:支持低版本浏览器和IE浏览器。hlstory:HTML5新推出的Api
17.如何定义动态路由？如何获取传递过来的动态参数？
url拼接参数："/a?a1=a1"，接收页面：this.$route.query.a1
query传参：{path: 'a', query: {a2:'a2'}}，接收页面：this.$route.query.a2
params传参：{name: 'a', params: {a3:'a3'}}，接收页面：this.$route.params.a3
动态路由：/path/a4 ，接收页面：this.$route.params.id，路由：path: "/a/:id"
18.route和router的区别
router是路由跳转 route是路由信息
19.说说你对前端路由的理解？
根据不同的路由跳转不同的页面
20.导航守卫有哪些？
全局前置守卫 router.beforeEach
全局后置钩子 router.afterEach
组件内的守卫 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
21.说说的vuex的理解
（1）.vuex是什么？
vuex为状态管理，他集中储存管理应用的所有组件的状态，可以理解成一个全局仓库
(2).vuex有哪几种属性
有五个属性 State、 Getter、Mutation 、Action、 Module
1.state 提供一个响应式数据
2.getter 借助vue的计算属性computed来实现缓存
3.mutation 更改state方法
4.action 触发mutation方法
(3).运行机制
vuex提供数据（state）来驱动视图(vue components),通过dispath派发actions,在其中可以做一些异步的操作，然后通过commit来提交mutations,最后mutations来更改state。
22.v-if和v-for
当 v-if 与 v-for 一起使用时，v-for 比 v-if 的优先级高。这意味着 v-if 将重复运行v-for,造成性能上的问题,影响页面加载速度.
解决
1.将v-if移动到容器上面
2.使用计算属性computed
filterArr(){
return this.arr.filter(item=>item.isShow)
}
23.vue中的key
key的主要作用是为了高效的更新虚拟DOM。可以让vue更快的区分它们,找到该数据。
24.nextTick
vue中的nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick就可以获取数据更新后最新DOM的变化
click(){
this.num = '456'
console.log(this.$refs.cl.innerText)
this.$nextTick(()=>{
console.log(this.$refs.cl.innerText)
})
}
