Cshaosun的博客

Vue自定义指令可以封装一些 dom 操作，扩展额外功能。它们允许开发者直接对DOM元素进行低层次操作，自定义指令可以响应Vue的响应式系统，从而在数据变化时触发相应的DOM更新。自定义指令的常用钩子函数：inserted被绑定元素插入父节点时调用的钩子函数update指令值修改时调用的钩子函数自定义指令的参数：el表示被绑定了指令的那个 dom 元素，这个el 参数，是一个原生的 JS 对象，所以Vue 自定义指令可以用来直接和 DOM 打交道binding。

可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】如果使用 Vue CLI 3+‌：直接跳过此步骤，更新即可。Vue CLl 是 Vue 官方提供的一个全局命令工具。通过 npm 或 yarn 全局安装最新版。(项目名-不能用中文)

项目实战才能让我们更好的理解和运用技术，由此举下面一个例子，供大家参看。

使用场景‌：数据变化需要触发异步操作、复杂逻辑或 DOM 更新。‌避免场景‌：频繁同步操作（可能影响性能）。‌替代方案‌：简单计算用computed，表单验证用v-model+ 事件。通过合理使用watch，可以更灵活地控制数据流和交互逻辑。

‌。它的核心优势在于能够自动追踪依赖关系，并缓存计算结果，避免重复计算，提升性能。

指令就是带有v- 前缀的特殊属性，不同的属性对应不同的功能。分类汇总内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）

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

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

模拟出一个摇色子的异步操作，先通过一个方法三秒之后拿到一个筛子数，第二步进行输出上面这段代码async中使先执行，等到三秒后执行完再把得到的结果赋值给左边的n，也就是说，所以，因此前面，虽然，但是会导致传递冗余信息，频繁的解析又重新组合参数，比较麻烦；async/await没有这个限制，可以当做普通的局部变量来处理，用let或者const定义的块级变量想怎么用就怎么用，想定义几个就定义几个，完全没有限制，也没有冗余工作；async主要来处理异步的操作，

监听 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的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

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

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

报错信息：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "showPromptMes"Vue2.0 中组件props中的数据只能单向流动，即只能从父组件通过组件的D

为了构建SPA（单页面应用）即不刷新整体页面，通过地址栏中的变化来实现单页面的切换等功能。Vue-Router用了两种模式来实现：hash 模式和history 模式。默认的路由模式是 hash 模式。hash模式和 history模式都属于浏览器自身的特性， Vue-Router只是利用了这两个特性来实现前端路由和页面的关联。hash模式和 history模式最直观的区别就是-----hash路由带#号history路由不带#号。1、hash模式带#号比较丑，history模式比较优雅；2、

Vue Router 是的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。单个路由（某一个路由）多个理由集合路由管理器。

（创建前）：数据观测和初始化事件还未开始， 此时data 的响应式追踪、 event/watcher 都还没有被设置， 也就是说不能访问到 data、 computed、 watch、 methods 上的方法和数据。（挂载前）：在挂载开始之前被调用， 相关的 render函数首次被调用。（销毁后）：实例销毁后调用， 调用后， Vue 实例指示的所有东西都会解绑定， 所有的事件监听器会被移除， 所有的子实例也会被销毁。（更新后）：在数据更新之后被调用，该方法还会在组件的子组件更新之后被调用。

在vue3.x没出来时，回答：v-for 优先级比 v-if高是没问题的，但是有了vue3.x后这个回答就不正确了。正确的回答是什么呢咱们往下看。

是js中原生的操作符，当用 delete 删除数组中的元素时，它 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。即不会改变数组的长度。被删除的元素位置会被保留为一个空洞，即数组的索引位置仍然存在，但对应的元素值为 undefined。Vue.delete 直接删除了数组 改变了数组的键值；并且会触发ue 的响应式更新机制，确保删除操作能够被 Vue 监测到并更新视图。是 Vue框架提供的一个全局方法，用于删除 Vue 响应式对象【数组和对象】中的属性或数组元素。

中的资源文件在npm run build打包是会被webpack 处理，对内部的资源文件进行压缩格式化等操作，最终放到static文件夹中和index.html一起上传。项目中所需要的资源文件图片， 字体图标， 样式文件等都可以放在这两个文件下。项目中引入的第三方的资源文件如 echarts 等文件可以放置在 static 中,第三方文件已做过处理无需处理可直接上传。中放置的静态资源文件就不会要走打包压缩格式化等流程， 而是直接进入打包好的目录， 直接上传至服务器。

Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的。setImmediate、 setTimeout 的原生 JavaScript 方法来模拟对应的。nextTick 不仅是 Vue 内部的异步队列的调用方法， 同时也允许开发。微/宏任务的实现， 本质是为了利用 JavaScript 的这些异步回调任。$nextTick 是 Vue.js 中的一个实例方法，务队列来实现 Vue 框架中自己的异步回调队列。