setup()

基本使用

<template>
    <el-button type="primary" @click="handle">{{ count }}</el-button>
    <el-button type="primary" @click="handle1">统计</el-button>
</template>

<script>
export default {
    setup() {
        // 定义变量  const不能改 let 跟var一样
        let count = 1;
        // 定义函数
        const handle = () => {
            // 数据变了，页面没变
            count++
        }
        const handle1 = () => {
            console.log(count);
        }
        // 要在模版中使用必须，return出去
        return {
            count, handle, handle1
        }
    }
}
</script>

响应式

<template>
    <span> {{person.age}}</span>
    <el-button type="primary" @click="handle">{{ count }}</el-button>
</template>

<script>
import { reactive, ref } from 'vue';

export default {
    setup() {
        // 动态数据
        let count = ref(0)
        let person =reactive({
            name:'szw',
            age:12
        })
        // 定义函数
        const handle = () => {
            // 数据变了，页面也变
            count.value++
            person.age++
        }
        // 要在模版中使用必须，return出去
        return {
            count, handle,person
        }
    }
}
</script>