vue3 reactive数据更新,视图不更新问题

简介: vue3 reactive数据更新,视图不更新问题

初次使用vue3 通过reactive 做响应式处理时,发现更新了数据,试图不更新问题。代码是这样写的

<template>
    <div>
        <div>
            数据:{
   {
    dataList.name }}
        </div>
        <el-button type="primary" @click="btnFn()">修改数据</el-button>
    </div>
</template>

<script lang="ts" setup>
    import {
   
        reactive,
    } from 'vue'
    let dataList = reactive({
   
        name:'张三',
    });
    const btnFn = async () => {
   
        dataList = {
   
            name:'李四',
        };
        console.log(dataList)
    }
</script>

查阅资料说是需要内部再加个对象
改为:

<template>
    <div>
        <div>
            数据:{
   {
    dataList.data.name }}
        </div>
        <el-button type="primary" @click="btnFn()">修改数据</el-button>
    </div>
</template>

<script lang="ts" setup>
    import {
   
        reactive,
    } from 'vue'
    const dataList = reactive({
   
        data: {
   
            name: '张三',
        }
    });
    const btnFn = async () => {
   
        dataList.data = {
   
            name: '李四',
        };
        console.log(dataList)
    }
</script>
目录
相关文章
|
3天前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
11天前
|
JavaScript
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
1天前
|
监控 JavaScript 安全
vue3添加pinia
本文介绍了Pinia作为Vue 3的状态管理库的特点,包括其基于Vue 3的Composition API、响应式状态管理、零依赖设计、插件系统、Devtools集成、Tree-shakable特性以及对TypeScript的支持,并详细说明了如何在Vue 3项目中安装和初始化Pinia。
6 0
vue3添加pinia
|
1天前
|
JavaScript
vue3完整教程从入门到精通(新人必学2,搭建项目)
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架,包括使用npm安装Element Plus、在main.js中引入并使用该框架,以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
9 0
vue3完整教程从入门到精通(新人必学2,搭建项目)
|
1天前
|
JavaScript Java CDN
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
本文提供了Vue 3从入门到精通的完整教程,涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
9 0
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
|
2天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
17 1
|
12天前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
|
1天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
7 1
|
2天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
10 2
|
2天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
7 1