1.setup函数的作用:

 1.是组合式api的入口
 2.比beforeCreate 执行更早
 3.没有this组件实例

一开始创建vue3页面的时候是这样的

<template>

</template>
<script>
export default{
    setup(){
        return{ }
    }  
}
</script>

给容器传参在页面中显示
数据给模板使用,以前是data选项中即可,现在在setup中直接定然后返回,模板中即可使用

<template>
    {{ msg }}
</template>
<script>
export default{
    setup(){
        console.log('setup',this);
        const msg = ' vue3'
        return{ msg,}
    }
    
}
</script>

3.通过打印方式发现setup函数比beforeCreate 执行更早；setup中没有this组件实例

4.通过点击事件控制台显示内容

<template>
    <button @click="say">点击</button>
</template>
<script>
export default{
    setup(){
        const say = () =>{
            console.log('按钮点击的');
        }
        return{ say}
    }    
}
</script>

5.通过点击把页面元素改变一下 (注意的地方:这个地方控制台能显示修改成功,页面是没有变化的)

<template>
    {{ msg }}
    <button @click="say">点击</button>
</template>
<script>
export default{
    setup(){
        let msg = ' vue3'
        const say = () =>{
            console.log('按钮点击的');
            msg='点击完后的vue3'
            console.log(msg);
        }
        return{ msg,say}
    },
    
}
</script>