通过JS新增element元素，却无法通过this.$refs['lineChart']获取到新增的元素，为什么？

Question

<template>
    <div class="report-container">
        <div id="travelItinerary">
            
        </div>
    </div>
</template>
<script>
export default {
    mounted() {
        this.creteChart('lineChart')
    },
    methods: {
        creteChart(ref) {
            const chart = document.createElement('div');
            chart.setAttribute('ref', ref);
            chart.setAttribute('style', 'width: 100%');
            const container = document.querySelector(`#travelItinerary`);
            container.appendChild(chart);

            console.log('container', container)
            this.$nextTick(() => {
                const chartDom = this.$refs[ref];
                console.log('chartDom', chartDom)
            })
        }
    }
}
</script>

为什么container的输出包含ref为lineChart的元素，但是通过this.$refs[ref]却找不到？

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

这个问题的关键在于Vue如何管理和使用this.$refs。在Vue中，this.$refs是一个对象，它会在组件渲染后被填充，并且它主要用来访问模板中的DOM元素或者子组件实例。但是，有一点需要注意的是，this.$refs只会包含那些在模板中通过ref属性定义的元素或组件。当你在JavaScript代码中通过document.createElement创建一个新的元素并尝试设置它的ref属性时，Vue并不会将这个元素加入到this.$refs对象中。因此，你在后面通过this.$refs[ref]是无法获取到这个新创建的元素的。

解决这个问题的一种方式是使用Vue的v-if指令或者动态组件来动态地添加和移除元素，这样Vue就可以管理和追踪这些元素，并且你可以通过this.$refs来访问它们。另一种方式是使用Vue的指令或者方法（比如Vue.nextTick()）在DOM更新完成后获取这些元素的引用。但由于你在创建元素时直接设置了ref属性，所以第二种方法也无法解决这个问题。

你可以考虑在模板中预留一个位置来放置动态生成的元素，然后通过改变这个预留位置的数据或者属性来改变元素的状态或内容。比如你可以这样做：

<template>
    <div class="report-container">
        <div id="travelItinerary" ref="travelItineraryContainer">
            <!-- 这里可以预留一个位置来放置动态生成的元素 -->
        </div>
    </div>
</template>

然后在你的JavaScript代码中，你可以通过操作这个预留位置的DOM元素来添加新的元素：

export default {
    mounted() {
        this.creteChart();
    },
    methods: {
        creteChart() {
            const container = this.$refs.travelItineraryContainer; // 获取预留位置的DOM元素引用
            const chart = document.createElement('div'); // 创建新的元素
            chart.style.width = '100%'; // 设置新元素的样式
            container.appendChild(chart); // 将新元素添加到预留位置
            // 此时你可以通过操作container来间接地操作新添加的chart元素
        }
    }
}

这样你就可以通过操作预留位置的DOM元素来添加新的元素，然后通过预留位置的引用(this.$refs.travelItineraryContainer)来间接地访问和操作这些新添加的元素了。同时你也可以通过这个预留位置的引用获取Vue对DOM变化的追踪和更新机制的好处。