做常识的网站,吴忠住房和城乡建设局网站,谷歌seo优化什么意思,做网站策划薪酬Vue 生命周期详解#xff08;重点#xff1a;mounted#xff09;
Vue 实例在创建到销毁的过程中#xff0c;会经历一系列的初始化过程#xff0c;比如数据的初始化、DOM 的挂载、组件的更新与销毁等。Vue 为我们提供了一组生命周期钩子函数#xff0c;让我们可以在特定的…Vue 生命周期详解重点mounted
Vue 实例在创建到销毁的过程中会经历一系列的初始化过程比如数据的初始化、DOM 的挂载、组件的更新与销毁等。Vue 为我们提供了一组生命周期钩子函数让我们可以在特定的时机执行自定义代码。
生命周期总体流程简述
下面是一个典型的 Vue 实例的生命周期流程
beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed什么是 mounted
mounted 是 Vue 实例生命周期中的一个钩子函数表示 当前 Vue 实例已经被挂载到页面中相关的 DOM 元素也已经被渲染完毕。 换句话说当 mounted 被调用时HTML 页面上我们用 Vue 控制的部分已经出现在浏览器上Vue 可以访问并操作页面中的 DOM 元素也可以发送网络请求更新数据。 mounted 的常见用途
发送 AJAX 请求加载页面数据初始化第三方插件或图表如 ECharts、Swiper 等操作 DOM 元素获取宽高、添加样式等开启定时器或轮询机制监听窗口事件resize、scroll 等 示例一在 mounted 中加载用户数据
假设我们要在页面加载后获取用户列表信息可以在 mounted 中发起请求
mounted() {axios.get(http://localhost:8080/account/list?page1size2).then(response {this.array response.data.records;this.total response.data.total;this.page response.data.current;this.size response.data.size;})
}这段代码做了什么
当页面加载完毕后自动执行 axios.get(...) 这一请求请求的结果用于更新 Vue 实例的 array、total、page 和 size更新的数据自动绑定到表格和分页控件中Vue 会响应式更新视图无需手动操作 DOM。 示例二和 created 的区别
有人可能会问为什么不在 created 中发送请求下面是两者的比较
钩子函数执行时机是否可以访问 DOM常见用途created实例创建后DOM 未挂载否初始化数据、配置全局状态等mountedDOM 元素已插入到页面中是发请求、访问 DOM、初始化插件等
简单来说如果你不需要访问 DOM只是设置数据用 created 如果你需要操作页面上的元素如表格、图表、轮播图等用 mounted 更安全。 示例三结合 Vue 模板的真实项目场景
以你的分页表格项目为例我们在 mounted 中第一次加载第一页的数据。
mounted() {this.loadData(this.page);
},
methods: {loadData(currentPage) {axios.get(http://localhost:8080/account/list?page${currentPage}size${this.size}).then(resp {this.array resp.data.records;this.total resp.data.total;this.page resp.data.current;this.size resp.data.size;})}
}作用
页面初次加载时自动加载第一页数据数据加载完成后Vue 自动将结果渲染到 el-table 表格组件上与分页组件联动切换页码时也重新请求。 补充其他常用生命周期钩子
钩子函数含义说明beforeCreateVue 实例初始化前调用无法访问 data 和 methodscreatedVue 实例创建后调用可以访问 data但 DOM 未渲染beforeMountDOM 挂载前调用mountedDOM 挂载后调用适合发送请求或初始化 DOM 操作beforeUpdate数据更新前调用updatedDOM 更新完成后调用beforeDestroy实例销毁前调用destroyed实例销毁后调用 小结mounted 的本质
适用于需要在页面渲染后进行“首次初始化”操作的场景比如从后台加载数据、初始化图表、访问 HTML 元素等mounted 只会执行一次页面重新加载组件时才会再次触发。
