【vue3】vuex 和组件通信

vuex

定义：全局状态管理器，全局数据共享。 特点：数据双向响应，数据流是单向的【自上而下，从父级传到子级的过程，并且子级不可以修改父级的数据】。 缺点：数据存在内存中，刷新页面会丢失改变的状态值。需要使用持久化插件把数据存在本地。vuex-persist vue2的vuex和vue3里的vuex没有半点更改。只有初始化的语法略有改动。

差异

1. 由createStore函数创建store实例
2. 组件内使用store使用useStore高阶函数得到store对象

持久化插件

vuex-persister

vue3代码的组件内抽离优化【组件瘦身】

可以抽离数据和方法到外部js中，但是对于props，store，生命周期和router的初始化不可以抽离。

组件通信

1. 父传子，子组件使用defineProps函数接收
2. 子传父，子组件使用defineEmits函数接收
3. v-model升级成可以绑定多个
4. 子组件向父组件主动暴露数据，使用defineExpose函数

vue-router

语法没有变化，只是初始化的时候需要使用createRouter创建路由实例，mode选项变成了history，并且使用 createWebHistory方法初始化。

组件内获取路由实例使用 useRouter函数初始化

组件内获取当前路由对象 useRoute函数初始化

teleport vue3新增的内置组件，可以将包裹的元素挂在到指定的任意元素中去，从而脱离当前组件的文档位置，但是作用域还有数据等还是

使用的当前组件

虚拟dom和diff算法

1. 虚拟dom就是通过diff算法对js生产的dom计算得来的，它并不是真实的dom节点，是js生成的。
2. diff算法：递归+对比计算，新旧dom对比，同级对比，发现有不一样的地方，直接用新的替换旧的。

h() 创建虚拟dom

123

{ type: "div", props: [ 'id', 'class' ], children: "123" or children: { type: "p" } or [{},{}] } - 语法：`h('标签类型', { id: "", class: "", /* innerHTML */ }, [children])`