vue3——ref reactive函数

ref：定义一个响应式的数据
使用方法：const xxx = ref(value)
修改时通过xxx.value = *** 修改
例如

<template><h1>一个人的信息</h1><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h3>工作类型：{{job.type}}</h3><h3>工资：{{job.salary}}</h3><button @click="changeInfo">修改人的信息</button>
</template>

import { ref} from 'vue'
export default {name: 'App',setup(){//ref函数返回RefImpl对象 值在此对象的value属性中let name = ref('张三')let age = ref(18)letjob = ref({type: '程序猿',salary: '3k'})function changeInfo(){name.value = '李四'age.value = 25job.value.type= '老师'job.value.salary = '5k'console.log(name,age)}// 返回一个对象（常用）return {name,age,changeInfo}}
}

reactive：定义一个对象类型的响应式数据
使用方法：const 代理对象 = reactive(源对象)
reactive定义的响应式数据是深层次的，内部基于ES6的Proxy实现
修改时不用通过.value 直接对象名.属性名即可
例如

<template><h1>一个人的信息</h1><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><h3>工作类型：{{person.job.type}}</h3><h3>工资：{{person.job.salary}}</h3><h1>{{hello[0]}}</h1><button @click="changeInfo">修改</button>
</template>

import { ref, reactive} from 'vue'
export default {name: 'App',setup(){let person = reactive({name: '张三',age: 18,job: {type: '程序猿',salary: '3k'}})let hello= reactive(['hello', 'word'])function changeInfo(){person.name = '李四'person.age = 48person.job.type = '老师'person.job.salary = '5k'hello[0] = '你好'}// 返回一个对象（常用）return {person,changeInfo}}
}

vue3——ref reactive函数相关推荐

Vue3的reactive函数
reactive函数用来定义一个对象类型的响应式数据(基本类型用ref函数) let 代理对象 = reactive(源对象) 接收一个对象(或数组),返回一个代理对象(Proxy的实例对象) re ...
Vue3学习之第二节：ref函数、reactive函数
一.ref 函数作用:定义一个响应式的数据. 示例: <template><div>{{ name }}</div> </template><s ...
vue3 ref函数用法
1.在setup函数中,可以使用ref函数,用于创建一个响应式数据,当数据发生改变时,Vue会自动更新UI <template><div><h1>{{mycount ...
vue3学习笔记（ref, reactive, setup, hook...）
目录一.搭建项目二.常用的Composition API 1.ref函数(实现响应式) 2.reactive函数 3.vue2和vue3响应式的区别 4. setup参数 5.计算属性和监视 6. ...
vue3 ref，reactive请求后的赋值问题以及解决方法
vue3 ref,reactive请求后的赋值问题以及解决方法开发的过程中,我们一定会进行接口的对接,将响应的结果赋值给我们页面上需要展示或者操作的变量,在vue3中,我们可能会稍微的有点不适应 ...
vue3 ref 和reactive的区别
文章目录 Ref reactive 源码分析视频点击进入 Ref ref数据响应式监听.ref 函数传入一个值作为参数,一般传入基本数据类型,返回一个基于该值的响应式Ref对象,该对象中的值一旦被改 ...
vue3 reactive函数用法
reactive的用法与ref的用法相似,也是将数据变成响应式数据,当数据发生变化时UI也会自动更新.不同的是ref用于基本数据类型,而reactive是用于复杂数据类型,比如对象和数组例如:定义一 ...
19.0 vue3 ref，reactive请求后的赋值问题以及解决方法
上一篇: 18.0 vue3 Vue Router的使用(1)_十一月的萧邦-CSDN博客开发的过程中,我们一定会进行接口的对接,将响应的结果赋值给我们页面上需要展示或者操作的变量,在vue3中,我 ...
学习vue3系列reactive
vue3响应式API有ref和reactive,今天主要讲解reactive函数. <template><h1>{{ msg }}</h1><button @ ...

vue3——ref reactive函数

vue3——ref reactive函数相关推荐

最新文章

热门文章