介绍

Vue3 推荐使用组合式api，但是 Vue3 setup() 可以与Vue2的 data()、methods() 共存

• setup() 比 data()、methods() 先执行

• data() 可以访问 setup() 中的数据

• data() 中的数据 与 setup() 冲突时，以 setup() 为准

例子

<template>
    姓名：{{name}}<br>
    年龄：{{age}}<br>
    年龄myAge：{{myAge}}<br>
    性别：{{sex}}<br>
    身高：{{height}}<br>
</template>

<script lang="ts">
    export default{
        name:'Student',
        data(){
            return {
                name:'张三',
                myAge:this.age,// data中可以访问setup() 中的数据
                set:'女', // data()中的数据 与 setup()冲突时，以setup() 为准
            }

        },
        // setup() 比 data() 先执行
        setup(){

            return {
                age:20,
                sex:'男',
                height:1.82
            }
        }
    }
</script>

<style>
</style>

原文出处：/show_1GW1GishpzEV.html