深入浅析Vue 中 ref 的使用


Posted in Javascript onApril 29, 2019

官网上的说明

深入浅析Vue 中 ref 的使用

一、前言#

在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作。但是,当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后,对于 DOM 的操作我们就应当完全的交给框架,而我们只需要关注于数据。难道,在 Vue 中就不能手动获取到页面上的 DOM 元素了吗,答案当然是可以手动获取到 DOM 元素的,在 Vue 中我们可以通过使用 ref 实现获取 DOM 元素的功能,当然,这也只是 ref 其中一项的功能。本章,我们就来学习 Vue 中 ref 的相关使用。

仓储地址:https://github.com/Lanesra712/VueTrial/blob/master/chapter02-bronze/ref.html

 二、干货合集#

ref 在 Vue 中是用来给元素或是子组件注册引用信息到父组件或是 Vue 实例上,注册后的引用信息都会呈现在父组件/Vue 实例的 $.refs 上,这时,我们就可以通过 $.refs 获取到引用的 DOM 对象或是子组件信息。

例如,我们可以获取到页面上添加了 ref 的 input 输入框的值,对于子组件来说,我们可以直接获取到子组件 data 选项中的数据,或是直接调用子组件的方法。

1、虚拟 DOM#

在我们使用 JS/Jquery 直接对 DOM 元素进行操作时,不管是对元素样式的修改(背景颜色从红色变成蓝色)还是对页面中的某些布局进行动态调整(通过点击按钮在列表中添加一行新的数据),这都会造成页面的重新渲染,从而影响我们网站的性能。而在 Vue 中,通过在内存中生成与真实 DOM 与之对应的数据结构(虚拟 DOM),当页面发生变化时,通过新的虚拟 DOM 树与旧的虚拟 DOM 树进行比对,就能很快的找出差异点,从而得出应施加到真实 DOM 上的改动。

2、使用 ref 获取页面 DOM 元素#

在使用 JS/Jquery 获取页面的 DOM 元素时,我们一般是根据 id、class、标签、属性等其它标识来获取到页面上的 DOM 元素。嗯,可以说,我们很难抛弃 Jquery 的一个重大原因,就是当我们需要获取到页面上的 DOM 元素时,使用 Jquery 的 API 相比于原生的 JS 代码,简单到极致,有木有。

document.getElementById('id').value => $('#id').val()

那么,难道我们在 Vue 中获取 DOM 元素还是采用这样的方式?

答案当然是否定的,这种直接操纵 DOM 元素的方式,与我们使用 Vue 的初衷不符,虽然能达成效果,但是却不提倡,这里我们就可以使用 ref 来获取页面上的 DOM 元素。

在下面的代码中,我在 input 上添加了一个 ref 属性,之后,我们就可以在 Vue 实例中获取到这个 input 输入框的值。这里,我在 beforeMount、mounted 这两个 Vue 中的生命周期钩子函数以及一个按钮的点击事件中尝试获取到这个 input 输入框的值。

<div id="app">
 <input type="text" ref="msgText" v-model="msg" />
 <button @click="getElement">获取元素值</button>
</div>

<script>
 var vm = new Vue({
  el: "#app",
  data: {
   msg: 'Hello ref'
  },
  beforeMount() {
   console.log('beforeMount: ' + this.$refs.msgText.value)
  },
  mounted() {
   console.log('mounted: ' + this.$refs.msgText.value)
  },
  methods: {
   getElement() {
    console.log(this.$refs.msgText.value)
   }
  }
 });
</script>

深入浅析Vue 中 ref 的使用

运行代码,从结果中可以看到,在 beforeMount 这个钩子函数中,我们是无法获取到这个 DOM 元素的值,结合之前学习的 Vue 生命周期的相关知识,当执行到 beforeMount 钩子函数时,Vue 虽然已经将模板编译完成,但是尚未挂载到页面 DOM 元素上,因此我们可以得出 ref 是在页面渲染完成后才被创建的。

深入浅析Vue 中 ref 的使用

可以看到,当我们在 input 输入框中添加了 ref 属性后,在当前的 Vue 实例的 $.refs 上就挂载了当前的 input 框对象。

3、使用 ref 获取子组件对象#

同使用 ref 获取页面的 DOM 元素相似,当我们需要获取子组件时,只需要将使用到子组件上的地方添加 ref 属性即可。在下面的示例代码中,我添加了一个子组件,当我们点击 Vue 实例上的按钮时,会先调用子组件的方法,然后获取子组件的数据。

<div id="app">
 <input type="text" ref="msgText" v-model="msg" />
 <button @click="getElement">获取元素值</button>

 <hr>

 <child ref="childComponent"></child>
</div>

<template id="child">
 <div>
  <input type="datetime" name="datetime" v-model="local">
  <button @click="getLocalData">获取当前时间</button>
 </div>
</template>

<script>
 var vm = new Vue({
  el: "#app",
  data: {
   msg: 'Hello ref'
  },
  mounted() {
   console.log('mounted: ' + this.$refs.msgText.value)
  },
  methods: {
   getElement() {
    console.log('input 输入框的值为:' + this.$refs.msgText.value)
    this.$refs.childComponent.getLocalData()
    console.log('子组件 input 输入框的值为:' + this.$refs.childComponent.local)
   }
  },
  components: {
   'child': {
    template: '#child',
    data() {
     return {
      local: ''
     }
    },
    methods: {
     getLocalData() {
      var date = new Date()
      this.local = date.toLocaleString()
     }
    },
   }
  }
 });
</script>

深入浅析Vue 中 ref 的使用

可以看到,当我们将 ref 添加到子组件上,我们就可以在 Vue 实例上获取到这个注册的组件引用,同注册的 DOM 元素一样,我们都可以使用添加的 ref 属性值作为 key 获取到注册的对象。此时,我们就可以获取到这个子组件上的 data 选项和 methods 选项。

深入浅析Vue 中 ref 的使用

三、总结#

因为 Vue 采用 Virtual DOM 的做法渲染网页,如果我们直接操作 DOM,很容易产生实际网页跟 Vue 产生的 Virtual DOM 不同步的问题,而通过使用 ref 属性之后,在一些需要获取 DOM 元素的情况下,我们就可以很方便的获取 DOM 元素。当然,当我们决定在项目中使用 Vue,还是需要转变我们的思路,将操作 DOM 转变成操作数据。同样的,通过将 ref 属性添加到子组件上,我们就可以很轻松的获取到子组件的相关信息,这无疑给父组件获取子组件数据、调用子组件的方法提供了一种新的思路。

以上所述是小编给大家介绍的Vue 中 ref 的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 #Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 #Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 #Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 #Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 #Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 #Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 #Javascript
You might like
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
php实现的用户查询类实例
2015/06/18 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
生产助理岗位职责
2014/06/18 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js