首页vue3如何使用ref

vue3如何使用ref

时间: 2024-12-26 10:21:39 浏览: 56

### Vue3 中 `ref` 的使用在 Vue 3 中，`ref` 主要用于两个方面：一是创建响应式的变量；二是获取 DOM 元素或子组件实例。 #### 创建响应式变量当作为响应式数据声明时，`ref` 函数返回一个带有 `.value` 属性的对象来存储原始值。每当这个属性被访问或修改的时候都会触发视图更新[^2]。 ```javascript import { ref } from 'vue' export default { setup() { const count = ref(0) function increment() { count.value++ } return { count, increment } } } ``` 此代码片段展示了如何利用 `setup()` 方法中的组合 API 来定义名为 `count` 的响应式状态，并通过调用 `increment` 函数改变其数值。 #### 获取 DOM 或者组件实例对于操作真实 DOM 节点或是访问子组件的情况，则可以直接给模板内的标签添加 `ref` 特性并赋值唯一字符串标识符，在 JavaScript 部分可以通过同名变量获得对应对象[^5]。 ```html <template> <input ref="inputRef" /> </template> <script> import { onMounted, ref } from 'vue' export default { setup() { let inputRef = ref(null) onMounted(() => { // Focus the element when mounted. inputRef.value.focus() }) return { inputRef } } } </script> ``` 上述例子说明了怎样聚焦于页面加载完成后的一个输入框上。这里需要注意的是初始化时应给予 `null` 初始值以便稍后能够正确识别目标节点。

阅读全文