vue 组件的通信

① ref通信
② $children
③ $parent
④ props和$emit
    ==>async修饰符
    ==>this.$emit("update:变量",需要传递的值)
⑤ eventBus事件总线
    ==>vue.prototype.$EventBus = new Vue()
    ==>import Vue from 'vue'---export const EventBus = new Vue()
⑥ provide/inject
⑦ vuex通信
⑧ attrs/listeners 适用于 隔代组件通信
    ==>inheritAttrs:false
    ==> <childDomChild v-bind="$attrs" v-on="$listeners"></childDomChild>
⑨ vue2.6新加的v-slot实现作用域插槽通信：在父组件中使用子组件的数据
    ==><slot name="header" :data='user'>0000000000</slot>
    ==><template v-slot:header='slotprops'> <p>{{slotprops.data}}</p></template>

vue 中 data 为什么是一个函数

vue组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，
如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；
而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

vue 生命周期

vue的生命周期：Vue 实例从创建到销毁的过程；开始创建-->初始化数据-->编译模块-->挂载dom渲染页面-->更新dom渲染页面—>卸载。
生命周期钩子函数：组件不同阶段会触发相应的钩子函数
初始化阶段、模板编译阶段、挂载阶段、卸载阶段
beforecreat
    ==>初始化事件、与data属性进行绑定
    该实例内的所有东西都还没有创建$el,data都是undefined。
creacted
    ==>判断是否有el,如果有就继续往下编译，如果没有直到在该实例上调用vm.$mount(el)[也就是动态引入了el]。
    render函数>template选项>outer Html-------渲染的一个优先级
beforeMount
    ==>此时是给vue实例对象添加$el成员，并且替换掉挂载的DOM元素。
mounted
beforeUpdate
    ==>当vue发现data中的数据发生变化，会触发对对应组件的重新渲染，
    当数据改变后调用beforeupdata，当渲染完成后调用updated钩子函数。
updated
beforeDestroy
    ==>官方解释：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
    移除事件监听器(EventBus.$off, window.addEventListener("scroll", 方法名))、关闭定时器、销毁所有的子实例
destroyed
activated
    ==>keep-alive(组件激活时触发)
deactivated
    ==>keep-alive(组件销毁时触发)
ErrorCaptured

beforeCreate    组件实例被创建之初，组件的属性生效之前
created 组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用
beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用
mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate    组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
update  组件数据更新之后
activited   keep-alive 专属，组件被激活时调用
deactivated keep-alive 专属，组件被销毁时调用
beforeDestory   组件销毁前调用
destoryed   组件销毁后调用

v-if 与 v-for 的优先级

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级；所以不一般不能用于同一个标签上
每一次判断都需要遍历整个数组，将会十分影响性能
所以在实际开发中，我们会先判断再循环

v-if 和 v-show 的区别

① v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏
② v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
如果是频繁的切换用v-show，否则用v-if

vue 中 key 的作用

1、key的作用主要是为了高效的更新虚拟DOM
2、不能使用index作为v-for中的key；你删除一个数组长度为3的第二项，vue会认为你删除的是第三项，因为index也是连续的
3、当页面的数据发生变化时，Diff算法只会比较同一层级的节点
4、有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误

vue 的自定义指令

{{}}插值语法
v-html插入html片段,可以防止xss攻击,类似innerHTML
v-once只渲染一次
v-text插入文本,不解析html,类似innerText
v-model 在表单元素上实现:双向数据绑定
==>v-bind绑定一个value属性；v-on指令给当前元素绑定input事件。
v-on
v-bind
v-show
v-if
v-else-if
v-else
v-for

$nextTick

==>在js中属于微任务
==>$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，
==>Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，
而此时进行DOM操作无异于徒劳

keep-alive

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
实现keep-alive的方式
1、 <router-view v-if="$route.meta.keepAlive"></router-view>
2、include等于组件名：<keep-alive include="test-keep-alive">
  <!-- 将缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

路由跳转传参 params 和 query 的区别

1、接收参数的方式不同
    ==>this.$route.params/this.$route.query
2、query的方法传参url路径会显示传递的参数
3、params刷新页面会丢失参数
4、params是用name属性，query是用path属性来编写传参地址

Vue-router 跳转和 location.href 有什么区别

① vue-router使用pushState进行路由更新，静态跳转，页面不会重新加载；location.href会触发浏览器，页面重新加载一次
② vue-router使用diff算法，实现按需加载，减少dom操作
③ vue-router是路由跳转或同一个页面跳转；location.href是不同页面间跳转；
④ vue-router是异步加载this.$nextTick(()=>{获取url})；location.href是同步加载