从Vue2转Vue3开发，created钩子函数真的要全丢吗？

terry 54分钟前阅读数 18 #Vue

文章标签 Vue3 created钩子

Vue3里created钩子到底还存在吗？

刚接触Vue3的时候，很多人要么直接用了<script setup>语法糖，要么就跟着教程直接写组合式API的setup()函数，看到官方文档里生命周期钩子的部分都是onBeforeMount、onMounted这些带前缀的，下意识就以为created被砍掉了——这完全是个误解！

不管你用的是Vue3的选项式API写法（就是和Vue2一样，data、methods、created这些都放在export default对象里），还是不用<script setup>的普通组合式API（在export default里显式写setup()函数返回内容），created钩子都是完整保留并且功能逻辑和Vue2完全一致的，区别只在于，<script setup>语法糖里没法直接写created的选项声明——那是不是<script setup>里就用不了created的逻辑了？也不是,后面会专门讲这个问题。

举个小例子就能直观对比：选项式API里，你还是可以像Vue2那样，在组件初始化、data和props初始化完成（注意！这里是响应式的data/props，不是普通的JavaScript变量）、computed和watch的配置也处理好，但DOM完全没渲染、$el不存在、$refs还没绑定的时候，写created钩子做数据请求、修改本地状态前置校验这些事,完全没问题：

// Vue3选项式API写法，created照常写
export default {
  data() {
    return {
      userInfo: null,
      errorMsg: ''
    }
  },
  props: {
    userId: {
      type: String,
      required: true
    }
  },
  created() {
    // 这里this.userId已经是响应式的值，能直接用
    if (!this.userId.trim()) {
      this.errorMsg = '请传入有效的用户ID'
      return
    }
    // 数据请求放这里也没问题，不用等mounted
    this.fetchUserInfo()
  },
  methods: {
    async fetchUserInfo() {
      try {
        const res = await fetch(`/api/user/${this.userId}`)
        this.userInfo = await res.json()
      } catch (e) {
        this.errorMsg = '获取用户信息失败'
      }
    }
  }
}