vue3 setup的小知识

最新推荐文章于 2024-08-13 16:04:45 发布

张拾壹i

最新推荐文章于 2024-08-13 16:04:45 发布

阅读量1.1k

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_59003402/article/details/123542101

版权

本文详细探讨了Vue3的setup函数及其相关的组合API，包括ref、reactive、watch、watchEffect、computed属性的使用。还讨论了生命周期、全局配置、自定义组合API以及setup语法糖的便利性，帮助开发者更好地理解和应用Vue3的新特性。

摘要由CSDN通过智能技术生成

组合api

通过创建vue组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。
setup()的执行时机相当于created,没有data 等

<script>
	export default {
   
		setup(){
   
		
			return {
   
			
			}
		}
	}
</script>

ref

接受一个内部值并返回一个响应式且可变的 ref 对象。
ref 对象仅有一个 .value ，指向该内部值。
使用需要引入ref

<script>
	import {
   ref} from 'vue'
	export default {
   
		setup(){
   
			const count = ref(0)
			console.log(count.value)
			
			return {
   
				count
			}
		}
	}
</script>

reactive

返回对象的响应式副本
响应式转换是“深层”的——它影响所有嵌套 property。

<template>
    <p v-for="(item,index) in list" :key="index">{
   {
   item}}</p>
</template>

<script>
	// reactive 定义引用类型的数据
	import {
   reactive} from 'vue'
	export default {
   
		setup(){
   
			const list = reactive([
				'Vue', 'React', 'Angular'
			])
			return