composition api
setup函数是一个新的组件选项。作为在组件内使用composition api的入口点。
调用时机：
setup函数会在beforecreate钩子之前被调用
返回值
如果setup返回一个对象，则对象的属性可以在组件模板中被访问
参数
接收俩个参数
setup.vue
<template> <div> setup </div></template> <script> export default{ setup(){ console.log('setup.....') }, beforecreate() { console.log('beforecreate...') }, }</script> <style></style>
app.vue
<template> <comp-setup> </comp-setup></template> <script>/*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/import compsetup from './components/setupview'export default { name: 'app', components: { compsetup, }}</script> <style> </style>
接收参数：
setup.vue
<template> <div> {{ name }} <p>{{ user.username }}</p> </div></template> <script> export default{ //setup不能访问this //可以接收参数 setup(props,context){ // console.log('setup.....') //这种返回的数据不具有响应式 // let name='tom' // return { // name, // } return { name:'tom', user:{ username:'admin', password:'123' } } }, beforecreate() { // console.log('beforecreate...') }, props:{ msg:string } }</script> <style></style>
app.vue
<template> <comp-setup msg="welcome"> </comp-setup></template><script>/*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/import compsetup from './components/setupview'export default { name: 'app', components: { compsetup, }}</script><style></style>
【相关推荐：vue.js视频教程】
以上就是简析vue3的setup函数（入口点）的详细内容。