Vue中$refs的理解

$refs是一个对象，持有注册过ref attribute的所有DOM元素和组件实例。

描述

ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，如果在普通的DOM元素上使用，引用指向的就是DOM元素，如果用在子组件上，引用就指向组件实例，另外当v-for用于元素或组件的时候，引用信息将是包含DOM节点或组件实例的数组。

<!DOCTYPE html>

<html>

<head>

    <title>Vue</title>

</head>

<body>

    <div id="app">

        <div ref="node">Node</div>

        <layout-div ref="layout"></layout-div>

        <div v-for="i in 3" :key="i" ref="nodearr">{{i}}</div>

    </div>

</body>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

<script type="text/javascript">

    Vue.component("layout-div", {

      data: function(){

          return {

            count: 0

          }

      },

      template: `<div>

                    <div>{{count}}</div>

                </div>`

    })

    var vm = new Vue({

        el: '#app',

        mounted: function(){

            console.log(this.$refs.node); // <div>Node</div> // DOM元素

            console.log(this.$refs.layout); // VueComponent {_uid: 1, ...} // 组件实例

            console.log(this.$refs.nodearr); // (3) [div, div, div] // DOM元素数组

        }

    })

</script>

</html>

因为ref本身是作为渲染结果被创建的，在初始渲染的时候是不能访问的，因为其还不存在，而且$refs也不是响应式的，因此不应该试图用它在模板中做数据绑定，在初始化访问ref时，应该在其生命周期的mounted方法中调用，在数据更新之后，应该在$nextTick方法中传递回调操作来获取元素或实例，此外一般不推荐直接操作DOM元素，尽量使用数据绑定让MVVM的ViewModel去操作DOM。

<!DOCTYPE html>

<html>

<head>

    <title>Vue</title>

</head>

<body>

    <div id="app"></div>

</body>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

<script type="text/javascript">

    var vm = new Vue({

        el: '#app',

        data: function(){

            return {

                msg: 0

            }

        },

        template:  `<div>

                       <div ref="node">{{msg}}</div>

                       <button @click="updateMsg">button</button>

                    </div>`,

        beforeMount: function(){

            console.log(this.$refs.node); // undefined

        },

        mounted: function(){

            console.log(this.$refs.node); // <div>0</div>

        },

        methods: {

            updateMsg: function(){

                this.msg = 1;

                console.log(this.$refs.node.innerHTML); // 0

                this.$nextTick(() => {

                    console.log(this.$refs.node.innerHTML); // 1

                })

            }

        }

    })

</script>

</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://cn.vuejs.org/v2/api/#ref

https://zhuanlan.zhihu.com/p/50638655

https://juejin.im/post/5da58c54e51d4524e207fb92

Vue中$refs的理解的更多相关文章

  1. Vue中$nextTick的理解

    Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...

  2. vue中$refs的使用

    vue中$refs获取组件或元素: 获取的元素就相当于是一个原生获取的元素,可以进行操作 this.$refs.ele.style.color = 'red

  3. vue & button & refs & click & bug

    vue & button & refs & click & bug $refs.btn.click() ??? vue & refs $refs.btn.$em ...

  4. vue中keepalive怎么理解？​---vue中文社区

    vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/ ...

  5. vue中mixins的理解及应用

    vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...

  6. vue渐进式开发的理解和指令

    1.vue渐进式开发 vue是一个渐进式的框架,轻量,易于上手,为啥是渐进式那,我当时也很蒙,比如的官网是jquery写的,就可以通过script标签引入事先准备好的vue.min.js的压缩源代码或 ...

  7. Vue学习之--------深入理解Vuex之多组件共享数据（2022/9/4）

    在上篇文章的基础上:Vue学习之--------深入理解Vuex之getters.mapState.mapGetters 1.在state中新增用户数组 2.新增Person.vue组件 提示:这里使 ...

  8. 理解MVVM在react、vue中的使用

    理解MVVM在react.vue中的使用 一:什么是MVC.为什么不用MVC 1:MVC的含义: M(modal):是应用程序中处理数据逻辑的部分. V (view)  :是应用程序中数据显示的部分. ...

  9. 函数防抖节流的理解及在Vue中的应用

    防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入 ...

  10. 对vue中nextTick()的理解及使用场景说明

    异步更新队列: 首先我们要对vue的数据更新有一定理解: vue是依靠数据驱动视图更新的,该更新的过程是异步的. 即:当侦听到你的数据发生变化时, Vue将开启一个队列(该队列被Vue官方称为异步更新 ...

随机推荐

  1. Android生成SHA1(证书指纹)

    去到jdk所在目录 C:\Program Files (x86)\Java\jdk1.8.0_73\bin 输入命令: keytool -list -v -keystore mykey.keystor ...

  2. [转帖]mysql8.0 MySQL函数

    PART1. MySQL函数介绍 函数表示对输入参数值返回一个具有特定关系的值,MySQL提供了大量丰富的函数,在进行数据库管理以及数据的查询和操作时将会经常用到各种函数.各类函数从功能方面主要分为数 ...

  3. [转帖]Oracle JDBC中的语句缓存

    老熊 Oracle性能优化 2013-09-13 在Oracle数据库中,SQL解析有几种: 硬解析,过多的硬解析在系统中产生shared pool latch和library cache liatc ...

  4. [粘贴]TiFlash

    TiFlash 是 TiDB HTAP 形态的关键组件,它是 TiKV 的列存扩展,在提供了良好的隔离性的同时,也兼顾了强一致性.列存副本通过 Raft Learner 协议异步复制,但是在读取的时候 ...

  5. [转帖]crash工具分析Kdump下vmcore文件常用命令总结（三）（实例易懂）

    一.简介 本文主要介绍使用crash工具对kdump生成的vmcore文件进行分析,解析常见的crash命令,前面已讲述两章关于Kdump的内容,读者感兴趣可以点击下面的链接: 1.Kdump调试机理 ...

  6. [转帖]Redis 最大客户端连接数，你了解吗？

    文章系转载,方便整理和归纳,源文地址:https://cloud.tencent.com/developer/article/1803944 1. 前言 上一篇文章<你的Redis集群撑得住吗? ...

  7. [转帖]Cgroups资源限制

    https://cloud.tencent.com/developer/article/2108816?areaSource=105001.13&traceId=QzVtWN5jGl8zeYZ ...

  8. [转帖]Linux kernel内存管理之overcommit相关参数

    前言 了解 linux kernel内存管理,首先可以从用户空间的角度来看kernel的内存管理,执行ls /proc/sys/vm的命令,就可以看到vm运行的所有参数,其中就包含了跟overcomm ...

  9. [转帖]SpecCPU2017 测试cpu性能

    https://www.bbsmax.com/A/GBJrxP1Ed0/ SpecCPU介绍见: https://blog.csdn.net/qq_36287943/article/details/1 ...

  10. Nginx与Tomcat作为前端服务器的性能比较

    Nginx与Tomcat作为前端服务器的性能比较 摘要 最近总遇到使用tomcat还是使用nginx进行前端文件访问的争论 想着出差周末在酒店, 可以自己进行一下简单的测试. 希望能够对未来的工作进行 ...