setup
setup
是vue3中的一个新的配置项,值为一个函数,我们在组件中用到的数据、方法等等,都要配置在setup中。
setup函数的返回值有两种
1、返回一个渲染函数,可以自定义渲染内容
2、返回一个对象,对象中的属性和方法在模板中可以直接使用
(1)在vue2的配置中可读取到vue3配置中的属性和方法
(2)在vue3的配置中不能读取vue2配置中的属性和方法
(3)如果vue2和vue3的配置有冲突,则vue3的setup优先
注意点:
(1)vue2和vue3的配置尽量不要混用
(2)setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)
App.vue
<template> <h1>一个人的信息</h1> <h2>姓名:{{name}}</h2> <h2>年龄:{{age}}</h2> <h2>性别:{{sex}}</h2> <h2>a的值是:{{a}}</h2> <button @click="sayHello">说话(Vue3所配置的——sayHello)</button> <br> <br> <button @click="sayWelcome">说话(Vue2所配置的——sayWelcome)</button> <br> <br> <button @click="test1">测试一下在Vue2的配置中去读取Vue3中的数据、方法</button> <br> <br> <button @click="test2">测试一下在Vue3的setup配置中去读取Vue2中的数据、方法</button> </template> <script> // import {h} from 'vue' export default { name: 'App', data() { return { sex:'男', a:100 } }, methods: { sayWelcome(){ alert('欢迎来到尚硅谷学习') }, test1(){ console.log(this.sex) console.log(this.name) console.log(this.age) console.log(this.sayHello) } }, //此处只是测试一下setup,暂时不考虑响应式的问题。 async setup(){ //数据 let name = '张三' let age = 18 let a = 200 //方法 function sayHello(){ alert(`我叫${name},我${age}岁了,你好啊!`) } function test2(){ console.log(name) console.log(age) console.log(sayHello) // sex是在vue2方式配置的 访问不到 console.log(this.sex) console.log(this.sayWelcome) } //返回一个对象(常用) return { name, age, sayHello, test2, a } //返回一个函数(渲染函数) // return ()=> h('h1','尚硅谷') } } </script>
main.js
//引入的不再是Vue构造函数了,引入的是一个名为createApp的工厂函数 import { createApp } from 'vue' import App from './App.vue' //创建应用实例对象——app(类似于之前Vue2中的vm,但app比vm更“轻”) const app = createApp(App) //挂载 app.mount('#app')
标签:console,log,setup,配置,vue3,Vue3,name From: https://www.cnblogs.com/anjingdian/p/17007322.html