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.通过点击事件控制台显示内容文章来源：https://www.toymoban.com/news/detail-677539.html
<template>
<button @click="say">点击</button>
</template>
<script>
export default{
setup(){
const say = () =>{
console.log('按钮点击的');
}
return{ say}
}
}
</script>
5.通过点击把页面元素改变一下 (注意的地方:这个地方控制台能显示修改成功,页面是没有变化的)文章来源地址https://www.toymoban.com/news/detail-677539.html
<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>
到了这里，关于vue3 01-setup函数的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
