setup

简单用法

setup函数式Composition API的入口，在这里里面定义的变量，方法都需要return出去

把vue2中的data和methods配置函数混在啦一起

<script>
import { defineComponent } from 'vue';
export default defineComponent({name: 'App',setup (){let name = '路飞'//方法function say(){console.log(`我叫${name},是要成为海贼王的男人！`)}//返回一个对象return {name,say}}})
</script>

setup细节问题

执行时机

  1. setup是在beforeCreate生命周期回调之前就执行，而且就执行了一次
  2. setup在执行的时候，当前的组件没有被创建出来，组件实例对象this不能用
  3. this是undefined，说明不能通过this调用data、computed、methods、props相关信息
  4. 其实所有的composition API相关回调函数都不可以

返回值

  1. 返回一个对象，为页面提供数据，在模板中可以直接使用此对象的方法和属性
  2. 返回对象中的属性和data函数中返回的对象属性合并
  3. 返回对象中的方法和methods方法合并
  4. 如果有重名setup优先
  5. 一般不要混合使用data和setup以及methods和setup
  6. 不能是一个async函数，因为返回值不在是一个对象而是一个promise

setup参数

  • props 接收父组件向子组件传递的数据
  • context
    • attrs对象(获取组件标签上所有属性对象，即使props上没有生命定义接收的属性，他也能获取到该标签上的属性)
    • emit方法（分发事件）可以通过emit实现子传父，第一个参数是属性名字，第二个参数是传的值(相当于v2的this.$emit)
    • slots对象（插槽）

ref与reactive

ref

在setup中定义的变量不是响应式的，此时需要用ref将它变成响应式的

ref函数会把变量变成对象，在修改的时候要.value去修改，页面上，vue3检测到时ref对象就自动给.value啦

<script lang="ts">
import { defineComponent,ref } from 'vue';
export default defineComponent({name: 'App',setup(){const age=ref(10)function setUser(){age.value++}return{age,setUser}}
});
</script>

reactive

  • 比ref更好用，不用通过.value就可以改变数据
  • 接收一个普通对象，返回一个proxy代理对象

<script lang="ts">
import { defineComponent,ref ,reactive} from 'vue';
// import HelloWorld from './components/HelloWorld.vue';export default defineComponent({name: 'App',// components: {//   HelloWorld// }setup(){const user=reactive({name:'路飞',age:12})function setUser(){user.age++}return{user,setUser}}
});
</script><style>

vue2和vue3响应式原理不同

vue2原理使用Object.defineProperty中的get和set进行数据劫持，他这样会存在一定的缺陷，当新增和删除的时候捕获不到，导致页面也不会更新

vue3中使用proxy(代理)连接对象对象中任意值的变换深度监听响应式的，再通过Reflect(反射)对源对象的属性进行操作

computed 和 watch （计算属性和监听属性）

在setup中使用需要在vue中引入 import {...,computed,watch} from vue

computed

computed 必须有一个返回值

第一种写法，如果只传入一个回调函数，表示get

 setup(){const fullName1=computed(()=>{return user.firstName+'_'+user.lastName})}

第二种写法，get 和 set

setup(){const fullName2=computed({get() {return `${ user.firstName }_${ user.lastName }`},set(val:string) {user.firstName = val.split('_')[0]user.lastName = val.split('_')[1]},})}

watch

监听单个

watch(user,()=>{console.log('user发生变换');
},{deep:true,immediate:false})

监听多个

watch([user,age],()=>{console.log('user或age发什么变换');
})

监视对象中的属性

watch(()=>user.firstName,()=>{console.log(`firstName改变了`)
})

watchEffect

他是来跟watch抢饭碗的，是vue3新特性，默认开启immediate，用到了谁就监视谁

watchEffect(()=>{const firstName=user.firstNameconsole.log('												


											

composition组合式API相关推荐
	

    
								
  1. Vue3笔记_02setup与常用的Composition API(组合式API)
		
    目录 setup setup的执行时机 [1]定义数据和方法 vue2中定义数据和方法 vue3中定义数据和方法 语法 示例-返回值为一个对象 示例-返回值为一个渲染函数 注意点 数据-响应式数据 r ...
    
		
    2. 
						
  2. 关于Vue3组合式API(Composition API)的个人理解
		
    首先,关于组合式API现已有众多大佬发布了相关介绍及相关教程,但是个人在学习过程中还是花了比较多的时间去理解 " 组合式API " 这个概念. 因为目前搜索引擎排的比较前面的文章其 ...
    
		
    3. 
						
  3. Vue3.0 组合式 API 分析与实践
		
    本文带大家深入理解组合式 API 的设计详情,同时加入我们的实践经验总结. 01 背景 Vue3.x 版本的出现带来了许多令人眼前一亮的新特性,其中组合式 API(Composition API),一 ...
    
		
    4. 
						
  4. vue3组合式api
		
    文章目录 组合式API介绍 什么是组合式 API? 为什么要有组合式 API? 更好的逻辑复用 更灵活的代码组织 Option Api Option Api的缺陷 Composition Api 更好 ...
    
		
    5. 
						
  5. vue3组合式api基础（常用）
		
    vue3组合式api基础(常用) 前言:vue3中尽量不要使用'this',最好使用组合式api(Composition API),如果使用uni-app的,vue3只支持ios>=10(201 ...
    
		
    6. 
						
  6. 组合式Api 及相关操作用法
		
    1.概念 组合式 API (Composition API) 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件. 2.用法 (1)使用组合式API的语法糖 setup ...
    
		
    7. 
						
  7. Vue3 中使用组合式API替换mixins，实现代码复用并解决隐患
		
    我们在vue mixin混入–基础中聊过mixins可以使我们的代码进行复用,非常的灵活方便. 但是在vue3中却不推荐使用了,因为它存在一些问题. mixins问题 不清晰的数据来源:当使用了多个  ...
    
		
    8. 
						
  8. Vue3 组合式API初体验
		
    目录 一.背景 二.什么是组合式API(Composition API ) 组合式API全景 为什么要引入组合式API `mixins` 的方式 域插槽的方式 组合式API的方式 结论 组合式API存 ...
    
		
    9. 
						
  9. vuejs中组件的两种不同的编写风格-选项式API及组合式API
		
    前言 随着vue3的逐渐稳定,以及周边生态的完善,现在vue3已经成为默认的使用方式了的 所以,对于一个前端开发者,Vue2与Vue3都得要会,在vue3中新增很多东西,比如:Fragment,Tel ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. for语句内嵌例题与个人理解
		
    2. 
						
  2. html5 文字定义线宽,html 5画布线宽
		
    3. 
						
  3. 子查询引用外表_轻松搞定慢查询？这一文就够了（内附大量实例助你看懂Explain）...
		
    4. 
						
  4. 《数学之美》第28章  逻辑回归和搜索广告
		
    5. 
						
  5. 类和对象—继承—同名成员处理
		
    6. 
						
  6. .net程序中资源文件的保护办法探讨
		
    7. 
						
  7. 程序直接控制I/O方式
		
    8. 
						
  8. Linux 下mysql5.7安装搬运 该安装说明坑最少
		
    9. 
						
  9. 小腿训练三部曲（二）
		
    10. 
						
  10. 毕设日志——Faster RCNN
		
    11. 
						
  11. PHP童鞋改JAVA代码怎么处理
		
    12. 
						
  12. thing JS笔记
		
    13. 
						
  13. Scanner的引用、流程控制语句
		
    14. 
						
  14. Aid Learning -－除了爱奇艺也可以是生产力！！！
		
    15. 
						
  15. 数理统计(matlab实现)
		
    16. 
						
  16. Java循环控制语句
		
    17. 
						
  17. java util包排序_实现java.util.Comparator接口，对对象集合进行多属性组合排序
		
    18. 
						
  18. 初学算法——第二天：斐波那契数列
		
    19. 
						
  19. 红猫linux系统下载教程,RedCat_NSS_红猫linux软路由安装使用手册
		
    20. 
						
  20. java代码视频数据和音频数据的采集
		
    21. 
		

	


热门文章
	

    
									
  1. 实现MSN,QQ消息提示效果[ASP.Net]
			
    2. 
						
  2. RK3288 Android5.1 RTL8723DS WIFI/BT模块移植 以及AP6XXX模块与RTL8723DS模块做兼容
			
    3. 
						
  3. 软件项目常见风险及其预防措施
			
    4. 
						
  4. ENVI5.3 SP1复制文件和许可后，仍显示没有许可
			
    5. 
						
  5. react+typescript+高德地图
			
    6. 
						
  6. vc 界面编程常用方法 listctrl toolbar
			
    7. 
						
  7. 遮挡检测--基于高程的方法
			
    8. 
						
  8. SpringBoot修改上传文件（图片等）的默认大小（1048576 bytes）的解决方案！
			
    9. 
						
  9. pv=nrt_理想气体方程 pV=nRT 如何推导？
			
    10. 
						
  10. Lattice FPGA 开发工具Diamond使用流程总结——IP核使用、原语调用
			
    11.