【v-for的渲染问题】 this.$refs.xxx 打印出undefined

背景

本来我的计划是用v-for来渲染一个标签组的，然后在父组件中使用ref来控制其中每一个标签，完成初始化的工作，然后我在mounted()里使用

<input type="text" ref="refName">

mounted() {
   console.log(this.$ref.refName); 
} 

但是运行之后发现打印出了 undefine，所以应该是在mouted()中，v-for还未渲染完成

解决：

1）在下一个生命周期中使用ref

updated() {
   console.log(this.$ref.refName); 
} 

但是要注意的是：mouted()只会执行一次，而updated会在每次data发生变化时更新，酌情使用

2）写一个方法，然后在mounted()中调用，这个方法里写上待渲染完毕的函数

function1 () {
  this.$nextTick(() => {
    console.log(this.$refs.refName)
  })
},

3）Vue中强制组件重新渲染的正确方法

4) 第2步骤 + 第3步骤，结合解决