vue的一些概念02

1.Vue中computed与method的区别

相同点:
如果作为模板的数据显示，二者能实现响应的功能，唯一不同的是methods定义的方法需要执行
不同点：
1.computed 会基于响应数据缓存，methods不会缓存；
2.diff之前先看data里的数据是否发生变化，如果没有变化computed的方法不会执行，但methods里的方法会执行
3.computed是属性调用，而methods是函数调用

2.虚拟DOM中key的作用

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

若对数据进行：逆序添加/逆序删除等破坏顺序的操作，会产生没有必要的真实DOM更新，界面效果虽然没有问题，但是数据过多的话，会效率过低；
如果结构中还包含输入类的DOM，会产生错误DOM更新，界面有问题；
注意！如果不存在对数据的逆序操作，仅用于渲染表用于展示，使用index作为key是没有问题的。

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

mixins是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
而mixins引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。
缺点：如果这两个方法冲突了，实例的方法会执行两次（因为第一个函数被调用时，没有被销毁，它只是被重写了）。缺点也显而易见可能会被滥用

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

相同点：
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',(<