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. [js] - 为子节点增加鼠标移入和移出的样式

    var cards = document.querySelectorAll(".card"); for (let index = 0; index < cards.lengt ...

  2. [转帖]Oracle安装 - shmmax和shmall设置

    https://www.cnblogs.com/ddzj01/p/16108010.html 一.概述 在Linux上安装oracle,需要对内核参数进行调整,其中有shmmax和shmall这两个参 ...

  3. [转帖]缓存与存储的一致性策略：从 CPU 到分布式系统

    https://zhuanlan.zhihu.com/p/151745863 在计算机系统设计实践中,我们常常会遇到下图所示架构: 为了解决单个存储器读吞吐无法满足要求的问题,常常需要在存储器上面增加 ...

  4. [转帖]金仓数据库KWR使用说明

    金仓数据库KWR使用说明 1.KWR性能报告介绍 2.部署KWR性能报告功能 2.1.修改配置文件 2.2.使配置文件中参数生效 2.3.创建KWR扩展 3.使用KWR快照功能 3.1.创建KWR快照 ...

  5. Python学习之六_同时访问Oracle和Mysql的方法

    Python学习之六_同时访问Oracle和Mysql的方法 背景 jaydebeapi 可以访问大部分数据库. 但是他有一个问题是仅能够访问一种类型的数据库. 如果同事连接两种数据库,那么就会出现问 ...

  6. [转帖]Linux之系统参数overcommit_memory

    https://www.modb.pro/db/25980 前言:作为DBA,内存的使用情况是重要的监控指标之一,了解内存使用很重要.下面有一个系统参数,对于内存的调用起到重要的作用.大家可以了解一下 ...

  7. [转帖]SYSTEMD 配置文件

    https://www.cnblogs.com/xiexun/p/13643952.html [Unit]区块通常是配置文件的第一个区块,用来定义 Unit 的元数据,以及配置与其他 Unit 的关系 ...

  8. [转帖]网卡多队列：RPS、RFS、RSS、Flow Director（DPDK支持）

    Table of Contents 多队列简介 RPS介绍(Receive Packet Steering) RFS介绍(Receive flow steering) RSS介绍(receive si ...

  9. [转帖]2022年 SRE、DevOps技能图谱

    https://zhuanlan.zhihu.com/p/568752990 在过去一段时间,我面试过一些 DevOps 相关从业者,并且曾经收到过一些知乎小伙伴的提问,针对于 DevOps 以及相关 ...

  10. 程序员必备！10款实用便捷的Git可视化管理工具

    前言 俗话说得好"工欲善其事,必先利其器",合理的选择和使用可视化的管理工具可以降低技术入门和使用的门槛.我们在团队开发中统一某个开发工具的使用能够大大降低沟通成本,提高协作沟通效 ...