Vue响应式状态ref()与reactive()

1. ref()声明响应式状态

<template>
  <!--在DOM元素调用变量时,不需要指定输出变量的value,因为Vue会帮你输出.value
  但是注意,这个帮助只会帮助顶级的ref属性才会被解包-->
  <div>{{ count }}</div>

  <div>{{ object }}</div>

  <div>{{ array }}</div>
</template>
<script setup>
//从vue中获取ref方法
import { ref } from "vue";

name: "App";
console.log('--------------------------------------------------------------------------')
//定义一个变量count,设置为响应式,初始值为0
let count = ref(0);
//输出变量count的值,结果为RefImpl对象,其内部会有被数据劫持的value
console.log('count:',count);
//输出变量count的value值,结果为0
console.log('count.value:',count.value);
//实现对变量的操作,0+1
count.value++;
//再次输出变量count的value值,结果为1
console.log('+1后的count.value:',count.value);

console.log('------------------------------ref使用对象-------------------------------------')

//定义一个对象,使用ref声明其状态为响应式
let object=ref({
  id:1,
  name:'小绿'
})
//输出object的value值为Proxy(Object) {id: 1, name: '小绿'}
console.log('其value:',object.value)
//输出object下name的值为小绿
console.log('对象object的name值:',object.value.name)
//修改object的name值为小红
object.value.name='小红'
//输出修改后的object的name值为小红
console.log('修改object的name值后输出:',object.value.name)

console.log('------------------------------ref使用数组-------------------------------------')
let array=ref(['洗澡','学习','唱歌'])
//输出array的value值为Proxy(Array) {0: '洗澡', 1: '学习', 2: '唱歌'}
console.log('其value:',array.value)
//输出array下标为0的值为洗澡
console.log('对象array的下标为0的值:',array.value[0])
//修改array下标为0的值为打扑克
array.value[0]='打扑克'
//输出修改后的array下标为0值为打扑克
console.log('改后的array下标为0值输出:',array.value[0])
</script>

<style scoped>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

HTML输出
1
{ “id”: 1, “name”: “小红” }
[ “打扑克”, “学习”, “唱歌” ]

2. reactive()使对象本身具有响应性

<template>
  <!--在DOM元素调用变量时,不需要指定输出变量的value,因为Vue会帮你输出.value
  但是注意,这个帮助只会帮助顶级的ref属性才会被解包-->
  <div>{{ state.count }}</div>

  <div>{{ array[0] }}</div>
</template>
<script setup>
//从vue中获取ref方法
import { reactive } from "vue";

name: "App";
console.log('------------------------------reactive使用对象-------------------------------------')
//定义一个对象state,设置其响应性,state对象的count属性值为0
let state = reactive({
  count:0
});
//输出state对象值
console.log('state对象值为:',state)
//输出state对象的count属性值
console.log('state对象的count属性值为:',state.count)
//设置state对象的属性count值为1
state.count++
//输出state对象的count属性加1后的值
console.log('输出state对象的count属性加1后的值:',state.count)

console.log('------------------------------reactive使用数组-------------------------------------')
//定义数组,设置其响应性
let array = reactive(['洗澡','学习','唱歌']);
//输出array数组值
console.log('array数组值为:',array)
//输出array数组下标为0的值
console.log('array数组下标为0的值为:',array[0])
//设置array数组下标为0的值为看电视
array[0]='看电视'
//输出array数组下标为0的数据修改后的值
console.log('输出array数组下标为0的数据修改后的值:',array[0])

console.log('------------------------------数据原理及注意事项-------------------------------------')
//reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的
const raw={}
const proxy=reactive(raw)
console.log('对比proxy与raw设置响应性后是否相等:',proxy===raw)

//对同一个原始对象调用 reactive() 会总是返回同样的代理对象，而对一个已存在的代理对象调用 reactive() 会返回其本身
console.log('对同一个原始对象raw调用reactive():',proxy===reactive(raw))
console.log('对一个已存在的代理proxy对象调用reactive():',proxy===reactive(proxy))

//依靠深层响应性，响应式对象内的嵌套对象依然是代理
const proxy1=reactive({})
proxy.nested = raw
console.log('proxy1嵌套对象nested与raw是否相等:',proxy.nested===raw)
</script>

<style scoped>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57