前端必学Vue3 组合式 API 的基础 —— setup

最新推荐文章于 2024-09-14 12:05:47 发布
最新推荐文章于 2024-09-14 12:05:47 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： VUE3 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/python2021_7/article/details/123536684
版权
本文详细介绍了Vue3中的核心特性——组合式API，重点讨论了`setup`函数的作用、响应式系统中的`ref`和`reactive`、监听机制`watch`与`watchEffect`，以及如何在`setup`中使用Vuex。同时，文章涵盖了组件生命周期的变化和全局配置等内容，为前端开发者深入理解Vue3提供了实用指南。
摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

Vue3 组合式 API 的基础 —— setup

一、setup 是什么

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

  • 为了开始使用组合式 API，我们首先需要一个可以实际使用它的地方。在 Vue 组件中，我们将此位置称为 setup。
  • 它是一个组件选项。

二、组合api特点

  • 更加直观，接近原生js
  • 按需加载
  • 没有this，降低了耦合性，提高复用性

三、setup（）

  • 相当于created生命周期
  • 需要 return 返回，在模板中使用

四、ref值类型 响应对象

  • const count = ref(5)，在setup访问count值，count.value 来访问
  • 可以作为dom引用，const inp = ref(null)，

    ，inp.value.innerText

五、reactive引用类型 响应式

  • const list = reactive(默认值)
  • 错误： list = xxx 直接赋值破坏了引用
  • 正确： list.push(xxx)

六、watch监听

watch("count",(nval,oval)=>{
   
   //执行回调函数
})

七、watchEffect监听效果

  1. 只有引用的数据变化都会执行回调函数

最低0.47元/天 解锁文章
清雨扰落瓣
关注
专栏目录
前端之vue3的setup和setup的2个的形参、响应式页面
JEECG官方博客
05-30 358
async 修饰的函数返回值被Promise包裹住async 与 await 配合数据可以用data对象data对象内有n个对象。
一文了解setup的含义以及使用方法？
jia嘉ioo的博客
04-18 2566
vue3中的setup的使用
Vue3.0组合式API：setup()函数
最新发布
pan_junbiao的博客
09-14 1322
setup() 函数是一个新的组件选项，它是组件内部使用组合式 API 的入口。setup() 函数在组件实例创建之前，初始化 Prop 之后调用，而且setup() 函数是在 beforeCreate 钩子函数之前调用。setup() 函数可以返回一个对象或函数，对象的属性会合并到组件模板渲染的上下文中。setup() 函数可以接收两个可选的参数。第一个参数是响应式的 props 对象，第二个参数是一个上下文（context）对象。
VUE3-初识setup（2）
述安的博客
02-25 543
<template> <h1>一个人的信息</h1> <h2>姓名：{{ name }}</h2> <h2>年龄：{{ age }}</h2> <h2>性别：{{ sex }}</h2> <button @click="sayHello">说话(Vue3所配置的——sayHello)</button> <br> <br>
Vue 3的组合式API中，setup()函数的两个参数：props和context。
lrbfly的博客
05-15 1036
参数来获取组件的属性、非响应式属性、插槽和触发事件的方法。函数中访问组件实例、父组件属性、全局属性等。此代码有该AI 助手为您带来的，v信小程序：欢迎评论留言交流学习。对象来使用这些属性。这个参数在Vue 2中是通过。函数在组件初始化期间只会执行一次，并且在。对象提供了一些有用的属性和方法，用于在。对象包含了组件接收的属性。在上面的示例中，我们使用了。函数中通过解构或直接访问。下面是一个示例，展示了。语句返回一个响应式对象。，使其在组件中可用。
【Vue3】vue3中组合式Api的setup写法快速入门上手起步
余浩的博客
08-15 3214
使用setup语法糖和setup函数对比，使用语法糖的代码整洁了好多，不会有那么多的对象嵌套。也不用做什么额外的return，代码也简化了不少。
Vue3-组合式API学习之setup
我是我
09-21 1万+
学习来源 1.简介 setup函数是一个新的组件选项。作为在组件内使用Composition API的入口点。 2.调用时机 创建组件实例，然后初始化props，紧接着就调用setup函数，从生命周期钩子的视角来看，它会在beforeCreate钩子之前被调用。 3.模板中使用 如果setup返回一个对象，则对象的属性将会被合并到组件模板的渲染上下文。 <template> <button> {{count}}---{{object.foo}} </button
vue中的setup
子玉的博客
09-19 2443
函数是 Vue 3 Composition API 的一部分，它用于替代 Vue 2 中的。函数的一个重要特点是它可以在组件初始化之前执行，这使得组件的逻辑更加灵活和可控。是 Vue 3 中一个重要的选项，它用于配置组件的设置和逻辑。，然后将它们放入返回的对象中。在模板中，我们可以直接访问。函数也更容易测试和组织，特别适用于大型复杂组件。等选项，更好地组织和复用组件的逻辑。下面是一个简单的示例，展示了如何使用。函数中创建了一个响应式变量。
vue3 - 组件注册和组件通信（setup语法糖）
qq_43886365的博客
09-26 1万+
vue3中组件的注册和组件通信（setup语法糖）
Vue3之setup参数介绍
老电影故事的博客
04-27 4533
正如在一个标准组件中所期望的那样，setup函数中的props是响应式的，当传入新的prop时，它将被更新。，所以setup()内部的this的行为与其他选项中的this完全不同。用途：当父组件传递数据给子组件时，子组件不通过props接收，那么父组件传递的数据就到了setup中的context的attrs属性。context是一个普通的JavaScript对象，也就是说，它不是响应式的，这意味着你可以安全地对context使用ES6解构。是响应式的，你不能使用ES6解构，因为它会消除prop的响应式。
Vue3的组合api(setup)
weixin_56305645的博客
03-30 2268
setup setup函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。 调用时机 创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用 注意事项： this在setup()中不可用 参数： 该函数接收 props 作为其第一个参数：watchEffect 或 watch 会观察和响应 props 的更新 然而不要解构props对象，那样会使其失去...
vue3 组合式风格setup笔记（定义变量、函数 data和method的setup写法）
mashirokayo的博客
09-29 3145
vue3 组合式风格 变量定义(对应data)、函数定义（对应method）
vue3 组合式API
热门推荐
小钟不想敲代码
10-13 2万+
vue3 组合式API(一)
[vue]setup组合式api的写法和分析
weixin_62697030的博客
12-17 747
在正常的组件式开发里面，vue的属性data，method，还有钩子函数这些东西都是分开的，大型开发的时候不太好处理，但是如果在setup里，把有关的函数变量写在一堆，就会显得更加容易区分1.组合式写在setup()函数里面2.如果想让外界访问什么东西，就要return返回一下(1)基本变量，对象，函数的写法但是这里有个问题就是，这里面写的对象和常量并不是响应式的（2）响应式对象的书写方法不过这样创建的话，产生的是一个具有value属性的对象，要具体访问数据的话，就要用。value函数进行访问。
Web前端最全Vue3-2-setup概述，字节跳动前端三面凉凉
2401_84617477的博客
05-08 943
我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。返回的是一个ref对象，对象中value属性，如果需要对数据操作，通过ref对象调用value属性方式进行操作。
2024年前端最新Vue3的setup还能这么用？(1)，面试官6个灵魂拷问
2401_84122782的博客
05-13 1009
toRefs会将我们一个响应式的对象转变为一个普通对象，然后将这个普通对象里的每一个属性变为一个响应式的数据五、setup中执行方法。
Vue3：使用setup实现组合式开发
Brave_heart4pzj的博客
03-06 467
Vue
vue3基础手册，内含setup函数以及setup语法糖代码示例（持续更新中...）
zz_prayer的博客
11-29 900
vue3中，可以使用语法糖的方式进行开发，也可以使用setup函数的方式进行开发。该文章仅记录常用API，后续会不断更新...
Vue3组合式 API 中的 setup() 钩子
06-10
Vue3中的组合式API是一个全新的API，它可以让开发者更加灵活地组织和重用Vue组件的逻辑代码。而其中的setup()钩子函数则是组合式API的入口函数，用于进行组件的初始化和配置。 具体来说，setup()钩子函数具有以下特点： - 在组件实例创建之前执行，类似于Vue2.x中的beforeCreate钩子函数。 - 接收两个参数：props和context。其中，props是组件的属性对象，context包含了组件实例的一些方法和属性，如attrs、emit等。 在setup()钩子函数中，开发者可以定义组件的数据、计算属性、方法等逻辑代码，并通过返回一个对象的方式将这些逻辑代码暴露给Vue组件的其他部分使用。这种方式比Vue2.x中的data、computed等属性更加灵活，可以更好地实现代码的组合和复用。 除此之外，setup()钩子函数还可以用于调用其他组件库的插件、进行数据的初始化、定义生命周期钩子函数等操作。总之，setup()钩子函数是Vue3中组合式API的核心入口函数，是Vue3中组件逻辑代码的组织和重用的重要手段。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值