当前位置：首页 > news >正文

站在Vue的角度，对比鸿蒙开发中的状态管理

news 2025/8/8 6:21:41

开局一张图内容全靠手搓

看到图片没：State就是状态的意思 UI就是页面的意思研究的就是数据变了页面变

事件驱动和数据驱动的区别

所以又找了两张图

看到虚拟DOM的都是数据驱动（这个虚拟DOM 就会产生diff算法，面试也喜欢问，其实没啥用）

看到事件触发事件队列的都是事件驱动

事件驱动代码实操一个例子


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box"></div><button id="btn">点击</button>
</body>
<script>let  box = document.getElementById("box")let  btn = document.getElementById("btn")btn.onclick = function(){box.innerHTML = "我是大雷神"}</script></html>

点击按钮触发事件，事件找到box元素，找到以后就可以修改里面的内容，就是一个典型的事件驱动

热身结束

先创建一个vue的项目用的是最新的Vite

npm create vue@latest

如果vite构建项目不会，可以看这个学习文档 Vite构建项目

数据的声明和使用

vue中声明响应式数据

<template><div>数据 {{ num }}<button @click="change">修改</button></div>
</template><script setup lang="ts">
import  {ref,reactive,toRefs,toRef,shallowRef,shallowReactive,customRef} from  "vue" let  num  = ref<number>(10);//声明let change = ()=>{num.value++
}</script>

解释一下

就可以做到数据改变页面效果跟着变

来个面试题

import {ref,reactive,toRefs,toRef,shallowRef,shallowReactive,customRef} from "vue"

这里引入的这些都是啥区别

鸿蒙中声明响应式数据

@Entry
@Component
struct Myvue {@State  num:number = 10;build() {Column() {Text(`${this.num}`)Button("修改").onClick(()=>{this.num++;})}.height('100%').width('100%')}
}

代码解析

1：声明的内容需要写在Build前 2：声明需要使用 @State

3：变量需要有类型 4：修改的时候需要带this

vue中声明非响应式数据

修改代码请问点击按钮n会变吗？

<template><div>数据 {{ num }} 和 {{ n }}<button @click="change">修改</button></div>
</template><script setup lang="ts">
import  {ref,reactive,toRefs,toRef,shallowRef,shallowReactive,customRef} from  "vue" let  num  = ref<number>(10);//声明let n = 666;let change = ()=>{num.value++n++;console.log(n);
}</script>

答案是点击以后 n和num在页面都更新

点两下的结果

这么看的话，n是不是也是响应式数据？？？？ n肯定不是响应式数据，只要注释掉一行代码即可

为什么？（用最新版本的Vue3哈，别用老的）留给会Vue的大哥们在评论区回答吧

鸿蒙中声明非响应式数据

@Entry
@Component
struct Myvue {@State  num:number = 10;private   n:number = 999;//非响应式数据  build() {Column() {Text(`${this.num}`)Text(`${this.n}`)Button("修改").onClick(()=>{this.num++;this.n++;})}.height('100%').width('100%')}
}

vue中嵌套数据的响应式

先声明数据

<template><div>{{ info.data.num }}<button @click="change">修改数据</button></div>
</template><script setup lang="ts">
import  {ref,reactive,toRefs,toRef,shallowRef,shallowReactive,customRef} from  "vue" let  info  = ref({ //嵌套数据data:{num:10}})
let change = ()=>{info.value.data.num++;
}</script>

没有任何问题数据变页面变化

鸿蒙中嵌套数据的响应式

interface dataModel{num:number
}@Entry
@Component
struct Myvue {@State  info:infoModel = {data:{num:10}}build() {Column() {Text("数据为"+this.info.data.num)Button("修改").onClick(()=>{this.info.data.num++;})}.height('100%').width('100%')}
}

代码解析