import {onMounted, ref, useTemplateRef} from "vue";
时间: 2024-09-12 22:17:37 浏览: 68
在Vue.js中,`import {onMounted, ref, useTemplateRef} from "vue";`这一部分引入了一些核心的API和功能:
1. `ref`: 这是Vue内置的一个响应式数据绑定工具,用于创建可读写的响应式变量。通过`ref()`函数可以创建一个响应式的属性,并返回一个对象,该对象包含`.value`属性用于获取或设置值,以及`.proxy`属性提供访问它的代理对象,方便链式调用。
示例:
```javascript
const counter = ref(0);
console.log(counter.value); // 输出0
counter.value++;
```
2. `onMounted`: 是生命周期钩子之一,它会在组件挂载完成后执行,通常用于初始化需要依赖DOM的操作,如数据获取、DOM操作等。
示例:
```javascript
onMounted(() => {
console.log(document.getElementById('myElement')); // 当DOM加载完成后再访问元素
});
```
3. `useTemplateRef`: 是基于模板引用插件提供的API,用于保存对当前组件模板中的某个元素的引用,常用于异步组件间的通信或者是延迟执行某些操作。
示例:
```javascript
const templateRef = useTemplateRef();
templateRef.current.focus(); // 可以在渲染完成后聚焦对应的元素
```
阅读全文