开局一张图 内容全靠手搓
看到图片没：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的状态管理
未完待续，下一篇接着讲 这种数据在页面的显示