Vue3 – 拉开序幕的setup
1.拉开序幕的setup
- 理解:Vue3.0中一个新的配置项,值为一个函数。
- setup是所有Composition API(组合API)“ 表演的舞台 ”。
- 组件中所用到的:数据、方法等等,均要配置在setup中。
- setup函数的两种返回值:
- 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。(重点关注!)
- 若返回一个渲染函数:则可以自定义渲染内容。(了解)
- 注意点:
- 尽量不要与Vue2.x配置混用
- Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法。
- 但在setup中不能访问到Vue2.x配置(data、methos、computed...)。
- 如果有重名, setup优先。
- setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)
- 尽量不要与Vue2.x配置混用
示例
<template>
<h1>姓名:{{ name }}</h1>
<h1>年龄:{{ age }}</h1>
<h1>性别:{{ sex }}</h1>
<button @click="sayWelcome">vue2的sayWelcome</button>
<button @click="sayHello">vue3的sayHello</button>
<button @click="getVue2">获取vue2的配置项</button>
<button @click="getVue3">获取vue3的配置项</button>
</template>
<script>
export default {
name: "App",
data() {
return { sex: "男" };
},
methods: {
sayWelcome() {
alert("hello vue2");
},
getVue3() {
console.log("vue2中获取vue3的配置");
console.log(this.name);
console.log(this.age);
console.log(this.sex);
console.log(this.sayHello);
},
},
setup() {
// 数据
let name = "云淡风轻";
let age = "18";
// 方法
function sayHello() {
alert("hello vue3");
}
function getVue2() {
console.log("vue3中获取vue2的配置");
console.log(name);
console.log(age);
console.log(this.sex);
console.log(this.sayWelcome);
}
// 返回对象
return {
name,
age,
getVue2,
sayHello,
};
},
};
</script>
<style></style>
版权声明:
作者:Ne-21
链接:https://blog.gocos.cn/archives/167.html
来源:云淡风轻
文章版权归作者所有,未经允许请勿转载。
THE END
0
二维码
海报
Vue3 – 拉开序幕的setup
1.拉开序幕的setup
理解:Vue3.0中一个新的配置项,值为一个函数。
setup是所有Composition API(组合API)“ 表演的舞台 ”。
组件中所用到的:数据、方法等等……

共有 0 条评论