Cshaosun的博客

【代码】获取日期范围【昨日、本周、近七天、本月、近31天、近三个月、本季度、近半年、今年、往年、自定义时间】、获取年份列表。

computed属性的缓存机制是其核心特性之一，确保了性能优化和响应式数据管理。惰性求值：computed属性是惰性求值的，这意味着它们只有在第一次被访问时才会计算其值。之后，只要依赖的数据没有变化，computed属性将返回之前计算的结果，而不是重新计算。依赖收集：computed属性会自动收集其内部表达式所依赖的响应式数据。当这些依赖的数据发生变化时，computed属性才会重新计算其值。缓存机制：computed属性的结果会被缓存。只有当其依赖的数据发生变化时，缓存才会被清除并重新计算新的值。

（Frames Per Second, FPS）指的是每秒钟渲染的帧数。通常情况下，60FPS【每秒60帧】被认为是流畅动画的标准。反之，帧率越低，动画就越卡顿。优化后的动画帧率显著提升，能够在各种设备上保持流畅。通过简化动画属性并启用硬件加速，我们成功地减少了CPU的负担，确保了动画的高效执行。】在动画中使用复杂的JavaScript计算逻辑，会占用大量的CPU时间，导致动画卡顿。尽量减少对DOM的直接操作，尤其是导致重排的操作。属性，启用硬件加速，使得动画更加流畅。）会触发布局重排，影响性能。

js中：是一个表示，时为;是一个表示，时为。

和是浏览器渲染页面的两个不同过程。

监听 scroll、resize 等事件，当事件触发时，获取图片元素的位置信息、滚动高度及视口高度，计算出当前图片元素是否出现在视口内，如果出现了则加载图片。当页面滚动时，vue-lazyload 会检测元素是否进入可视区域，如果是，则替换元素的 src 或者 style 属性，从而实现懒加载。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。：所有浏览器都兼容，可以比较灵活，自定义触发加载的时机，可以结合图片加载预览提升用户体验。

使用过vue开发的盆友都知道Vue2和Vue3的响应式原理是不一样的，vue2用的是vue3用的是proxy。那他们具体是什么呢？又有什么区别呢？下面叫我简单做个笔记。有什么错误望各位大佬不吝指点。是 es5 引入的一个方法，用于定义或修改对象的属性的方法，可以控制属性的特性（如可枚举性、可配置性、可写性等）。Object.defineProperty()语法参数说明obj：定义属性的对象。prop：定义或修改的属性的名称。descriptor：属性的描述符对象，包含属性的特性设置。

localStorage （本地存储）是一种在用户浏览器中存储数据的客户端存储方式，允许网站将键值对数据持久保存在用户的本地浏览器中。存储的数据不受浏览器关闭的影响，可以在不同会话和浏览器关闭后仍然保持有效。生命周期永久有效，除非手动删除，否则关闭页面也会存在可以多窗口（页面）共享（同一浏览器可以共享）以键值对的形式存储使用各浏览器支持的localStorage容量上限不同；一般上限为5MB如果key不存在则返回null，而不是 undefined。

Vuex 是 Vue.js 应用的状态管理模式，它为应用内的所有组件提供集中式的状态（数据）管理。可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它【下面getters引用的state中的数据：list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]】getters: {// getters函数的第一个参数是 state// 必须要有返回值通过属性访问。

使用来跳转， 简单方便， 但是刷新了页面使用， 无刷新页面， 静态跳转；引进 router ， 然后使用 router.push( /url ) 来跳转， 使用了 diff算法， 实现了按需加载， 减少了 dom 的消耗。使用 router 跳转和使用 history.pushState() 没什么差别的， 因为 vue-router 就是用了 history.pushState() ， 尤其是在 history 模式下。

【父】beforeCreate ——》【父】created ——》【父】beforeMount ——》【注意，当父子组件有数据传递时，才有这个更新阶段执行顺序的比较。】destroyed ——》【父】destoryed。】mounted ——》【父】mounted。】updated ——》【父】updated。【父】beforeDestroy ——》【【父】beforeUpdate ——》【

使用 vue 开发时， 在 vue 初始化之前， 由于 div 是不归 vue 管的， 所以我们写的代码在还没有解析的情况下会容易出现花屏现象， 看到类似于{{message}}的字样， 虽然一般情况下这个时间很短暂， 但是还是有必要让解决这个问题的。

vue 中的模板 template 无法被浏览器解析并渲染， 因为这不属于浏览器的标准， 不是正确的 HTML 语法， 所有需要将 template 转化成一个 JavaScript 函数， 这样浏览器就可以执行这一个函数并渲染出对应的 HTML 元素， 就可以让视图跑起来了， 这一个转化的过程， 就成为模板编译。这个示例只是一个简化的编译流程，实际的Vue编译器要复杂得多，包含更多的解析规则和优化策略。

虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）。因为很多人是在学习 React 的过程中接触到的虚拟 DOM ，所以为先入为主，认为虚拟 DOM 和 JSX 密不可分。

Vue与React都使用了 Virtual DOM + Diff算法， 不管是Vue的Template模板+options api 写法， 还是React的Class或者Function写法,最后都是生成render函数，而render函数执行返回VNode(虚拟DOM的数据结构，本质上是棵树)对于React而言，每当应用的状态被改变时，全部子组件都会重新渲染。Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

实现了数据从子组件向父组件的传递，遵循响应式设计原则。只能实现相邻组件之间的通信，对于多层级嵌套组件间的通信较为复杂。如果组件间交互复杂，可能会导致大量自定义事件的使用，影响代码可读性和可维护性。

如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。

slot【插槽】， 是 Vue 的内容分发机制， 组件内部的模板引擎使用slot 元素作为承载分发内容的出口。slot是子组件的一个模板标签元素， 而这一个标签元素是否显示， 以及怎么显示是由父组件决定的。

Object.prototype.toString.call() 使用 Object 对象的原型方法。可以用来测试一个对象在其原型链中是否存在一个构造函数的。返回的结果结构是[object 数据类型]，因此简单封装。通过ES6的Array.isArray()constructor 是每个。对象访问它的构造函数（实例的。基本类型封装成对象后才返回。属性，指向构造函数本身）；的类型，其内部运行机制是。在对值类型number。（1）判断数据的类型；

同样， 如果用户自定义的属性， 放在扩展运算符后面， 则扩展运算符内部的同名属性会被覆盖掉。如果目标对象与源对象有同名属性， 或多个源对象有同名属性， 则后面的属性会覆盖前面的属性。Object.assign 方法的第一个参数是目标对象， 后面的参数都是源对象。)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中，这里。，将原对象（source）的所有可以枚举属性，复制到目标对象（target）。(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。(如果将扩展运算符用于数组赋值，