vue3怎么获取ref和r

如何获取 Vue 3 中的 ref 和 reactive

在 Vue 3 中，ref API 允许您访问组件实例、DOM 元素或任何 JavaScript 对象。同样，reactive API 允许您将 JavaScript 对象转换为具有响应性的代理对象。

获取 ref

要获取 ref，您可以在组件模板中使用带有 ref 属性的元素或组件：

<template><input ref="myInput"></template><script>export default {  mounted() {    console.log(this.$refs.myInput); // 访问输入元素的引用  }}</script>

获取 reactive 对象

要获取 reactive 对象，请使用 reactive() 函数：

立即学习“前端免费学习笔记（深入）”；

import { reactive } from 'vue';const myObject = reactive({  name: 'John',  age: 30});

响应性

对 ref 或 reactive 对象进行的任何更改都会触发组件的重新渲染。这意味着您可以在 HTML 模板中使用 ref 或 reactive 对象的数据，并且当数据发生更改时，视图将自动更新。

区别

用例

ref：

reactive：

通过结合使用 ref 和 reactive，您可以轻松地构建响应式和交互式的 Vue 3 应用程序。