ref引用
ref是用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用
每个vue的组件实例上(VueComponent)，都包含一个*refs对象∗,里面存储着对应的DOM元素或组件的引用(组件实例对象)默认情况下，组件的refs对象*,里面存储着对应的 DOM元素或组件的引用(组件实例对象) 默认情况下，组件的refs对象∗,里面存储着对应的DOM元素或组件的引用(组件实例对象)默认情况下，组件的refs指向一个空对象。在DOM元素的标签内设置了ref属性之后，$refs就会指向包含这些DOM元素的对象
// ref引用的使用方法 <template> <h1 ref="myh1">App 根组件</h1> // 在h1中设置属性ref并令值为myh1 <button @click="changeColor">点击让h1变成红色</button> </template> <script> export default { methods: { changeColor(){ console.log(this.$refs.myh1) // this指向组件实例对象vc，$refs是其中一个属性，是存着对应DOM元素的对象,myh1就是该对象中的一个属性，指向h1这个元素 this.$refs.myh1.style.color = 'red' // 设置字体颜色 } } } </script>
使用ref引用组件实例
ref属性除了可以加在标签中，还可以加在组件中
// 在父组件中操作子组件 <template> <h1 ref="myh1">App 根组件</h1> <Left ref="comLeftRef"></Left> </template> <script> export default { methods: { onReset(){ console.log(this.$refs.comLeftRef) // this.$refs.comLeftRef指向的就是Left组件 // this指向App根组件的实例对象，$refs是其中一个属性，是存着对应DOM元素的对象,里面存着两个属性，其中的comLeftRef属性就指向Left组件。 } } } </script>
this.$nextTick(callback)方法
当某些代码的执行需要延迟到DOM重新渲染完毕之后时，就可以使用this.$nextTick(callback)方法
组件的$nextTick(callback)方法，会把callback回调函数推迟到下一个更新周期之后执行。即等组件的DOM更新完成之后，再执行callback回调函数，从而保证callback回调函数可以操作到最新的DOM元素。
this.$nextTick(()=> { // 需要执行的代码 }) // 如果不使用this.$nextTick(callback)方法，直接执行代码就会报错undefined。因为数据更新之后，DOM
