这几天我远程面试了一家公司,期间问题我都回答上来了 但有一个问题我很纳闷

就是你说下vue中获取dom元素的方法吧

我说大体上俩中吧  1.vue中 ref的方法 给元素起一个ref名称 通过  this.$refs.ref名称获取

2.第二个无非是 原生dom操作了  document.getElement //  document.querySelector 等等 

人家说 如果是 从后台渲染的 动态元素呢   我说 上面的我说的方法不行吗  

人家说 不是我想要的   我说那这种情况我没见过  然后就过去了 

我特意做了一个简单的小demo  毕竟以前也搞过

<div id="app"><ul>//  给每一个 li 元素起一个  ref名字 和  id的数值  <li :ref="'s'+index" v-for="(item,index) in array" :key="index" :id="'s'+index">hello world {{item}}=====<button>删除</button></li></ul></div>

var app=new Vue({el:'#app',data:{array:[1,2,3,4,5,6,7]   //  动态模拟渲染数据   },mounted(){var dom1=document.querySelector('#s0');dom1.style.color="#f00"console.log('mount钩子函数',dom1,this.$refs.s1); // this.$refs.s1 获取的是一个存取dom元素数组  this.$refs.s1[0].style.color="red"   //  第一个就是我们想要的元素},created(){var dom1=document.querySelector('#s2');console.log('created钩子函数',dom1); }})

最后页面上都实现 dom样式的改变   最好在 mountd中调用 因为那个时候 dom元素已经挂在上了

注意了 不能再 created 钩子函数中使用 因为那个时候  dom元素还没有准备好

会报出一个 null的问题   操作dom元素 会报  undefined操作 错误 

同时 大家不要再 组件上添加 ref操作 组件的样式  这样本来就不可能

组件 通过ref只能操作 组件其中的方法和数据

哪位同学知道 其他的 vue中获取动态dom元素的 麻烦告知一下  

后续 播客已经发布  

想知道答案的同学  给飞机票  后来博主更新的博客  

https://blog.csdn.net/yunchong_zhao/article/details/108979302