「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

引导：

jQuery相比于原生JS，牛逼在简化了操作DOM的过程

vue的优势：MVVM框架，在vue中，不需要操作DOM，程序员只需要把数据维护好即可(数据驱动视图)

假设：在vue中需要操作DOM，需要获取到页面上某个DOM元素的引用，该如何？---> 使用ref引用

ref引用

ref是用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用

每个vue的组件实例上(VueComponent)，都包含一个*$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还没有重新渲染，获取不到相应的DOM结构

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖