setup，ref，reactive

初识setup

1.理解:Vue3.0中一个新的配置项，值为一个函数。

2.setup是所有Composition API(组合API)“表演的舞台”。

3.组件中所用到的:数据、方法等等，均要配置在setup中。

4.setup函数的两种返回值:

1.若返回一个对象，则对象中的属性、方法,在模板中均可以直接使用。(重点关注!)
2.若返回一个渲染函数:则可以自定义渲染内容。(了解)

**注意点 **
1.尽量不要与Vue2.x配置混用

1. Vue2.x配置(data、methos、computed...）中可以访问到setup中的属性、方法。2·但在setup中不能访问到Vue2.x配置(data、methos、computed...)。3·如果有重名, setup优先。

2.setup不能是一个async函数，因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性。

3.setup执行的时机：
在beforeCreate之前执行一次，this是undefined。

4.setup的参数

props:值为对象，包含:组件外部传递过来，且组件内部声明接收了的属性。

context:上下文对象
1.attrs:值为对象，包含:组件外部传递过来，但没有在props配置中声明的属性,相当于this.$attrs
2.slots:收到的插槽内容,相当于this.$slots
3.emit:分发自定义事件的函数,相当于this.$emit

ref函数

将变量加工成响应式！！ref加工完后会变成一个对象，定义响应式数据

在底层中，vue3中对象我们使用的是我们的proxy代理

对象的错误修改方式：

正确的：

reavtive函数给对象使用的！！

reactive处理不了基本类型，只能处理我们对象和数组

所以一般我们将所有得数据放在一个对象里

这样我们就ok了，reactive定义的响应式是深层次的！！！

setup，ref，reactive相关推荐

VUE的setup、ref、reactive和代理数据的使用详解
一. VUE的setup.ref.reactive和代理数据的使用 1.1 setup和ref 先来实现一个简单的点击按钮,数字增加的案例: 需求:页面打开后可以直接看到一个数据,点击按钮后,该数据可 ...
转：图解C#的值类型，引用类型，栈，堆，ref，out
C# 的类型系统可分为两种类型,一是值类型,一是引用类型,这个每个C#程序员都了解.还有托管堆,栈,ref,out等等概念也是每个C#程序员都会接触到的概念,也是C#程序员面试经常考到的知识,随便搜搜 ...
c# 方法参数(传值，传引用，ref，out，params，可选参数，命名参数)
一.方法参数的类型----值类型和引用类型当方法传递的参数是值类型时,变量的栈数据会完整地复制到目标参数中即实参和形参中的数据相同但存放在内存的不同位置.所以,在目标方法中对形参所做的更改不会对调用 ...
利用ref获取遍历出的元素或者组件，ref，：ref
获取v-for遍历的元素定义一个空数组,接收所有的LI 定义一个函数,往空数组push DOM 在循环的dom上,或者组件上使用:ref绑定这个函数 <template><div ...
vue-默认插槽-具名插槽-作用域插槽-ref，props，mixin混入，插件
插槽用法,ref,props,mixin混入,插件 ref props mini混入插件插槽默认插槽具名插槽作用域插槽 ref ref属性 1.被用来给元素或子组件注册引用信息(id的替代者 ...
【Vue3】李南江老师讲解--个人笔记（二）ref 和 reactive详解
[vue3笔记之 ref 和 reactive ] 实现响应式数据的方法可以使用 ref,reactive定义响应式数据,本质上就是将传入的数据包装成一个Proxy对象. 使用 reactive 必 ...
ref和reactive的区别
理解: 1.ref是定义简单类型和单一的对象 2.reactive 定义复杂的类型梳理文档: ref和reactive都是Vue.js 3.x版本中新增的响应式API,用于实现组件的数据响应式更新 ...
Mysql面试题，sql优化，存储引擎，数据结构，基础知识等
目录一.相关知识什么是MySQL?SQL是什么? SQL的生命周期? 什么是超键.候选键.主键.外键? 数据库有哪几个范式,谈谈理解? MySQL的binlog有有几种录入格式?分别有什么区别? ...
ref，reactive toRaw
ref() 在vue3.0引入了composition API , setup函数是其核心函数在setup函数中,可以使用ref函数,用于创建一个响应式数据,当数据发生改变时,Vue会自动更新UI ...

setup，ref，reactive

setup，ref，reactive相关推荐

最新文章

热门文章