警告
本文最后更新于 2024-05-18，文中内容可能已过时。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<script setup lang="ts">
import { ref } from 'vue'
const dom = ref<HTMLDivElement>()
function change() {
console.log(dom.value?.innerText)
}
</script>
<template>
<div>
<button @click="change">change</button>
<div ref="dom">Hello Meowrain</div>
</div>
</template>
<style></style>
|
在元素上添加ref="变量名",script中写const dom = ref<HTMLDivElement>()，因为采用了setup语法糖，如果直接写在script标签中，得到的结果就是undefined,只有在函数中才能调用.
问题：vue3中reactive对象赋值，不能响应式变化
在使用vue3中，使用reactive创建的对象或者数组进行赋值时，可以正常赋值，但是不会触发响应式变化。
例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<script setup lang="ts">
import { ref,reactive } from 'vue'
let list = reactive<string[]>([]);
let obj = reactive({});
function add(){
setTimeout(()=>{
obj = {
name:'meowrain',
age:20
}
console.log(obj);
},2000)
}
</script>
<template>
<div>
<button @click="add">add</button>
<div>{{ obj }}</div>
</div>
</template>
<style></style>
|
我们按下按钮，等待2秒
可以看到obj的值已经发生了变化，但是页面没有进行渲染,与此同时，obj的响应式对象被破坏(本来应该是Proxy(Object) {}类型的，现在成了纯粹的普通对象了
解决办法
方法1
直接添加对象的属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<script setup lang="ts">
import { ref,reactive } from 'vue'
let list = reactive<string[]>([]);
let obj = reactive({});
console.log(obj);
function add(){
setTimeout(()=>{
obj.name = 'meowrain'
obj.age = '120'
console.log(obj);
},2000)
}
</script>
<template>
<div>
<button @click="add">add</button>
<div>{{ obj }}</div>
</div>
</template>
<style></style>
|
按下按钮
数组的话就是调用push,然后把异步获取的数据解构传入就行了
方法2
使用ref
不必多说，直接ref包起来给xxx.value赋值就行