[JavaScript知识库]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="change_count">点我</button>
</template>
<script>
import?{?ref?}?from?'vue'
export?default?{???
????setup()?{??
????????let?count?=?ref(0);
????????function?change_count()?{
????????????count.value?+=?1;
????????}
????????return?{?count,?change_count?}
????}
}
</script>

注意：

• 在setup中定义的变量或方法，都必须通过return {xxx,xxx}暴露出去，外界才能使用

• ref函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）

V3 reactive 函数

用来检测复杂数据类型的变化

<template>
????<h1>{{?obj?}}</h1>
????<button?@click="change_age">点我</button>
</template>
<script>
import?{?reactive?}?from?'vue'
export?default?{???
????setup()?{??
????????let?obj?=?reactive({?name:?"Alice",?age:?12?});
????????function?change_age()?{
????????????++obj.age
????????}
????????return?{?obj,?change_age?}
????}
}
</script>