Vue3 数据响应式
在vue3中一般返回的数据是不响应的,如果需要响应式需要在定义时声明
方法1:reactive():
定义:reactive()是一个函数,可以用来定义复杂数据类型完成响应式
案例:
<div>{{userInfo.name}}</div>
//4,结果打印Cat
<button @click="userNameUpdate"><button>
<script lang='setup'>
//1,引用reactive
import {reactive} from 'vue'
//2,定义响应式对象
const userInfo = reactive({name:''
})
//3,点击改变响应式对象中name的值
const userNameUpdate = ()=>{userInfo.name = "Cat"
}
</script>
方法2:toRef():
定义:当我们在渲染数据时,不希望用到前缀时,可以使用组合toRef()
toRef()是函数,转换响应式对象中的某个属性为单独响应式数据,他们之间依然相互绑定
案例:
<div>{{name}}</div>
//先打印Vue2
<button @click='nameUpdata'>修改</button>
//点击后打印Vue3
<script lang='setup'>
//1,引用reactive,toRef
import {reactive,toRef} from 'vue'
//2,定义响应式对象
const userInfo = reactive({name:'Vue2'
})
//3,定义单独响应式变量
const name = toRef(userInfo,'name')
//4,点击修改name值
const nameUpdata = ()=>{name.value = 'Vue3'
}
</script>
方法3:toRefs():
定义:可以定义转换响应式对象中所有属性为响应式数据,通常用于结构reactive定义的对象,转换响应式对象中所有属性(也可以是一部分)为单独响应式数据,对象成为普通对象,且数据关联
案例:
<div>姓名:{{name}}</div>
<div>年龄:{{age}}</div>
<button @click = 'upData'>修改信息</button>
<script lang='setup'>
//1,引用reactive、toRefs
import {reactive,toRefs} from 'vue'
//2,定义响应式对象
const userInfo = reactive({name:'张三',age:'23'
})
//3,定义转换单独响应式数据
const {name,age} =toRefs(userInfo)
//4,修改数据事件
const upData = () =>{name.value = '李四'age.value = '24'
}
</script>
方法4:ref():
定义:ref()是一个函数,用来定义简单类型数据响应式
注意:
1)在修改值和获取值时需要用.value
2)在渲染数据时可以省略.value
案例:
<div>{{name}}</div>
<button @click="upData">修改</button>
<script lang='setup'>
//1,引用ref
import {ref} from 'vue'
//2,定义响应式变量
const name = ref('vue2')
//3,修改数据事件
const upData = ()=>{name.value = 'vue3'conslot.log(name.value)
}
</script>
ref也可以用于对象或数组
Vue3 数据响应式相关推荐
- vue是怎么实现数据响应式的?
数据响应式原理核心就是采用了 defineReactive,defineReactive里的Object.defineProperty对每个属性进行监听对数据进行拦截,把这些属性全部转成getter/ ...
- vue3.0 Beta发布,顺便来看看Vue3 的响应式和以前有什么区别
前言 vue 3.0 Beta 测试版发布 可以通过vue-cli-plugin-vue-next创建一个vue3.0的beta项目. 目前尚不支持IE11,后期可能会处理兼容版本. 对vue3源码有 ...
- 彻底理解Vue数据响应式原理
彻底理解Vue数据响应式原理 当创建了一个实例后,通过将数据传入实例的data属性中,会将数据进行劫持,实现响应式,也就是说当这些数据发生变化时,对应的视图也会发生改变. const data = { ...
- 深入Vue原理_数据响应式
欢迎各位小伙伴们! 为大家推荐一款刷题神奇哦 点击链接访问牛客网 各大互联网大厂面试真题.从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官 数据响应式 ...
- Vue数据响应式与双向数据绑定原理区分
很多小伙伴搞不清楚数据响应式与双向数据绑定这两个原理,还有人自然的认为它们两者是相同的,接下来我们来看看它们二者的区分吧! 数据响应式是Vue的核心特性之一,而双向数据绑定是通过指令或修饰符实现的一种 ...
- 详细介绍Vue的数据响应式
Vue.js的核心包括一套"响应式系统"."响应式",是指当数据改变后,Vue会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新 ...
- php可以实现响应式吗,怎么实现Vue数据响应式
这次给大家带来怎么实现Vue数据响应式,实现Vue数据响应式的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 Vue的数据响应主要是依赖了Object.defineProperty(),那么整 ...
- 指令—— 数据绑定指令||数据响应式||双向数据绑定指令
指令 v-cloak指令的用法 1.提供样式 [v-cloak]{ display: none; } 2.在插值表达式所在的标签中添加v-cloak指令 背后的原理:先通过样式隐藏内容 ...
- chrome vue 未响应_VUE数据响应式
响应式顾名思义就是对外界的触发变化做出响应. 在vue中,vue的data是响应式的,我们会很好奇,为什么传入new Vue({})中的data在做出变化的时候,UI中相应地显示的数据也会响应做出变化 ...
最新文章
- Scrum敏捷开发工具Leangoo
- 约会安排 HDU - 4553
- 115个Java面试题和答案——终极列表(下)
- eclipse下创建Maven项目
- android 剩余,关于android:android-剩余部分
- Autocad 2015如何激活成功
- (转)300家平台倒闭,BAT纷纷离场,到底什么模式已经全军覆没?
- Spring入门篇——第4章 Spring Bean装配(下)
- 非线性微分方程 matlab,用ODE45求解Matlab中微分方程的非线性系统
- 软件设计模式与体系结构 期末课后题
- 中医电脑cac处方系统 v1.3.3.8 免费
- 教育教培行业年终工作总结ppt制作幻灯片模板设计.pptx
- 匿名飞控STM32版代码整理之Ano_Imu.c
- 【Excel】如何冻结任意行列
- WIN7 64位系统安装CodeWarrior 6.3及BDM驱动
- python计算ks
- linux系统打开远程端口,linux下3种检测远程端口是否打开的方法
- 2021Android面经,历时一个半月,斩获3个大厂offer
- Java —— 初识集合
- Mac 如何修改用户名和用户文件夹