created和mounted在什么情况下使用

created钩子，此时data与methods已经初始化，但是还没有编译模板。

mounted钩子，此时模板已经编译完成，并且挂载到了页面指定的容器中。

生命周期	是否获取DOM节点	是否获取data	是否获取methods
created	否	是	是
mounted	是	是	是

 

 

使用场景

1.created钩子中可以初始化数据或者发送ajax请求获取要渲染页面的数据，也是使用较多的生命周期钩子

data() {
    return {
      name:'',
      form: {},
      articleId: ''
    }
},
async created() {
    // 初始化name属性
    this.name = 'tom'
    // 获取其他路由传过来的参数
    this.articleId = this.$route.params.articleId
    if (this.articleId) {
      // articleId为参数的ajax请求
      const res = await productArticle(this.articleId)
      this.form = res.data.detailArticle
    }
 }

vue3中Composition API写法需要写在onMounted钩子中

import { onMounted, ref, reactive } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute()

const topicId = ref('')

const topicDetail = reactive({
    data: {},
    recommendList: []
})

const getDetailaction = async () => {
    const res = await detailaction({ id: topicId.value })
    topicDetail.data = res.data
    topicDetail.recommendList = res.recommendList
}

onMounted(() => {
    topicId.value = route.query.id
    getDetailaction()
})

由于setup是围绕beforeCreate和created生命周期钩子运行的，所以不需要显式地定义它们。换句话说，这些钩子中编写的代码都应该直接在setup函数中编写。

 

2.mounted钩子中可以对dom节点进行操作，也可以插件或组件时进行操作，比如ECharts

mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('bar-main'))

    var options = {
       ...
    }
    
    myChart.setOption(options)
}