vue3函数setUp和reactive函数详细讲解

最新推荐文章于 2024-04-12 09:46:30 发布
最新推荐文章于 2024-04-12 09:46:30 发布
阅读量2k 收藏
点赞数
原文链接：https://www.cnblogs.com/IwishIcould/p/14869053.html
版权

1 setUp的执行时机
我们都知道，现在vue3是可以正常去使用methods的。
但是我们却不可以在setUp中去调用methods中的方法。
为什么了？？？
我们先了解一下下面这两个生命周期函数，分别是：
beforeCreate 表示data 中的数据还没有初始化，是不可以使用的
Created : data已经被初始化了，可以使用
setUp在beforeCreate 和 Created 这两个函数之间。
是不是就知道为啥setUp中不可以去调用methods中的方法了。
2.setUp中无法使用data中的数据和调用methods的方法

3.setUp函数的注意点
(1)由于我们不能够在setUp函数中使用data和methods.
所以vue为了避免我们的错误使用,直接将setUp函数中的this
修改成为了undefined

(2) setUp函数只能够数同步的，不能够是异步的哈。
就是说你不能够这样操作
async setup(){

},
这样会导致界面空白哈
4 Vue3中的reactive
在Vue2中响应式数据是通过de fineProperty来实现的.
而在Vue3中响应式数据是通过ES6的Proxy来实现的

reactive需要的注意点
reactive参数必须是对象(json/arr)
如果给reactive传递了其它对象
默认情况下修改对象，界面不会自动更新
如果想更新，可以通过重新赋值的方式
5 reactive传入字符串数据不跟新

  • {{str}}

6 reactive传入数组

  • {{arr}}

7 reactive传入其他对象的跟新方式

  • {{sate.time}}
ting2909
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
# vue3 ref 和 reactive 函数.doc
07-11
# vue3 ref 和 reactive 函数.doc
何时/使用 Vue3 render 函数的教程详解
10-15
主要介绍了何时/使用 Vue3 render 函数的教程详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue3 学习笔记 (四)——vue3 setup() 高级用法，赶紧收藏
2401_84097678的博客
04-04 649
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
VUE3之data/methods里面怎么调用setup的data（layui-vue切换卡片式列表）
★【World Of Moshow 郑锴】★
04-24 1万+
前言 首先，在vue的setup()函数的执行要比beforeCreate 和 Created生命周期函数都要早，那么你去调用data是比较难得。但是反过来就比较容易了。因为setup定义好了一些变量或者方法，在methods中就可以当成data一样调用了。 我们今天的任务是【layui-vue切换卡片式列表】，这里有几个关键点。 模板基于layui-vue-admin 任务要点分解： methods里面怎么调用setup的data（可以直接this.xxx调用，但是注意生命周期顺序） table怎么通过
vue3 setup函数
leveretz的博客
07-25 966
vue3 set函数
组合API、methods中定义的方法写在setup()、在setup中使用生命周期函数、Vue3加载Element-plus
weixin_49775218的博客
11-16 3350
在vue2中methods来定义一些当前组件内部方法在vue3中直接在setup方法中定义并return修改上面message值setup()中可以使用props和context（ctx）在vue2中，组件的方法中可以通过this获取到当前组件的示例，并执行data变量的修改，方法的调用，组件的通信等等，但是在vue3中，setup()在beforeCreate和created时机就已调用，无法使用和vue2一样的this（
vue3中setup用法与methods用法踩坑
m0_67393157的博客
03-02 3042
vue3 使用element-plus Dialog踩坑记录之methods用法与setup用法 Element Dialog最原始的调用 1.在methods()中踩的坑 2.在setup()中踩的坑 Element Dialog最原始的调用 复制过来的代码可以直接把dialog弹出来 <template> <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button&
vue3的setup的使用和原理解析
热门推荐
weixin_42974827的博客
09-24 2万+
在vue3中，新的setup函数属性给我们提供了书写的便利，其背后的工作量无疑是巨大的，有状态的组件的初始化的过程，在 setup 函数初始化部分我们讨论的源码的执行过程。
Vue3.0知识点
qq_38780194的博客
12-31 966
1.拉开序幕的setup 理解：Vue3.0新配置项，值为一个函数 setup是所有 Composition API(组合API) “表演的舞台” 组件中所用到的：数据，方法等等，均要配置在setup中 setup函数的两种返回值： 若返回一个对象，测对象中的属性，方法，在模板中均可以直接使用。（重点关注！） 若返回一个渲染函数：则可以自定义渲染内容 注意点： 尽量不要与vue2.x配置混用 Vue2.x配置（data, methods, computed…）中可以访问到se
教程10 Vue3的生命周期与方法（Typescript）+ Setup语法糖详解 + setup中的生命周期钩子（代码截图版）
boxuestudio的博客
04-02 9054
教程10 Vue3的生命周期与方法（Typescript）+ Setup语法糖详解 + setup中的生命周期钩子（代码截图版）
vue3自己的学习笔记
01-25
本文将详细介绍 Vue 3 中的新特性和变化，包括 Setup 函数、Reactive 数据、生命周期、计算属性、监听函数等等。 Setup 函数 在 Vue 3 中，Setup 函数是一个特殊的函数，它用于定义组件的初始状态和生命周期钩子...
vue3快速上手.md
01-06
- Vue3可以更好的支持TypeScript 4.新的特性 1. Composition API（组合API） - setup配置 - ref与reactive - watch与watchEffect - provide与inject 2. 新的内置组件 - Fragment - Teleport - Suspense 3. ...
vue3相关.docx
09-27
* setup 是 Vue3.x 新增的一个选项 * setup 参数 + props：值为对象，包含：组件外部传递过来，且组件内部声明接受了的属性 + context：上下文对象 - attrs：值为对象，包含组件外部传递过来，但没有在 props ...
vue3 + vite入门级资料 (基于vue2和前端基础)
12-13
这是一项基于vite框架和vue3的学习项目，主要使用了vue3的组合式API，也就是复合setup函数的写法。其中内容有vue3的生命周期，watch函数，以及vue3的响应式数据reactive和ref的用法。简而言之就是练手，练基本操作。
理解Vue3组合式API 通过 setup暴露数据和方法的使用场景
最新发布
克里斯蒂亚诺更新的博客
04-12 476
通过在 Vue 2 的组件选项中定义数据和方法，然后在模板中使用它们，并将它们通过 props 传递给子组件，你可以实现与 Vue 3 中类似的功能。在 Vue 2 中，你可以使用与 Vue 3 中相似的方式将数据和方法传递给子组件，尽管语法上稍有不同。，其中包含一个计数器和一个按钮，点击按钮可以增加计数器的值。这样，我们就实现了在父组件及其子组件中共享和使用通过。函数暴露数据和方法，并在当前组件及其子组件中使用。在 Vue 2 中，没有像 Vue 3 中的。Vue 2 中的组件和 Vue 3 中的。
【vue3】vue3在父组件中调用子组件中定义的methods
bbt953的博客
07-17 1223
vue3在父组件中调用子组件中定义的methods。
Vue3基础
weixin_38655844的博客
12-07 1136
1. setup函数## setup 函数是组件逻辑的地方，它在组件实例被创建时，初始化 props 之后调用 ** 2. ref ref 主要是用来包装原始类型的数据 setup(props) { const msg = ref('hello') const appendName = () => { msg.value = `hello ${props.name}` } return { msg, appendName
vue3同时使用setup函数和setup语法糖
08-23
对于Vue 3，我们可以同时使用`setup`函数和`setup`语法糖。在组件中，`setup`函数是一个特殊的函数，用于替代Vue 2中的选项式API（如created、mounted等）。它接收两个参数：props和context。 使用`setup`函数时，我们可以在其中访问到组件的props，并且可以返回响应式的数据、计算属性、方法等供模板使用。例如： ```javascript <script> import { ref, reactive } from 'vue'; export default { props: { message: String, }, setup(props) { const count = ref(0); // 响应式数据 const state = reactive({ name: 'John', age: 25, }); // 响应式对象 const increaseCount = () => { count.value++; }; // 响应式方法 return { count, state, increaseCount, }; }, }; </script> ``` 在模板中，我们可以直接使用`count`、`state`以及`increaseCount`： ```html <template> <div> <p>{{ message }}</p> <p>Count: {{ count }}</p> <p>Name: {{ state.name }}</p> <p>Age: {{ state.age }}</p> <button @click="increaseCount">Increase Count</button> </div> </template> ``` 除了使用`setup`函数外，Vue 3还引入了`<script setup>`语法糖，它可以更简洁地定义和使用响应式数据、计算属性、方法等。使用`<script setup>`时，我们无需再定义`props`选项，而是直接通过`defineProps`和`withDefaults`来声明和获取props。 下面是一个使用`<script setup>`的示例： ```html <template> <div> <p>{{ message }}</p> <p>Count: {{ count }}</p> <p>Name: {{ state.name }}</p> <p>Age: {{ state.age }}</p> <button @click="increaseCount">Increase Count</button> </div> </template> <script setup> import { ref, reactive } from 'vue'; const message = 'Hello Vue 3'; // 响应式数据 const count = ref(0); // 响应式数据 const state = reactive({ name: 'John', age: 25, }); // 响应式对象 const increaseCount = () => { count.value++; }; // 响应式方法 </script> ``` 可以看到，使用`<script setup>`可以使代码更简洁和易读。 综上所述，Vue 3中可以同时使用`setup`函数和`<script setup>`语法糖来定义组件的行为，并且它们可以混用，根据个人喜好和项目需求选择使用方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值