vue3 01-setup函数

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>