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>