Vue组件中的通信方式
1.父子组件通信
- props/$emit
- ref ref如果在普通Dom元素上调用，引用指向的就是该元素，如果是在组件上，引用指向组件实例，获取方法 this.$refs[name]
- children
2.多层级组件通信
1.provide/inject provide声明在祖先组件内 以对象形式存入传给子组件所需的数据 inject 用在后代组件内 2.listeners
- $attrs ：包含了父作用域中不作为prop被识别的attribute绑定（class和style除外）
- attrs'传入内部组件
- 搭配inheritAttrs:false使用。可以避免每次的属性都挂载到标签上
- $listeners 获取父作用域的方法
3.非关系型组件
- EventBus(on),通过一个Vue实例作为中央事件总线，用它来触发事件和监听事件，从而实现组件间的通信
- Vuex
v-if 和v-show区别
- v-show只是控制Css样式display:none/block，无论条件是什么，都会被渲染出来
- v-if是vue底层的编译，当为false时，组件不会被渲染，直到条件为true,并且切换条件时会触发销毁、挂载组件，并且基于v-if的这种惰性渲染机制，可以在必要时渲染组件，减少整个页面的初始渲染开销。
keep-alive组件的作用
- 如果你需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用keep-alive组件包裹需要保存的组件。
- 对于keep-alive组件来说，它拥有两个独有的生命周期钩子函数，分别为 activated和deactivated 。用keep-alive包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行(deactivated 钩子函数，命中缓存渲染后会执行actived钩子函数。
Vue生命周期函数
- beforeCreate：这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到。
- created：这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作。
- beforeMounted：在挂载开始之前被调用:相关的render函数首次被调用
- mounted：挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行.
- beforeUpdate: data中数据已经更新完毕，页面视图还未响应更改
- updated：数据和视图都更新完毕
- beforeDestroy：销毁之前，实例上事件、指令等都可以使用，这里组件没有真正的销毁。
- destroyed：数据、指令、等完全销毁|
组件嵌套生命周期函数执行顺序
父组件A 子组件B 执行顺序如下：A-beforeCreate, A-created,A-beforeMount,B-beforeCreate, B-created,B-beforeMount,B-mounted,A-mounted
computed和watch区别
computed 是计算属性，依赖其他属性计算值，并且computed 的值有缓存，只有当计算值变化才会返回内容。 watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。
v-if和v-for为什么不能连用
v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。可以采取多层包裹来解决性能损耗问题。例如外层给标签绑定指令v-if或者是内层标签绑定v-if。
单页面应用和多页面应用的优缺点
- 单页面应用(SPA)
- 优点
-
- 用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
-
- 前后端分离
-
- 页面转场体验好
- 缺点∶
-
- 不利于seo
-
- 导航不可用，需要自己实现导航,
-
- 初次加载耗时长
-
- 页面复杂度提高
- 多页面应用(MPA):
- 优点∶1、多页面应用对于seo更加友好。2、更容易扩展。3、更易的数据分析。
- 缺点∶1、程序开发成本高。2.增加服务端压力，多页面会不停的加载。3、用户体验相对较差。
v-model如何实现（双向绑定）？
答案: v-model本质上是v-on和v-bind的语法糖。v-model在内部为不同元素抛出不同的事件，如: text和 textarea元素使用value 属性和 input事件; checkbox和radio使用checked 属性和change事件; select字段将value 作为prop并将change 作为事件。
