Vue3 异步创建响应式对象Ref 不能渲染到页面
普通创建ref 覆盖式
覆盖创建ref,可以创建ref对象
<template>
<h1>{{ template.title }}</h1>
</template>
<script setup>
let template = { title: "" };
template = ref({ title: "德莉傻" });
console.log(template);
// 或者通过方法
// function coverRef() {
// template = ref({ title: "德莉傻" });
// }
// coverRef();
</script>
测试图片 成功渲染页面
异步创建ref 覆盖式
运行三秒后才创建ref,此时ref不能渲染到页面,并且修改.value值也不能渲染
<template>
<h1>{{ template.title }}</h1>
<button @click="setTemplate">修改德莉傻</button>
</template>
<script setup>
let template = { title: "" };
template = ref({ title: "德莉傻" });
async function translateRef() {
setTimeout(() => {
template = ref({ title: "德莉傻" });
console.log(template);
}, 3000);
}
function setTemplate() {
template.value.title = "德莉傻2";
console.log(template);
}
translateRef();
</script>
3秒后等数据加载完成,刷新Vue插件或者手动调用才能获取
测试图片, 异步覆盖式ref不能成功渲染页面
点击""修改""按钮,也需要刷新Vue插件,或手动调用
异步数据创建ref的解决方法
不覆盖....
异步数据ref,要先使用ref创建对象,再用.value的方式进行异步获取完成数据后赋值
<template>
<h1>{{ template.title }}</h1>
<button @click="setTemplate">修改德莉傻</button>
</template>
<script setup>
let template = ref({ title: "" });
async function translateRef() {
setTimeout(() => {
template.value.title = "德莉傻";
console.log(template);
}, 3000);
}
translateRef();
function setTemplate() {
template.value.title = "德莉傻2";
console.log(template);
}
测试图片 异步方法内修改.value成功渲染页面
但是,当数据量大时,都需要挨个赋值,就很不优雅
