V3 setup() 函数 ref() 函数 reactive 函数

V3 setup() 函数

• setup函数是v3提供新的组件选项。

• 之前的data、声明周期、自定义函数都可以放置在内

• 在创建组件之前执行,初始化props,紧接着就调用setup函数,从生命周期钩子的视角来看,它会在beforeCreate钩子之前被调用

• 是mixins的强化版,比mixins更加灵活

• 因为setup()是在解析其它组件选项之前被调用的,所以避免使用this

• 在setup函数中定义的变量和方法需要return出去，不然无法在模板中使用

目录

V3 setup() 函数

在setup函数中定义变量

V3 ref() 函数

V3 reactive 函数

---

在setup函数中定义变量

  setup函数里面有两种定义变量的方法，分别是 ref 和 reactive，这两种定义的数据类型是不一样的，注意区分。

V3 ref() 函数

在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI

例如：使用ref函数定义一个变量count:

<template>
    <h1>{
  { count }}</h1>
    <button @click&