【vue】前端学习

码出人生_10242024-10-16 23:15

一、created 与 mounted 钩子函数用法与区别

1、created钩子函数，执行时挂载阶段还没有开始，模板还没有渲染成html，主要用来初始化数据。

例如：加载二级代码

复制代码

created() {
  //初始化数据
  this.fetchData();
}

2、mounted钩子函数，常用于页面加载完成后进行DOM操作或发送请求获取数据。

例如：初始化图表，因为在created钩子中，DOM还没被完全渲染出来，可能导致图表无法争取渲染。

复制代码

mounted() {
      //初始化图表数据
      this.initCharts()
    }

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

最后，所有的方法都应该在methods里定义，在mounted或created里面使用this调用没用这个方法实现初始化。