第一篇文章

组件通信方式有哪些？

prop，父组件通过属性向子组件传递数据
event，子组件通过$emit 想父组件抛出事件和数据

class和style父组件向子组件根元素添加类名或者上腾娱乐样式

<HelloWorld 
      msg="标签内部传递数据"
      class="add"
      style="background-color:blue"
    />
===>
此时自组建的根元素上面被添加了class：add，和style样式
<div data-v-469af010="" class="hello add" style="background-color: blue;"><h1 data-v-469af010="">标签内部传递数据</h1></div>

<HelloWorld 
       msg="标签内部传递数据"
       class="add"
       style="background-color:blue"
     />
 ===>
 此时自组建的根元素上面被添加了class：add，和style样式
 <div data-v-469af010="" class="hello add" style="background-color: blue;"><h1 data-v-469af010="">标签内部传递数据</h1></div>

attribute 如果父组件向子组件传递了子组件没有声明（style和class另作处理）的属性，他们将被视为attribute。可在create(){console.log(this.$attrs)}得到对应的属性的对象。
$listeners子组件可通过$listeners 获取父组件事件处理函数的对象
$parent $children 拿到父组件或子组件的实例
ref 父组件通过ref获取子组件的实例
native父组件通过该修饰符可向子组件根元素绑定事件
v-model数据绑定
sync数据绑定
slot scopedSlots插槽

跨组件通信

provide&inject

//父组件提供
provide:{
    foo:'abc'
}
//子组件注入，
inject:['foo']
created(){ console.log(this.foo) }

enentBus事件总线，向事件总线抛出事件和监听事件
router当路由改变时，所有监听路由的组件都会相应
vuex，创建仓库，数据共享，可以监听数据的变化
store模式，vuex基本原理，数据共享，但是不能监听数据变化

对vue虚拟dom的理解

什么是虚拟dom？

虚拟dom本质上是普通的js对象，用于描述试图的界面结构。在vue中每一个组件都有一个render函数，每个render函数都返回一个虚拟dom树，也就是说每个组件都对应一颗虚拟dom树。
为什么需要虚拟dom？

在vue中渲染视图时会调用render函数，这个过程不仅发生在组件创建时，同时也发生在视图依赖的数据更新时。如果在渲染是直接操作真实dom元素，由于真实dom元素的创建、更新、插入会消耗大量性能，从而会极大降低渲染效率。因此vue通过使用虚拟dom来解决渲染效率问题。
虚拟dom如何转化为真实dom？

在一个组件实例首次被渲染时，先调用render函数生成虚拟dom树，再根据虚拟dom树创建真实dom，每一个虚拟节点都对应一个真实的dom元素。当受响应式数据发生变化时，重新调用render函数生成新的虚拟dom树，将新旧两棵树进行对比，找到最小更新量，用新树替换旧树并修改对应的dom，保证对真实dom的操作最小化
模板和虚拟dom的关系

vue内部有一个compile 模块，负责将模板编译为render函数，而render函数调用后返回一个虚拟dom。编译部分分为两个步骤：
1. 将模板转化为AST
2. 将AST转化成render函数
如果是传统的引入方式，则编译时间发生在组件第一次运加载时，称之为运行时编译。如果是在vue-cli的默认配置下编译发生在打包时，称之为模板预编译。编译是机器耗费新能的操作，模板预编译有效的降低了组件运行时的效率，而且由于运行时已不需要编译，vue打包时会排除compile模块，以减少打包体积。

模板的存在只是为了方便开发者书写界面代码

vue最终运行时需要的时render函数，而不是模板，因此模板中的的各种语法，在虚拟dom中都是不存在的，他们最终都会转化为虚拟dom的配置