<template>
<ul>
<li v-for="(item, index) in arr"
:key="index"
:ref="el => setRef[index] = el">
{{ item }}
</li>
</ul>
<div ref="single">我是单个dom</div>
</template>
<script>
import { ref, nextTick, onMounted,onBeforeUpdate,onUpdated } from 'vue'
export default {
name: 'nnnn',
components: {},
computed: {},
watch: {
curData(newValue) {
console.log(newValue)
this.$nextTick(() => {
this.moveFun(newValue)
})
},
},
methods: {
changeMsg() {
this.$nextTick(() => {
// this.msg2 = this.$refs.msgDiv.innerHTML
})
}
},
setup() {
const arr = ref([1, 2, 3]) //测试数据
const setRef = ref([]) // 存储dom数组。// 初始值变量名一定要和模版中的ref一致，比如此处为 setRef
const single = ref(null) //初始值需要赋值为空，或者null，初始值变量名一定要和模版中的ref一致，比如此处为 single
const moveFun = () => {
nextTick(() => {
console.log('[[[[[[[]]]]]]]', setRef.value)
})
}
nextTick(() => {
console.log('循环dom----',setRef.value) //数组渲染后输出Proxy{0: li, 1: li, 2: li}
console.log('循环dom第一个----',setRef.value[0])
console.log('循环dom最后一个----',setRef.value[setRef.value.length-1])
console.log('单个dom----',single.value)
})
onMounted(() => { //dom渲染完后 执行
})
onBeforeUpdate(() => { })
onUpdated(() => { })
return {
arr,
setRef,
moveFun,
}
},
}
</script>
<style lang="scss">
</style>
