Vue.js 3 中的setup函数：旧变量在哪里？

Vue.js 3 中的setup函数

setup 函数是一个新的生命周期函数，它在 beforeCreate 和 created 生命周期函数之前执行。setup 函数的作用是初始化组件的数据和方法，并返回一个包含这些数据的对象。

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, world!')

    return {
      message
    }
  }
}

在上面的示例中，setup 函数使用 ref() 函数创建一个名为 message 的响应式数据变量。然后，它将 message 变量返回给组件。

旧的 data、methods、watch 和 computed 变量在哪里？

在 Vue.js 3 中，旧的 data、methods、watch 和 computed 变量都已经被废弃了。您需要使用 setup 函数来初始化组件的数据和方法。

export default {
  setup() {
    const data = {
      message: 'Hello, world!'
    }

    const methods = {
      greet() {
        console.log(this.message)
      }
    }

    return {
      ...data,
      ...methods
    }
  }
}

在上面的示例中，setup 函数使用 JavaScript 对象字面量创建 data 和 methods 对象。然后，它使用 ... 运算符将 data 和 methods 对象合并成一个对象，并返回给组件。

总结

Vue.js 3 中的 setup 函数取代了 beforeCreate 和 created 生命周期函数。这意味着，旧的 data、methods、watch 和 computed 变量不再可以使用。您需要使用 setup 函数来初始化组件的数据和方法。

setup 函数是一个新的生命周期函数，它在 beforeCreate 和 created 生命周期函数之前执行。setup 函数的作用是初始化组件的数据和方法，并返回一个包含这些数据的对象。

您可以使用 ref() 函数创建响应式数据变量，并使用 ... 运算符将多个对象合并成一个对象。