Json余
外卖员
获得徽章 0
- HTML5是HTML标准的最新演进版本，它引入了新的元素、属性和行为，同时包含了一系列可以让Web站点和应用更加多样化、功能更强大的技术。以下是HTML5的一些新特性：
语意特性：HTML5添加了诸如<header>、<footer>、<nav>等标签，使得页面的内容结构化，更加便于搜索引擎的爬取和解析。
多媒体：HTML5引入了<video>和<audio>元素，使得在网页上播放视频和音频变得更加简单。
图像效果：HTML5的<canvas>元素和SVG支持动态渲染图像。
离线与存储：HTML5提供了对本地离线存储更好的支持，包括localStorage和Cookies等。
设备兼容特性：HTML5提供了前所未有的数据与应用接入开放接口，使得外部应用可以直接与浏览器内部的数据直接相连。
连接特性：HTML5使得实时聊天、更快速的网页游戏体验以及更优化的在线交流得以实现。
增强型表单：HTML5引入了新的表单输入类型（如email、date、time、url等），以及表单验证机制，大大提高了用户体验。
SVG绘图：HTML5的<svg>元素支持动态渲染图像。
拖放API：HTML5支持原生的拖放API，可以方便地实现拖放功能。
Web Worker：HTML5的Web Worker特性使得在后台运行的脚本不会阻塞UI线程，可以实现更高效的后台计算或数据接收。
Web Storage：HTML5的Web Storage（如localStorage和sessionStorage）提供了比Cookies更好的本地存储方式。展开评论点赞 - 浏览器存储方式主要有以下几种：
Local Storage：Local Storage是HTML5中提出的一种存储方式，它可以在客户端存储大量的数据，支持存储数据的大小为约5MB。
Session Storage：Session Storage与Local Storage类似，不同之处是Session Storage的数据在页面会话结束时会被清除。
IndexedDB：IndexedDB是一个基于JavaScript的对象关系数据库系统，可以用于存储大量结构化数据，并支持创建索引。
Web SQL：Web SQL提供了一种轻量级的关系型数据库系统，支持SQL语句查询数据。
Cookie：Cookie是一种会话数据存储在浏览器端的技术，可以用于在服务器端和客户端之间传递数据。
这些存储方式各有优缺点，具体使用哪种方式取决于具体的应用场景和需求。展开评论点赞 - vue响应式数据声明函数ref和reactive区别
数据类型：reactive只能对对象、数组和Map、Set这样的集合类型进行响应式处理，而ref可以创建响应式状态，但其内部值只能是基本类型（如string、number、boolean）。
创建响应式的方式：reactive通过使用Proxy和Reflect来实现响应式数据劫持，而ref则通过Object.defineProperty()的get和set实现数据劫持。
使用方式：在操作数据时，reactive定义的数据不需要使用.value访问，而ref定义的数据则需要通过.value来访问。
综上所述，reactive适用于处理复杂的数据类型，如对象和数组，而ref适用于处理基本数据类型。展开评论点赞 - Vue 3相比于Vue 2有更好的性能，但是仍然有很多可以优化的地方，以下是一些性能优化的建议：
使用setup函数
Vue 3引入了setup函数，这个函数是在组件实例创建之前被调用的，可以在其中定义一些全局的插件或者方法，这样可以避免在每个组件中都重复写一些代码，提高性能。
使用computed属性
computed属性是一种缓存计算属性，只有当其依赖的属性或表达式发生变化时才会重新计算，这样可以避免不必要的计算和内存占用。
使用reactive函数
reactive函数是一种响应式数据，当其依赖发生变化时，会触发其响应式更新，这样可以避免手动更新，提高性能。
使用provide和inject
provide和inject可以避免组件之间的重复数据传递，提高性能。
5.使用v-model
v-model是一种双向数据绑定，可以避免手动操作数据和DOM，提高性能。
6.使用axios等缓存库
在前端开发中，频繁的请求数据会占用大量的网络资源，使用缓存库可以缓存请求数据，提高性能。
7.避免使用v-if和v-show
v-if和v-show会频繁的创建和销毁DOM元素，影响性能，应该考虑使用v-for和条件渲染。
8.避免使用递归组件
递归组件会无限递归，导致栈溢出，应该使用循环或者函数式组件代替。
9.使用Vue的异步组件
Vue的异步组件可以避免首屏加载时间过长的问题，提高性能。
10.避免使用全局变量
全局变量会在多个组件之间共享数据，容易造成数据不一致和难以维护的问题，应该使用响应式数据或者消息总线等机制来传递数据。
以上是一些Vue 3的性能优化建议，当然还有很多其他的优化技巧，根据具体的应用场景来选择合适的优化方式。展开评论点赞 - Vue Router是Vue.js的官方路由库，它提供了一系列的路由守卫（navigation guard），用于在路由切换过程中进行拦截和控制，以满足不同的业务需求。Vue Router的路由守卫主要分为三类：全局路由守卫、路由独享守卫和组件内的守卫。
全局路由守卫：Vue Router的全局路由守卫主要分为全局前置守卫（beforeEach）、全局解析守卫（beforeResolve）和全局后置守卫（afterEach）。全局前置守卫会在路由切换之前进行拦截和控制，以满足不同的业务需求。全局解析守卫会在路由解析之前进行拦截和控制，全局后置守卫会在路由切换完成后进行拦截和控制。
路由独享守卫：路由独享守卫是针对某个具体的路由实例进行拦截和控制。在组件内的守卫之前执行。主要有beforeEnter守卫。
组件内的守卫：组件内的守卫则是针对某个具体的组件进行拦截和控制。主要有beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave三个守卫。
总之，Vue Router的路由守卫提供了灵活的控制机制，可以在路由跳转的过程中执行一些操作，比如权限控制、数据预取等，从而更好地满足不同的业务需求。展开评论点赞 - Vue3的生命周期包括以下阶段：
beforeCreate 和 created：在组件创建之前和之后执行。在 Vue 3 中，这两个阶段被 setup 钩子所替代。
beforeMount：在组件挂载之前执行。
mounted：在组件挂载之后执行。
beforeUpdate：在组件更新之前执行。
updated：在组件更新完成之后执行。
beforeUnmount：在组件卸载之前执行。
unmounted：在组件卸载之后执行。当直接单击浏览器页签关闭页面时，页面的 beforeUnmount 和 unmounted 好像不执行，这时需要使用 window.onunload 事件来处理业务。
errorCaptured：异常捕捉。
activated：组件激活时执行，第一加载也会执行。
deactivated：组件失活时执行，组件卸载时也会执行。
在Vue3中，所有生命周期都可以在 setup 中以组合式API引入，使用方式是在前面加一个 on。例如，使用 onMounted 函数可以在组件挂载后执行一个函数：
import { onMounted } from 'vue';
onMounted(() => {
console.log('component mounted');
});
需要注意的是，只有应用到模板上的响应式数据发生了修改，才会触发更新生命周期。对于没有应用到模板上的响应式数据，即使发生修改，也不会触发更新周期。对于组件的 props，要分两种情况讨论：当是基础数据时，只要发生改变，不管是否应用到组件上，都会执行更新生命周期；当是对象时，又可分为两种情况，一是替换整个对象（引用地址发生改变），会执行更新生命周期，二是更新对象的某个属性时，当属性被应用到模板上，会执行更新生命周期，没有被引用到模板上，不会执行更新生命周期。展开评论点赞 - Vue2组件间通信方式包括以下几种：
props down，事件向上（父组件向子组件）：
父组件通过属性（props）将数据传递给子组件，子组件通过事件将数据传递给父组件。
事件委托（事件向上，父组件向子组件）：
父组件绑定事件处理函数，子组件触发事件，实际的数据传递是在子组件内部完成的。
emit和on：
通过emit方法触发事件，通过on方法监听事件。
Vuex：
Vuex是一个状态管理库，可以方便地管理组件间的状态。
provide/inject：
提供者通过provide方法向其所有子孙组件提供数据，接受者通过inject方法获取提供者提供的数据。
自定义 Hook：
custom Hook允许开发者封装和复用组件中的逻辑和状态。
以上是Vue2组件间通信的主要方式，具体使用哪种方式取决于具体的应用场景和需求。展开评论点赞 - #每天一个知识点# Vue2和Vue3的响应式数据底层原理有一些不同。
Vue2的响应式数据是通过 Object.defineProperty() 方法实现的，它将数据对象转换为一个 getter/setter 的形式，从而实现了数据的响应式监听和更新。这种方式能够支持大部分的数据类型，包括对象、数组等。但是，由于对象是通过递归实现监听，如果数据过大或者层级过多，会导致初始化时间过长，而且不支持数组的监听和新增属性的监听，需要通过特定的方法进行数据的更新。
Vue3的响应式数据底层原理则采用了 ES6 的 Proxy API，可以更加灵活地控制数据响应的过程。使用 Proxy API 可以避免对每个属性都进行拦截，因此初始化的更快。同时，Vue3 支持数组的监听和新增属性的监听，更加灵活。但是，由于 Proxy API 的支持程度不如 Object.defineProperty()，Vue3 在一些老版本的浏览器上可能无法很好的运行。
总的来说，Vue2 和 Vue3 的响应式数据底层原理有一些不同，Vue3 的方式更加灵活和高效，但需要注意浏览器的支持程度。展开评论点赞 - #每天一个知识点# Promise对象有一个状态，它可以有两种可能的状态：pending（待定）和fulfilled（完成）。初始状态是pending，当异步操作完成时，Promise对象的状态会改变为fulfilled，并返回一个值。如果异步操作失败，Promise对象的状态会改变为rejected，并返回一个错误原因。
Promise对象还提供了then()和catch()方法，用于处理异步操作完成的结果。then()方法用于处理操作成功的情况，而catch()方法用于处理操作失败的情况。这些方法可以帮助我们执行相应的操作，或者将操作的结果传递给下一个Promise对象以继续处理。展开评论点赞