1. mounted 生命周期钩子简介
`mounted` 是 Vue.js 生命周期中的一个钩子函数，表示组件或页面已经挂载到 DOM 上。在 Uniapp 中，`mounted` 同样适用，并且常用于以下场景：
- 数据请求：在页面加载时请求后端接口获取数据。
- DOM操作：当页面元素已经渲染完成时，进行一些 DOM 操作。
- 事件绑定：在页面加载完成后绑定事件监听器。
2. mounted的基本用法
在 Uniapp 的页面或组件中，你可以直接在 `script`部分定义 `mounted`方法。以下是一个简单的示例：
vue
在这个例子中，当页面挂载完成后（即 `mounted`被触发），控制台会输出 "Page has been mounted"，并且调用 `fetchData()`方法来更新页面的数据。
3.mounte d与异步请求结合使用
在实际开发中,我们经常需要在页面上显示从服务器获取的动态.这时就可以利用mounte d来发起异步请求.
假设我们需要从某个API获取用户信息并展示出来:
- <script>
- export default {
- data() {
- return {
- message: 'Hello, Uniapp!'
- };
- },
- mounted() {
- console.log('Page has been mounted');
- this.fetchData();
- },
- methods: {
- fetchData() {
- //模拟一个异步请求
- setTimeout(() => {
- this.message = 'Data fetched successfully!';
- },1000);
- }
- }
- };
- </script>
- <script >
- import axios from'axios';
- export default{
- data(){
- return{
- user:{},
- isLoading:true
- };
- },
- async mounte d(){
- try{
- const response=await axios.get('https://api.example.com/user');
- this.user=response.data;
- this.isLoading=false;
- }catch(error){
- console.error('Failed to fetch user data:',error);
- }
- }
- };
文章点评