Vue3-知识结构-MVVM

Vue3知识结构之MVVM

---

---

一、mvvm模型

mvvm模型是vue实现数据驱动视图和数据双向绑定的核心原理
mvvm模型：model (data数据) + view-moudle (vue实例) + view (dom)

二、nextTick()

响应式变量异步驱动视图，通过nextTick()函数来解决这类异步情况

nextTick() 与 OnUpdated()生命周期函数

nextTick() 功能和OnUpdated()生命周期函数相同都是与视图相关,可以监控视图(view)发生变化，并在视图(view)变化后执行编写的逻辑。
区别：nextTick() 依附逻辑使用。若和onUpdated处于同一级时，只执行打印一次；若放入其它函数逻辑内，会跟随视图变化而被触发。

例子 点击按钮值发生变化

<span class='test'>{{ jsonStrtest }}</span>
<button @click="changeNextTick">点击显示下一个值</button>
------------------------------------------------------------------------------------
import {nextTick, onUpdated, ref} from 'vue'
let jsonStrtest=ref('8 9 10');
function changeNextTick(){
    jsonStrtest.value='J Q K';
    console.log('@nextTick-nextTick',document.querySelector('span.test').innerHTML);
    //由于响应式变量异步的原因 打印初始赋值
    nextTick(()=>{
    console.log('@nextTick-nextTick',document.querySelector('span.test').innerHTML); 
    //打印的和onUpdated()一样是已更新后的值
    })
})
nextTick(()=>{
    console.log(document.querySelector('span.test').innerHTML); 
    //页面打开立即打印并只打印一次，因为初始赋值改变了视图，触发函数
})
onUpdated(()=>{
    console.log('@onUpdated',document.querySelector('span.test').innerHTML); 
})

三、Watch 监控数据变化

可以监控数据(model)发生变化，并在数据(model)变化后执行

watch(
    ()=>numAccount1.value,//监控简单数据类型
    (newNum,oldNum)=>{console.log(newNum,oldNum)},
)
watch(
    ()=>personObj.value,//监控复杂数据类型
    (newNum,oldNum)=>{ console.log(newNum,oldNum);},
    {deep:true,immediate:true}
    //监控复杂数据类型  深度访问和立即执行 初始化要执行一次
)

三、Computed 计算属性

计算属性，具有响应性

computed和定义的函数的区别 ：
computed 在数据没有变化的情况下，会拿缓存数据，节约资源，利用性高；而调用函数则会进行重新计算一次

const totalNum= computed(()=>{
    return  numAccount1.value+numAccount2.value;
})