vue3中的setup(测试setup，咱不考虑响应式的问题)

vue3中的export default中不需要分开data，methods等，统一写在setup中，并且取值时，不需要用this.name

<template>
    <h1>一个人的信息</h1>
    <h2>姓名:{{name}}</h2>    
    <h2>年龄:{{age}}</h2>
    <button @click="sayHello">说话</button>
</template>
​
<script>
//import {h} from 'vue'
export default{
name:'App',
    setup(){
        //数据
        let name='张三'
        let age = 18
        //方法
        function sayHello(){
            alert(`我叫${name},我${age}岁,`)
        }
        //返回的是一个对象(常用)
        return{
            name,
            age,
            sayHello
        }
        //如果return 的是如下一个函数（渲染函数），h为creatElement缩写，那么模板里面的所有内容将会被如下内容所替换
        //return ()=>h('h1','许江')
    }
}
</script>

vue3中也可以写vue2的内容,因为是向下兼容的,可以正常运行

<template>
    <h1>一个人的信息</h1>
    <h2>姓名:{{name}}</h2>    
    <h2>年龄:{{age}}</h2>
    <button @click="sayHello">说话</button>
    <button @click="sayWelcome">说话</button>
</template>
<script>
export default{
    name:'App',
    data(){
        return {
            sex：'男'
        }
    },
    methods:{
        sayWelcome(){
            alert('欢迎')
        }
    }
}
</script>