1.拉开序幕的setup()

Vue3.0中一个新的配置项，值为一个函数。
setup是所有Composition API (组合API)“表演的舞台
组件中所用到的:数据、方法等等，均要配置在setup中。

setup函数的两种返回值:

若返回一个对象，则对象中的属性、方法在模板中均可以直接使用。 (重点关注!)
若返回一个渲染函数: 则可以自定义渲染内容。 (了解)

setup函数注意点?

尽量不要与 Vue2.0 配置混用。
Vue2.0 配置(data、methods、computed...) 中可以访问到setup中的属性、方法。
但在 Vue3.0 setup 中不能访问到 Vue2.x配置(data、methos、computed..)。
如果有重名 setup() 优先。
setup() 不能是一个async函数，因为返回值不再是return的对象而是promise,模板看不到retumn对象中的属性。

<template><!--  Vue3组件模板可以没有根标签 --><h1>一个人的信息</h1><h2>姓名{{ name }}</h2><h2>年龄{{ age }}</h2><h2>性别{{ sex }}</h2><button @click="sayHandle">CompositionApi配置说话</button><button @click="sayWelcom">OptionApi配置说话</button>
</template><script>
import { h } from 'vue'
export default {name: "App",// vue3 中是兼容vue2 的语法 data() {return {sex: "男"}}, methods:  {sayWelcom() {alert("OptionApi配置说话, 欢迎来到小马课堂")}},setup() {// 数据(不考虑响应式)let name = "zs"let age = "18"// 方法function sayHandle(){alert(`我叫${ name }, 今年${age}岁了, 你好啊! CompositionApi配置说话`)}// 若返回一个对象，则对象中的属性、方法在模板中均可以直接使用。 (重点关注!)return { name,age, sayHandle}/*** 若返回一个渲染函数: 则可以自定义渲染内容。 (了解)* * 将template 渲染模板的数据替换;  h(渲染标签, 标签中的内容) * 第一个return将函数交出去, 第二个return将h函数调用的返回值交出去渲染* return () => { return h('h1', '小马') } | return () => h("h1", '小马')* */},
};
</script>

setup的两个注意点

setup执行的时机
- 在beforeCreate之前执行一次，this是undefined。
setup的参数
- props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
- context：上下文对象
  - attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
  - slots: 收到的插槽内容, 相当于 this.$slots。
  - emit: 分发自定义事件的函数, 相当于 this.$emit。

App.vue

<template><Demo @hello="showHelloMsg" msg="你好啊" school="zt教育"><!-- 具名插槽 --><template v-slot:qwe><span> zt教育 </span></template></Demo>
</template><script>
import Demo from "./components/Demo.vue";
export default {name: "App",components: { Demo },setup() {// 自定义 hello 事件 function showHelloMsg(val) {alert(`你好啊, 你触发了heool事件, 我收到的参数是" ${val} !`);}return { showHelloMsg };},
};
</script>

components/Demo.vue

<template><h1>一个人的信息</h1><h2>姓名: {{ person.name }}</h2><h2>年龄: {{ person.age }}</h2><button @click="clikcHelloMsg">测试触发一下App组件的Hello 事件 </button><slot name="qwe"></slot>
</template><script>
import { reactive } from "vue";
export default {name: "Demo",props: ['msg', 'school'],emits:['hello'],beforeCreate() {console.log("---beforeCreate---");},setup(props, context) {// 在beforeCreate之前执行一次，this是undefined。---setup--- undefinedconsole.log("---setup---", this);/*** props: 接收传递的参数, 是一个响应式的 Proxy 响应式对象 * context: 上下文对象; 本质上就是一个 object 类型的对象： *   1.attrs: 相当于 vue2 中的 vm 实例上的 $attr 属性、*   2.slots: 插槽*   3.emit:  触发自定义事件 */let person = reactive({name: "zs",age: "20",});// 触发自定义事件function clikcHelloMsg() {context.emit('hello', 'ly')}return {person,clikcHelloMsg};},
};
</script>

Day 03-常用 Composition API_拉开序幕的setup()相关推荐

挖矿为什么要用显卡_Eth2拉开序幕，为何显卡大户却在加码挖矿？
以太坊转PoS和4G显卡停挖这两个因素,让"以太坊还能挖多久"这个疑虑几乎贯穿着显卡矿工的整个2020年.以太坊挖矿的前景也似乎总是随着"2.0"传来的最新消息 ...
和华为杯_2019全国大学生物联网设计竞赛（华为杯）拉开序幕
由教育部高等学校计算机类专业教学指导委员会主办,四川大学承办,华为协办,上海交通大学和机械工业出版社华章公司联合支持的2019年全国大学生物联网设计竞赛(华为杯)全国巡回技术讲座暨宣传活动5月9日在郑 ...
国内半导体企业进军市场拉开序幕
时间8月7日,据韩国<朝鲜日报>报道,美国硅谷将首次公开由中国国营半导体企业清华紫光推出自主研发的内存芯片.这一报道预示着,国内半导体企业进军市场拉开序幕. 据报道,清华紫光的子公司长江存 ...
原生JS实现拖动拉开序幕特效
给大家分享一个用原生JS实现的拖动拉开序幕特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en" ...
芯片商洗牌战拉开序幕指纹识别技术独霸市场
指纹辨识芯片已经成为半导体产业明星级产品,但实际上,其技术难度并不高,真正的门槛在专利.资金,以及与供应商之间的关系. 芯片商洗牌战拉开序幕指纹识别技术独霸市场大陆品牌手机已跃升为苹果(Apple) ...
术妍同学会川渝站拉开序幕
术妍同学会川渝站拉开序幕为实现术妍术家班与学员共同发展,资源共享,教学后期保障跟进,术妍术家班以"Hey,好久不见"为主题,在四川成都组织了第二次术妍术家班同学会.通过团队拓展与 ...
【剑拔峨眉团队裂变】蜜教育高端特训隆重拉开序幕
2018年4月16日,蜜拓蜜教育·剑拔峨眉团队裂变高端特训会在四川峨眉山红珠山宾馆隆重拉开序幕,现场气氛高昂,场面震感. 早在4月15日这天,蜜教育的讲师们就早早的到达会场,将会议现场的大小事宜,落到 ...
龙白滔 | DC/EP vs Libra，全球数字货币竞争正式拉开序幕
编者按原文作者龙白滔,编辑陶庐.数字经济独立研究员.数字资产研究院学术与技术委员会常务副主任龙白滔博士在2万字中展示了高级别的数字货币讨论--从政治经济学的视角来考察数字货币问题:全球性利益失衡和矛 ...
刷脸支付来势汹汹的争夺战拉开序幕
继蚂蚁金服的"蜻蜓".微信支付的"青蛙"之后,又一个刷脸支付产品加入战场.近日,中国银联旗下收单机构银联商务发布了一款全新的刷脸付产品--蓝鲸,该产品支持银联刷 ...

Day 03-常用 Composition API_拉开序幕的setup()

1.拉开序幕的setup()

setup的两个注意点

Day 03-常用 Composition API_拉开序幕的setup()相关推荐

最新文章

热门文章