秋来九月八

优化是当页面出现问题或者效率过低采取的手段，任何优化不是没有代价，或许需要更多的开发时间，或许可维护性可扩展性会降低。所以，不要过度优化。

element ui 的table 没有提供下拉加载后续数据的功能，前端要想优化，要么做分页，要么做数据下拉追加。当数据太多，比如有上千条的时候，一次性渲染出来，会降低首屏加载时间，也会让页面滚动变得卡顿。

Pinia 的核心概念是“store”。你可以创建一个 store 来管理相关状态。你还可以对持久化进行更详细的配置。

为了我自己的组件库，我从去年下半年开始，到现在一直在运用vue3框架，写各种前端web常用的组件，从Button开始到Select，将来还会继续完善。

前端开发经常遇到异步的问题，请求函数，链接库，等，都有可能需要通过promise或者async await 来进行异步的一个封装。异步组件也由此诞生，我用settimeout来模拟一个vue3的异步组件

在 Vue 3 中，setup 函数是一个新的选项，用于配置组件的逻辑和数据。它代替了 Vue 2 中的 data、computed、methods 等选项，提供了一种更灵活的方式来定义组件的数据和方法以及更好的响应式支持。

vue3 watch使用的各种场景，总有一种你能用得上！！！

原来的vue2路由是通过this.\$route和this.\$router来控制的。现在vue3有所变化，useRoute相当于以前的this.\$route，而useRouter相当于this.\$router

vue3.0配置history和hash路由history路由与hash路由实现的原理

Proxy代理， 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。使用proxy对对象进行改写，用来满足普通对象无法实现的功能或者业务逻辑。proxy代理最简单的运用const person = { name: 'dx', age: 18 }const handler = { get(target, key, receiver) { console.log(target) // 原来的

Vite官网安装vue的介绍Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。使用 npm：$ npm init @vitejs/app <project-name>$ cd <project-name>$ npm install$ npm run dev或者 yarn：$ yarn create @vitejs/app <project

在 Vue 中使用 ref 的主要作用是允许你访问和操作 DOM 元素或组件实例。ref 允许你在 Vue 组件中获取对特定 DOM 元素或子组件实例的引用，以便可以进行以下操作：直接访问和修改 DOM 元素的属性和内容：你可以使用 ref 来访问和修改特定 DOM 元素的属性、样式、内容等。这对于需要直接操作 DOM 元素的情况非常有用，例如，动态改变样式、内容或绑定事件。访问子组件的实例：如果你在父组件中使用 ref 来引用子组件，你可以访问子组件的属性和方法。

2021年6月7日 尤雨溪在微博上推荐了naive 这个来自图森未来的开源组件库。

在 Vue 3 中，计算属性（computed）是一种属性，它允许你在 Vue 组件中基于其他属性的值来派生新的属性，而且这些计算属性具有响应性，只有在依赖的数据发生变化时才会重新计算。这使你能够编写干净、高效和可维护的代码。与vue2.0的computed的功能基本一致，用法有所不同。计算属性非常有用，因为它们允许你将复杂的计算逻辑封装在属性中，使代码更易于理解和维护。而且，由于计算属性是基于响应式数据的，所以它们的计算是高效的，只在必要时执行。

watchEffect在响应式地跟踪其依赖项时立即运行一个函数，并在更改依赖项时重新运行它。import { ref, watchEffect } from 'vue'export default { setup() { const count = ref(0) setInterval(() => { count.value++ }, 1000) /** 这个hook用以监听count.value的变化 */ watch

ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property。ref推荐对基础数据类型进行处理，引用的数据类型虽然也能形成响应式，但性能不够好。基础数据类型import { ref } from 'vue'export default { setup() { const count = ref(0) const onClickAddCount = () => { count.value += 1

一.vue3.0的亮点1.性能比vue2.x快1.2~2倍①diff方法优化②静态提升③事件侦听器缓存④ssr渲染1. diff方法优化vue2.0中的虚拟dom是进行全量的对比vue3.0新增了静态标记(PatchFlag)，在于上次虚拟节点进行对比的时候，只对比带有patch flag的节点。并且可以通过flag的信息得知当前节点要对比的具体内容。静态标记枚举类：2.静态提升vue2.0无论元素是否参与更新，每次都会重新创建，然后再渲染vue3.0对于不参与更新的元素，会做

文章目录ReactiveFlags reactive标记的类型介绍reactivereadonlyisProxyisReactiveisReadonlytoRawmarkRawshallowReactiveshallowReadonlyReactiveFlags reactive标记的类型介绍这些是在 vue/reactivity 文件中定义的一个枚举对象，你通过CDN 引用的 Vue源码中是没有这部分代码的,你可以把他们理解为标记。export const enum ReactiveFlags