vue3中ref,vue3 ref函数

　　本文主要介绍vue3如何使用ref获取元素，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

vue3使用ref获取元素

　　在vue2.x中，通过给元素添加属性ref=xxx ，然后通过这个获取对应的元素，就可以得到对应的元素。代码中的$refs.xxx。

　　但是vue3中没有$refs这一项，所以vue3中ref属性获取的元素不能以vue2的方式获取。

　　Vue3需要生命周期方法的帮助，原因很简单，执行setup时，模板中的元素还没有挂载到页面上，所以只有挂载后才能获取元素。

　　模板

　　我是DIV/div

　　/模板

　　脚本

　　导入{ref，onMounted}

　　导出默认值{

　　setup(){

　　let box=ref(null)；

　　onMounted(()={

　　console.log(box.value)

　　});

　　返回{box}

　　}

　　/脚本

vue3中ref的理解

1.什么是ref?

　　像ref reactive一样，它也是一种用于实现响应数据的方法。

　　因为reactive必须要传递一个对象，所以在实际开发中要让一个变量有反应是非常麻烦的。

　　所以Vue3规定ref方法实现简单，值得监控。

2.ref本质

　　ref的底层实际上是无功的，所以系统会在运行时根据传入的ref自动将其转换为无功。

3.ref注意点

　　vue中使用的ref的值不是通过value获得的。

　　js中使用的ref的值必须通过value获取。

4.ref获取元素

　　在vue2中，我们可以给元素加上ref= XXX ，然后在代码中通过ref=xxx 得到元素。在vue3中，我们也可以通过ref获取元素。

　　但不是像下面这样熟悉的方式，因为vue3中没有$和refs这样的东西。

　　错误示范

　　正确写法

　　模板

　　差异

　　我是div/div

　　/div

　　/模板

　　脚本

　　从“vue”导入{ ref，on mounted }；

　　导出默认值{

　　setup() {

　　let box=ref(null)；//本质是反应性的({value:null})

　　//需要在生命周期中获得

　　onMounted(()={

　　//接口挂载时，会自动执行。

　　console . log(box . value)；

　　})

　　//接受null，因为setup比mounted早执行，dom还没有形成。

　　console . log(box . value)；

　　返回{ box }；

　　};

　　/脚本

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。