vue3学习笔记 Composition API setup
一、Composition API优势
相对于vue2的option API Vue3的Composition API设计更有优势
Composition(组合式)Api 功能分组
Composition(组合式)Api 功能导入复用
组合式Api 所解决的问题
(1) 更好的代码组织结构
(2) 相同的代码逻辑可以进行复用
home.vue 3种方式递进升级
<template><div class="home"><div><p>{{ name }}</p><button @click="getName">姓名</button></div><div><p>{{ age }}</p><button @click="getAge">年龄</button></div></div><HomeB></HomeB>
</template><script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import HomeB from "./HomeB.vue";
// import { ref } from "vue";
import { useName, useAge } from "./user";export default {name: "Home",setup() {// 1.Composition(组合式)Api// const people = {// name: "yusir",// age: 18,// };// const name = ref("");// const getName = () => {// name.value = people.name;// };// const age = ref("");// const getAge = () => {// age.value = people.age;// };// return {// name,// getName,// age,// getAge,// };/* ------------------------ */// 2.Composition(组合式)Api 功能分组// const people = {// name: "yusir",// age: 18,// };// return {// ...useName(people), //展开运算符// ...useAge(people),// };// function useName(people) {// const name = ref("");// const getName = () => {// name.value = people.name;// };// return {// name,// getName,// };// }// function useAge(people) {// const age = ref("");// const getAge = () => {// age.value = people.age;// };// return {// age,// getAge,// };// }/* ------------------------ */// 3.Composition(组合式)Api 功能导入复用// 组合式Api 所解决的问题// (1) 更好的代码组织结构// (2) 相同的代码逻辑可以进行复用const people = {name: "yusir",age: 18,};return {...useName(people), //展开运算符...useAge(people),};},components: {HelloWorld,HomeB,},
};</script>
HomeB.vue
<template><div class="home"><div><p>{{ name }}</p><button @click="getName">姓名</button></div><div><p>{{ age }}</p><button @click="getAge">年龄</button></div></div>
</template>
<script>
import { useName, useAge } from "./user";export default {name: "HomeB",setup() {const people = {name: "yusirxiaer",age: 19,};return {...useName(people), //展开运算符...useAge(people),};},
};
</script>
<style lang='less' scoped></style>
user.js
import {ref
} from 'vue'
export function useName(people) {const name = ref("");const getName = () => {name.value = people.name;};return {name,getName,};
}
export function useAge(people) {const age = ref("");const getAge = () => {age.value = people.age;};return {age,getAge,};
}
二、setup 入口函数
1.组件创建之前被调用
setup 先于created执行,this指向windows
created()里打印的this 是proxy对象 指向组件实例
setup函数参数
Props Context (看HomeB子组件)
Context JavaScript对象
- context.attrs: Attribute属性(非响应式对象)非props数据
- context.slots: 插槽(非响应式对象)
- context.emit: 触发事件的方法 === this.$emit
2.this不会只指向当前组件实例
3.返回值
返回一个对象,对象的属性可以直接在模板中进行使用(就像Vue2使用data和methods一样)
看代码例子
Home.vue
<template><HomeB :title="title" desc="父组件传递过来的普通属性" @update="update"><h1>普通的匿名插槽</h1><h2>{{ title }}</h2></HomeB>
</template><script>
// @ is an alias to /src
import HomeB from "./HomeB.vue";export default {name: "Home",setup() {},data() {return {title: "父组件的title",};},created() {console.log("created()打印this");console.log(this);},methods: {update(newTitle) {this.title = newTitle;},},components: {HomeB,},
};</script>
HomeB.vue
<template><div class="homeB"></div>
</template>
<script>
export default {name: "HomeB",props: {title: {type: String,required: true,},},setup(props, { attrs, slots, emit }) {console.log("props:", props);console.log("Attribute (非响应式的对象):", attrs);console.log("插槽:", slots.default());emit("update", "子组件更新数据的事件");},
};
</script>
<style lang='less' scoped></style>
vue3学习笔记 Composition API setup相关推荐
- 简明扼要聊聊 Vue3.0 的 Composition API 是啥东东!
对于没太了解 Vue3.0 的同学,在看到 Composition API 时,除了看起来会有一个"高大上"的感觉,可能更多的是有点懵逼,心中不免泛起一堆疑惑,这到底是何方神圣?干 ...
- vue3学习笔记(ref, reactive, setup, hook...)
目录 一.搭建项目 二.常用的Composition API 1.ref函数(实现响应式) 2.reactive函数 3.vue2和vue3响应式的区别 4. setup参数 5.计算属性和监视 6. ...
- 转载于掘金的vue3学习笔记
声明:转载于掘金的文章,原文地址:https://juejin.cn/post/7005140118960865317/,本文只是自用. 一.简介 2020年9月18日,Vue.js发布3.0版本,代 ...
- 【Vue】菜头学前端 - vue3学习笔记
目录 简介 一.创建项目 1.使用vue-clli创建 2.使用Vite创建 二.Composition API(组合式API) 1.setup函数 2.ref函数和reactive函数 1.ref函 ...
- Vue3 学习笔记 —— 父子组件传值、插槽、提供/注入、兄弟组件传值、mitt
目录 1. 父子组件传值 1.1 父组件给子组件传值 -- v-bind 1.2 子组件接收父组件的传值 -- defineProps 1.3 设置子组件接受参数的默认值 -- withDefault ...
- Vue3学习笔记01:使用NPM方法安装Vue3
文章目录 一.使用淘宝NPM镜像 (一)为何使用淘宝镜像 (二)安装淘宝NPM镜像 (三)查看淘宝NPM镜像版本 二.使用CNPM安装Vue最新稳定版 (一)安装Vue最新稳定版 (二)查看Vue命令 ...
- Vue3学习笔记:了解并使用Pinia状态管理
Vue3是一个流行的JavaScript框架,它允许您构建交互式的Web应用程序.Vue3中使用的状态管理工具是Vuex,但是有一种新的状态管理工具叫做Pinia,它提供了更简单.更轻量级的状态管理方 ...
- Vue3 学习笔记 —— 破坏式更新、自定义指令 directive
目录 1. 什么叫破坏式更新? 2. Vue3 中的自定义指令 2.1 自定义指令的生命周期 2.1.1 Vue2 Vs Vue3 的自定义指令生命周期 2.1.2 自定义指令的生命周期中,接收的参数 ...
- Vue3学习笔记- NPM包管理工具
导语 这篇分享是关于Vue3 系列的学习知识的整理的开始,能够对大家学习带来帮助.也是对自己能力的一种提升. 学习大纲 认识NPM 安装NPM 使用NPM NPM中级用法 了解package.js ...
最新文章
- LiveVideoStackCon 2022 上海站 专题抢先看(3)
- 遍历一个ul设置各个li不同的样式
- css实现文字过长省略显示
- 4- Mybatis 的参数深入
- 我的开源项目:AAC格式分析器
- python3编码(encode,decode)
- 技术的好文章和烂文章
- centos转换linux格式,CentOS 下转换网易云音乐ncm格式为mp3
- java8新特性和汪文君Google Guava实战
- CTFhub—弱密码(web)
- 理解分布函数(概率论)
- 国内的云主机靠谱吗?万网如何?互联网创业产品选择云主机还是租用独享服务器合适?
- 未检测到正确安装的网络适配器_网络适配器图标出现黄色感叹号的解决办法
- 【Linux云计算架构:第二阶段-Linux必会的20多种服务】第22章——-源码编译安装LAMP
- App Extension
- 征文评优中|小鱼再进化!OceanBase 4.1免费体验
- AD 22 如何从SchDoc文件生成PcbDoc文件,进行布局和走线?
- Windows资源管理器占用CPU过高
- c语言区间内质数和合数各自输出
- 三创赛历年优秀作品资料整理