{ onMounted, ref } from 'vue'
时间: 2024-09-15 22:12:04 浏览: 37
`onMounted` 和 `ref` 都是 Vue.js 中常用的生命周期钩子和组件属性。
1. **onMounted**: 这是一个在组件实例挂载到 DOM 后立即调用的钩子函数。在这个函数里,你可以执行一些依赖于 DOM 的初始化操作,比如从服务器获取数据并填充到组件的数据绑定中,或者设置一些初始状态。它是 `setup()` 函数的一部分,而不是在 `created()` 或者 `mounted()` 钩子里使用,因为 `setup()` 更加灵活且可以在组件渲染之前运行。
2. **ref**: 这是 Vue 提供的一种特殊类型,用于创建反应式的引用。通过 `ref` 可以创建一个对象或值,并将其包装成一个响应式变量。你可以像访问普通 JavaScript 对象那样访问它的属性,同时 Vue 会自动处理数据更新视图的过程。例如,`const inputRef = ref(null)` 创建了一个可以绑定到 HTML 输入元素的对象,你可以通过 `inputRef.value` 访问输入框的值。
使用这两个特性时,通常会配合一起工作,比如在 `onMounted` 中设置 `ref` 对象的初始值:
```javascript
import { onMounted, ref } from 'vue';
export default {
setup() {
const inputValue = ref('');
onMounted(() => {
// 在组件挂载后,可以获取或修改 inputValue
// 比如从 API 获取数据并赋值给 inputValue
fetchData().then(data => inputValue.value = data);
});
return { inputValue };
},
};
```
阅读全文