reactive
- 作用:定义一个对象类型的响应式数据
- 语法:const 代理对象 = reactive(源对象)接受一个对象(或数组),返回一个代理对象(proxy对象)
- reactive定义的响应式数据是"深层次的"
- JS操作数据:xxx 不需要.value
<template>
<div>
<div>姓名:{{ info.name }}</div>
<div>年龄:{{ info.age }}</div>
<div>性别:{{ info.sex }}</div>
<div>好朋友:{{ info.hobby }}</div>
<button @click="change">改变</button>
</div>
</template>
<script>
import { reactive } from "vue";
export default {
setup() {
//数据
let info = reactive({
name: '阿雷',
age: 23,
sex: '男',
con: {
cc: {
bb: 66
}
},
hobby: ['果冻', '蜜桃']
})
//方法
function change() {
info.name = '小黑'
info.age = 22
info.sex = '哈啊哈'
info.con.cc.bb = 99
info.hobby[0] = '笑吕'
}
//返回对象 常用
return {
info,
change
}
}
}
</script>
ref
- 作用:定义一个响应式的数据
- 语法:const xxx = ref(initValue)
-
- 创建一个包含响应式数据的引用对象(reference对象 简称:ref对象)
- JS中操作数据:xxx.value
- 模板中读取数据:不需要.value,直接{{ xxx }}
<template>
<div>
<div>你是:{{ name }}</div>
<div>我是:{{ nameTow }}</div>
<button @click="fun">别点</button>
<div>多种类小黑:{{ onefun.one1 }}</div>
<div>多种类小黑:{{ onefun.two }}</div>
</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
//数据响应式
let name = ref('小小六')
let nameTow = ref('果冻')
let onefun = ref({
one1: '别怕',
two: '我是小黑'
})
//方法
function fun() {
// name.value = '小黑'
// nameTow.value = '变身'
//模板上呈现不用.value
onefun.value.one1 = '良品'
onefun.value.two = '滂hong'
}
//返回对象 常用
return {
name,
nameTow,
onefun,
fun,
}
}
}
</script>
<style lang="scss" scoped></style>
reactive和ref对比
- 从定义数据角度对比:
- ref用来定义: 基本类型数据
- reactive用来定义: 对象 (或数组)类型数据
- 备注: ref也可以用来定义对象 (或数组)类型数据,它内部会自动通过 reactive 转为代理对象
- 从原理角度对比:
- ref通过 object.defineProperty()的 get 与 set 来实现响应式(数据劫持)。
- reactive通过使用Proxy来实现响应式 (数据劫持),并通过Reflect操作源对象内部的数据。
- 从使用角度对比:
- ref定义的数据: 操作数据需要 .value ,读取数据时模板中直接读取不需要 .value
- reactive定义的数据: 操作数据与读取数据:均不需要 value。