代理模式
Vue组件实现计数器
<template>
<button @click="count+">count is: {{ count }}</button>
</template>
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>
前端对DOM操作的代理
什么是虚拟dom
虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。
虚拟dom的作用
- 我们都知道，传统dom数据发送变化的时候，我们都需要不断的去操作dom，才能更新dom的数据，虽然后面出现了模板引擎这种东西，可以让我们一次性去更新多个dom。但模板引擎依旧没有一种可以追踪状态的机制，当引擎内某个数据发生变化时，他依然要操作dom去重新渲染整个引擎。
而虚拟dom可以很好的跟踪当前dom状态，因为他会根据当前数据生成一个描述当前dom结构的虚拟dom，然后数据发送变化时，又会生成一个新的虚拟dom，而这两个虚拟dom恰恰保存了变化前后的状态。然后通过diff算法，计算出两个前后两个虚拟dom之间的差异，得出一个更新的最优方法（哪些发生改变，就更新哪些）。可以很明显的提升渲染效率以及用户体验
- 因为虚拟dom是一个普通的javascript对象，故他不单单只能允许在浏览器端，渲染出来的虚拟dom可同时在node环境下或者weex的app环境下允许。有很好的跨端性
组合模式
定义
可多个对象组合使用，可也单个对象独立使用
应用场景
DOM，前端组件，文件目录，部门
export const Count =()⇒{
const [count, setCount] = useState(0];
return (
<button onClick={()⇒ setCount((count)⇒ count +1)}>
count is:{count}
</button>
);
}；
总结
设计模式不是银弹
- ·总结出抽象的模式相对比较简单，但是想要将抽象的模式套
- 用到场景中却非常困难
- ·现代编程语言的多编程范式带来的更多可能性
- ·真正优秀的开源项目学习设计模式并不断实践
