ref和$refs,$nextTick异步更新

目录

ref和$refs

$nextTick 异步更新

---

ref和$refs

1.作用

利用ref 和$refs可以用于获取dom元素或组件实例

2.特点

查找范围→当前组件内(更精确稳定)

3.语法

1.给要获取的盒子添加ref属性

我是渲染图表的容器

⒉.获取时通过$refs获取this.$refs.chartRef 获取

mounted ({
	console.log(this. $refs.chartRef)
}

4.注意

之前只用document.querySelect('.box')获取的是整个页面中的盒子

获取dom元素

要获取谁的dom元素，就在谁的标签内加上 ref=’ ‘

ref也是组件通信的一中方法

拿到dom元素是在挂载后，mounted

{ref属性值: ref属性所在的dom或组件}

ref可以拿到组件属性和方法

例：App.vue

$nextTick 异步更新

$nextTick:等DOM更新后,才会触发执行此方法里的函数体

语法: this.$nextTick(函数体)

this . $nextTick(() =>{
    this.$refs.inp.focus()
}

注意: $nextTick内的函数体一定是箭头函数，这样才能让函数内部的this指向Vue实例

数据改变---->dom更新，需要时间->等待dom更新完毕操作dom

原理：promise.then------>MutationObserver----->setImmediate---->setTimeout

App.vue