原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
vue中$refs的三种用法解读
目录vue$refs的三种用法1、vue2中2、vue3中3、vue3的组合API（composition-api）对vue中$refs的理解描述总结
vue$refs的三种用法
我们都知道，在vue2中获取DOM元素，可以直接在元素上绑定ref属性，然后获取到DOM元素的属性值，这种方法在vue3中仍然可以使用，但也会有一些问题。
下面就介绍$refs的三种用法：
1、vue2中
在vue2中，我们可以直接使用ref获取元素，也就是直接在元素上绑定ref属性，在直接使用this.$refs[自定义属性名]就能直接获取。
但是这样也是有一定风险的。因为ref绑定的在元素上，所以当元素没有进行渲染时，是不能通过ref获取到元素的。
template
?div
??divref=btn我是一个按钮/div
?/div
/template
script
exportdefault{
?name:App,
?created(){
??//直接使用this.$refs获取DOM元素
??console.log(this.$refs.btn);//undefined
??this.$nextTick(()={
??????console.log(this.$refs.btn)?//获取到正确元素
???})
?mounted(){
???console.log(this.$refs.btn);//获取到正确元素
/script
需要注意的是，在于vue2中使用这种方法获取v-for的元素时，获取到的是一个数组。
template
?div
??divref=btnv-for=(item,index)in3:key=index我是一个按钮/div
?/div
/template
script
exportdefault{
?name:App,
?mounted(){
??//获取到的是一个元素数组?
???console.log(this.$refs.btn);?
/script
2、vue3中
在一般情况下，vue2的获取元素的方法在vue3也完全适用。
但是，有时候可能会遇到无法获取这个节点，原因是生命周期的问题，在vue3中原来的created没有了，而setup充当了原来的created。
所以在setup的时候，dom元素还没有被创建，只有setup完毕了之后HTML才能构建，这时才能真正访问到value值，所以自然就无法获取到dom节点，要想解决这个问题，就要配合钩子函数onMounted，在dom挂载完毕后再进行获取。
template
???divid=ref
????!--在元素上用ref=butRef绑定--
??????buttontype=buttonref=butRef按钮元素/button
???/div
/template
script
??//引入ref
???import{ref,onMounted}fromvue
???exportdefault{
??????setup(){
??????//需要先定义butRef
?????????letbutRef=ref(null)
??????onMounted(()={
???????//使用的时候为butRef.value（需要加点value获取DOM元素值）
??????????console.log(butRef.value);
??????})
?????????return{
????????????butRef
?????????}
??????}
???}
/script
3、vue3的组合API（composition-api）
最后一种方法就是从上下文Ctx（context）中解构构出refs，虽然这里refs可能会提示已经被弃用，但是在这里仍然是可以用的。
template
???divid=ref
??????buttontype=buttonref=butRef按钮元素/button
???/div
/template
scriptlang=ts
impor
文档评论（0）