vue的一些概念02

大家好，欢迎来到IT知识分享网。

1.Vue中computed与method的区别

2.虚拟DOM中key的作用

2.1用index作为key可能会引发的问题

3.vue中对mixins的理解和使用

4：v-show和v-if指令的共同点和不同点

1. 实现本质方法不同:v-show本质就是通过设置css中的display设置为none;控制隐藏v-if是动态的向DOM树内添加或者删除DOM元素;
2. v-show都会编译，初始值为false，只是将display设为none，但它也编译了;v-if初始值为false，就不会编译了
   总结：v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，如果要频繁切换某节点时，故v-show性能更好一点。
   

5:为什么避免v-if和v-for一起使用

操作和实现起来都没有什么问题，页面也会正常展示。但是会带来不必要的性能消耗；这时候可以选择v-show来替换实现性能优化

6.生命周期

概念

生命周期通俗说就是Vue实例从创建到销毁的过程，就是生命周期

1. beforeCreate 实例初始化之前 数据没有加载 页面没有显示
2. created 实例初始化后，请求到了数据，事件，属性等，但是没有加载，页面依然没有显示，在这个阶段，往往发送 ajax请求，http请求
3. beforeMount(用得比较少，了解一下即可) vue会将el对应的模板 加到$el中去,但是还没有挂载出去，页面没有显示
4. mounted(常用) 页面加载出来
5. beforeUpdate (用得比较少，了解一下即可)数据更新前，在虚拟dom中使用differ算法，在内存中实现的，mounted之前的过程就不管了。differ算法：如果想看属性的变化,在这个阶段可以使用watch(属性监听)这个方法监听属性。当数据发生改变时，set方法会让调用 Dep.notify 通知所有订阅者Watcher，订阅者就会调用 patch 给真实的DOM打补丁，更新相应的视图。
6. update (用得比较少，了解一下即可) 更新完了，在渲染，谁改变了渲染谁，不是整个dom树重新渲染
7. beforeDestroy 销毁之后,destroy销毁，实例销毁需要人为触发.销毁：之前渲染好的保持不变，保留下来，后面再使用这个实例就不起作用了.Vm.$destroy() 进行销毁
8. destroyed 销毁之后
   应用场景
   
9. beforeDestroy：可以在这加个loading事件，在加载实例是触发
10. created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
11. mouted：挂载元素，获取到DOM节点
12. updated：如果对数据统一处理，在这里写上相应函数
13. beforeDestroy：可以做一个确认停止事件的确认框
14. nextTick：更新数据后立即操作dom
15. this.$nextTick() 这个方法是组件中所有的钩子执行完毕之后才会触发(包括子组件)

6.1 第一次页面加载会触发哪几个钩子？

1. 第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

6.2 DOM渲染在 哪个周期中就已经完成了?

1. DOM渲染在mounted中就已经完成了

7.Vue组件通信有哪些方式

7.1

1. 父传子：props
   父组件通过 props 向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed
   
2. 父传子孙：provide 和 inject
   父组件定义provide方法return需要分享给子孙组件的属性，子孙组件使用 inject 选项来接收指定的我们想要添加在这个实例上的 属性；
   由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据
   
   
3. 子传父：通过事件形式.子组件通过 $emit()给父组件发送消息，父组件通过v-on绑定事件接收数据。
4. 父子、兄弟、跨级：eventBus.js.这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心）,用它来（e m i t ） 触 发 事 件 和 （ emit）触发事件和（emit）触发事件和（on）监听事件，巧妙而轻量地实现了任何组件间的通信。
5. 通信插件：PubSub.js
6. vuex vuex 是 vue 的状态管理器，存储的数据是响应式的。只需要把共享的值放到vuex中，其他需要的组件直接获取使用即可

7.2 代码例子，通信插件：PubSub.js

引入依赖：npm install --save pubsub-js 

// 订阅方组件 import PubSub from 'pubsub-js' mounted(){ 
    // 执行异常代码 // 订阅消息 PubSub.subscribe('deleteTodo',(<