持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情
虚拟dom就是使用js的object模拟真实的dom,当状态发生变化，更新之前做diff，达到最少操作dom效果
vue为什么引入虚拟DOM?
vue1.0响应式粒度太细，Object.defineProperty()每个数据的修改都会通知watcher，进而通知dom去改变，对大型项目来说是一个噩梦！内存开销非常大。
vue2.0引入虚拟dom，通过diff之后再通知dom去改变，相对于1.0响应式的级别修改了，watcher只到组件，组件内部使用虚拟dom
vue中虚拟DOM干了啥?
虚拟dom没有想象中的那么复杂，它只做两件事：
- 提供与真实dom节点对应的虚拟节点vnode
- 状态发生变化时，对比新旧两个vnode，更新视图。
ref 有三种用法：
1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素
2、ref 加在子组件上，用this.refs.（ref值）.方法（） 就可以使用了。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
4、refs只能取得mounted(载入后)的元素
理解：
在原生里获取DOM元素，需要document.querySelector（""）获取dom节点，然后在获取值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在dom中绑定refs，然后$refs调用就行。
this.$refs.xxx 这样就可以减少获取dom节点的消耗了
应注意的坑：
1、如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量 ;
这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String））
2、通过 :ref =某变量 添加ref（即加了:号） ,如果想获取该ref时需要加 [0]，如this.refs[refsArrayItem]。
1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。
编辑
编辑
第一个this.$refs.ddbutton.son会在控制台直接打印整个方法
第二个则是会执行该方法
编辑
\
