wl_qianduan的博客

Pinia使用 defineStore 函数来定义一个 store，其中 state 是一个返回对象的函数，Pinia 会自动将这个对象通过 Vue3 的 reactive 函数转换为响应式对象。这里 state 返回的 { count: 0 } 对象会被 reactive 处理成响应式对象，对 count 属性的修改会自动触发响应式更新。Vuex在 Vuex 中，state 是一个普通的对象，在创建 Vuex store 实例时进行定义。

getters 会自动追踪其依赖的 state 属性，当依赖的 state 属性发生变化时，getters 会重新计算并更新相关的组件。当使用 defineStore 定义一个 Store 时，Pinia 会利用 Vue 3 的 reactive 函数将 state 函数返回的对象转换为响应式对象。当调用 increment 方法时，this.count 的值会增加，由于 state 是响应式的，任何依赖于 count 的组件或 getters 都会自动更新。

v-scale-screen 是一个专为大屏项目开发设计的大屏适配容器组件，能实现屏幕的自适应，支持 Vue2.6 及以上版本。

由于 ES6 模块的导入和导出是静态的，打包工具（如 Webpack、Rollup）在编译时就可以确定哪些模块被使用，哪些未被使用，然后将未使用的模块从最终的打包文件中移除。这里的Vue是一个全局对象，包含了 Vue 的所有功能，即使我们只使用了其中一部分，打包工具也无法将未使用的部分移除。综上所述，Vue 3.x 通过组合式 API 和按需引入的设计，极大地提升了对 Tree-shaking 的支持，使得开发者能够更方便地减少打包文件的体积，优化应用性能。Vue 3.x 的全局 API 也支持按需引入。

使用 Vue CLI 创建一个新的 Vue 项目。打包完成后，可以在 dist_electron 目录下找到生成的安装包。

这里使用了 v-slot 来获取 router-view 渲染的组件，然后用 keep-alive 进行包裹，实现路由组件的缓存。例如，我们有组件newsList和newsInfo，imageList和imageInfo，但是我们只想缓存newsList和imageList这2个列表组件的数据。是Vue的内置组件，包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。这里需要说明的是，本示例是使用了vue-router的，所以这里的keep-alive中放了1个router-view。

Vue 3 的响应式系统增强基于 Proxy 实现，相比 Vue 2 有诸多显著优势，主要体现在性能提升、功能增强、代码维护性提高等方面，以下是具体介绍：

【代码】Vue3 -- 新特性。

Diff 算法是一种用于比较两个树结构差异的算法。在 Vue.js 里，它用于比较新旧虚拟 DOM 树的差异，从而找出哪些节点需要更新，避免直接操作真实 DOM 带来的性能开销，因为直接操作真实 DOM 的代价相对较高。

vue3原理解析。

Vue.js 的响应式系统主要基于 JavaScript 的方法（Vue 2.x）和 ES6 的Proxy对象（Vue 3.x）来实现。其核心思想是通过拦截数据对象的属性访问和修改操作，当数据发生变化时，自动触发相应的更新操作，从而更新与之绑定的 DOM。Vue.js 的响应式系统通过Object.defineProperty()（Vue 2.x）或Proxy对象（Vue 3.x）实现了数据劫持，通过依赖收集和发布更新机制实现了数据绑定，使得数据的变化能够自动更新到 DOM 上。

虚拟 DOM 是一种轻量级的 JavaScript 对象，它是真实 DOM 的抽象表示。简单来说，虚拟 DOM 就是用 JavaScript 对象来模拟真实的 DOM 树结构，每个虚拟 DOM 节点对应一个真实的 DOM 节点。