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

开局一张图内容全靠手搓

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

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

所以又找了两张图

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

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

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

xml 复制代码

<!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

sql 复制代码

npm create vue@latest

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

数据的声明和使用

vue中声明响应式数据

xml 复制代码

<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"

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

鸿蒙中声明响应式数据

less 复制代码

@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会变吗？

xml 复制代码

<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的大哥们在评论区回答吧

鸿蒙中声明非响应式数据

less 复制代码

@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中嵌套数据的响应式

先声明数据

xml 复制代码

<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>

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

鸿蒙中嵌套数据的响应式

less 复制代码

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%')
  }
}

代码解析