VUE3里面 setup() 的常用方法一览_vuesetupextend

比较常用的方法加注视一览，我尽量写简单一点，通熟易懂，举一反三

响应式数据定义 ref、reactive

• reactive 创建一个响应式对象

<template>
   {
   {
    state.count }}
</template>
<script>
import {
    reactive } from 'vue';
export default {
   
    setup () {
   
    	//创建响应式数据
        const state = reactive({
   
            count: 0,
        });
        return {
   
            state
        };
    }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

ref 的返回值是一个对象 注意使用.value属性

<template>
   {
   {
    Number }}- {
   {
    String }}
</template>
import {
    ref } from 'vue';
export default {
   
    setup () {
   
        const Number = ref(0);
        const String 
1
2
3
4
5
6
7
8
9
10
11
12
13
14