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

​

 开局一张图  内容全靠手搓

​编辑看到图片没：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%')
  }
}

代码解析

​编辑

发现在鸿蒙中不能像Vue那样直接修改嵌套数据  直接修改的数据页面不会更新 

解决方法直接更新对象 其实这个问题在Vue2中也存在，只是后来更新了，因此还有面试题问Vue2和Vue3中数据更新的问题和原理

​编辑

这样修改就可以了，这是鸿蒙第一版的问题，现在推荐使用V2的状态管理来做

鸿蒙中V2的状态管理

​编辑

鸿蒙中V2的状态管理文档

未完待续，下一篇接着讲 这种数据在页面的显示

鸿蒙官方学习地址

​

posted @ 2025-08-10 12:47  大雷神  阅读(33)  评论(0)    收藏  举报