Vue 正在不断发展，目前，在Vue 3 中有多种定义组件的方法。从选项到组合再到类 API，情况大不相同，如果您刚刚开始，可能会感到困惑。让我们定义一个简单的组件并使用所有可用的方法重构它。 1. Options API 这是在 Vue 中声明组件的最常见方式。从版本 1 开始可用，您很可能已经熟悉它。一切都在对象内声明，数据在幕后由 Vue 响应。它不是那么灵活，因为它使用 mixin 来共享行为。 <script import TheComponent from './components/TheComponent.vue' import componentMixin from './mixins/componentMixin.js' export default { name: 'OptionsAPI', components: { TheComponent, AsyncComponent: () = import('./components/AsyncComponent.vue'), }, mixins:

Vue 正在不断发展，目前，在Vue 3 中有多种定义组件的方法。从选项到组合再到类 API，情况大不相同，如果您刚刚开始，可能会感到困惑。让我们定义一个简单的组件并使用所有可用的方法重构它。 1. Options API 这是在 Vue 中声明组件的最常见方式。从版本 1 开始可用，您很可能已经熟悉它。一切都在对象内声明，数据在幕后由 Vue 响应。它不是那么灵活，因为它使用 mixin 来共享行为。 <script import TheComponent from './components/TheComponent.vue' import componentMixin from './mixins/componentMixin.js' export default { name: 'OptionsAPI', components: { TheComponent, AsyncComponent: () = import('./components/AsyncComponent.vue'), }, mixins:

undefined 的问题举几个demo 就可以说明 demo1 undefined 的全局修改问题     let undefined ="anlijun"; 输出结果: Uncaught SyntaxError: Identifier 'undefined' has already been declared 解释: 这步是在外层全局去声明一个变量undefined 值为anlijun,由于全局已经有这个变量了所以声明会报错            //众所周知var可以重复声明     var undefined ="anlijun";  输出结果: console.log(undefined)//这里打印依旧是值undefined 而不是 anlijun 解释: 这样的确可以(修改）而且不报错 但是由于 undefined 这个是 不可枚举不可写 不可配置的所以打印输出的值是undefined           demo1的总结 如果只看demo1 那么平常开发中直接使用undefined 没有任何问题,因为不可改嘛; 但是问题不是出在这,而

服务端组件在 Web 开发生态系统中变得越来越普遍。传统上，在单页面应用中，即使是服务端渲染的应用，服务端仅与第一次加载相关，之后将由客户端接管。这意味着 Web 应用的每个部分都必须能够在客户端和服务端上渲染。 相反，服务端组件允许在客户端应用程序中对单个组件进行服务端渲染。即使需要生成静态站点，也可以在 Nuxt 中使用服务端组件。这使得构建混合动态组件、服务端渲染的 HTML 甚至静态标记块的复杂站点成为可能。 事实上，Nuxt 在 React 之前就已经拥有了服务端组件功能。 1、主要优点 ⚡️ 服务端组件允许从客户端包中提取逻辑 通过将代码移至服务端组件中，这些组件（以及它们使用的组件）不再需要由 Vue 进行水合或“跟踪”。这对于可能不需要在客户端上“重新运行”的复杂或昂贵的操作特别有用，例如应用语法高亮显示或解析 markdown。 在大多数情况下，在 Nuxt 站点中使用服务端组件并不是一个万能的解决方案。相反，当在客户端上渲染组件所需的代码量过多时，这将是一个有用的选项。 🔐 服务端组件确保特权代码安全运行 当应用逻辑需要...

一、什么是设计模式？ 设计模式是一套被反复使用、多数人知晓、经过分类编目的、代码设计经验的总结。它是为了可重用代码，让代码更容易的被他人理解并保证代码的可靠性。 设计模式实际上是“拿来主义”在软件领域的贯彻实践，它是一套现成的工具，拿来即用。下面来看一下设计模式的设计原则。 二、设计几个原则 单一职责原则、开放封闭原则、里式替换原则、接口隔离原则 、依赖反转原则 、最少知识原则。 下面我们一起来看看几种在前端领域常见的设计模式： 单例模式、工厂模式、策略模式、代理模式、适配器模式、观察者模式/发布-订阅模式 三、常见的设计模式及实际案例 单例模式 1. 什么是单例模式？ 单例模式 （Singleton Pattern）又称为单体模式，保证一个类只有一个实例，并提供一个访问它的全局访问点。也就是说，第二次使用同一个类创建新对象的时候，应该得到与第一次创建的对象完全相同的对象。 Vue中的单例模式 （1）Element UI Element UI是使用Vue开发的一个前端UI框架。Elemen

本文的目的，是为了让已经有 Vue2 开发经验的 人 ，快速掌握 Vue3 的写法。 因此， 本篇假定你已经掌握 Vue 的核心内容 ，只为你介绍编写 Vue3 代码，需要了解的内容。 一、Vue3 里 script 的三种写法 首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法， 1、最基本的 Vue2 写法 <template   <div {{ count }}</div   <button @click="onClick"     增加 1   </button </template <script export default {   data() {     return {       count: 1,     };   },   methods: {     onClick() {       this.count += 1;     },   }, } </scr

大家好，我是沐华。最近部门招人，捞了一批简历至少都是5年以上的前端来面试，其中不乏360的，腾讯的，简历上写的基本都是熟练使用 Vue2 、 Vue3 、 React 并阅读源码对其实现原理有自己的理解，实际问起来却不免让人唏嘘 比如：既然两个框架都用过，那能说一下你觉得这俩有什么区别吗 毕竟是两个框架，不像两个 API ，要说细节上的区别就太多太多了，可能能聊几个小时都聊不完，所以你给自己的定位是什么呢 说说 Vue 和 React 的区别 青铜级 只要真正了解一些，或者用过两个框架开发，就一定能说上来的一些语法层面： Vue API 多， React API 少 Vue 双向绑定，修改数据自动更新视图，而 React 单向数据流，需要手动 setState Vue template 结构表现分离， React 用 jsx ...

引言 有这么一个需求：列表页进入详情页后，切换回列表页，需要对列表页进行缓存，如果从首页进入列表页，就要重新加载列表页。 对于这个需求，我的第一个想法就是使用keep-alive来缓存列表页，列表和详情页切换时，列表页会被缓存；从首页进入列表页时，就重置列表页数据并重新获取新数据来达到列表页重新加载的效果。 但是，这个方案有个很不好的地方就是：如果列表页足够复杂，有下拉刷新、下拉加载、有弹窗、有轮播等，在清除缓存时，就需要重置很多数据和状态，而且还可能要手动去销毁和重新加载某些组件，这样做既增加了复杂度，也容易出bug。 接下来说说我的想到的新实现方案（代码基于Vue3）。 keep-alive 缓存和清除 keep-alive 缓存原理：进入页面时，页面组件渲染完成，keep-alive 会缓存页面组件的实例；离开页面后，组件实例由于已经缓存就不会进行销毁；当再次进入页面时，就会将缓存的组件实例拿出来渲染，因为组件实例保存着原来页面的数据和Dom的状态，那么直接渲染组件实例就能得到原来的页面。 keep-alive 最大的难题就是缓存的清理，如果能有简...

5 月 16 日，Nuxt 3.5.0 正式发布，它带来了 Vue 3.3 版本、新的默认设置、交互式服务端组件、类型化页面、环境配置等。 Vue 3.3 [Vue 3.3 已经发布](https://www.developers.pub/article/1202228)，具有许多令人兴奋的特性，特别是在类型支持方面。包括： 宏中的导入和复杂类型支持 通用组件 更符合人体工程学的 defineEmits 使用 defineSlots 的类型插槽 响应式 Props 解构 defineModel defineOptions 使用 toRef 和 toValue 实现更好的 getter 支持 JSX 导入源支持 维护基础设施改进 Nitropack v2.4 Nuxt.js 团队一直致力于对 Nitro 进行大量改进，这些改进已经在 Nitro v2.4 中实现——其中包含许多错误修复、Cloudflare 模块工作格式的更新、Vercel KV 支持等。 注意： 如果需要部署到 Vercel 或 Netlify ...

5 月 11 日，Vue 3.3 正式发布，代号 Rurouni Kenshin 。本次更新主要针对开发者体验进行了改进，特别是在使用 TypeScript 时的 SFC <script setup 。与 Vue 语言工具（以前称为 Volar）1.6 的发布相结合，解决了在使用 TypeScript 时存在的许多长期困扰问题。下面就来看看 Vue 3.3 版本中的重点功能！ 当升级到 Vue 3.3 时，建议同时更新以下依赖项： volar / vue-tsc @ ^1.6.4 vite @ ^4.3.5 @vitejs/plugin-vue @ ^4.2.0 vue-loader @ ^17.1.0（如果使用 webpack 或 vue-cli） SFC中的 <script setup 和 TypeScript DX 改进 宏中的导入和复杂类型支持 在之前的版本中，用于 defineProps 和 defineEmits 的类型参数位置使用的类型被限制为本地类型，并且仅支持类型字面量和接口。这是因为 Vue 需要...

一、什么是设计模式？ 设计模式是一套被反复使用、多数人知晓、经过分类编目的、代码设计经验的总结。它是为了可重用代码，让代码更容易的被他人理解并保证代码的可靠性。 设计模式实际上是“拿来主义”在软件领域的贯彻实践，它是一套现成的工具，拿来即用。下面来看一下设计模式的设计原则。 二、设计几个原则 单一职责原则、开放封闭原则、里式替换原则、接口隔离原则 、依赖反转原则 、最少知识原则。 下面我们一起来看看几种在前端领域常见的设计模式： 单例模式、工厂模式、策略模式、代理模式、适配器模式、观察者模式/发布-订阅模式 三、常见的设计模式及实际案例 单例模式 1. 什么是单例模式？ 单例模式 （Singleton Pattern）又称为单体模式，保证一个类只有一个实例，并提供一个访问它的全局访问点。也就是说，第二次使用同一个类创建新对象的时候，应该得到与第一次创建的对象完全相同的对象。 Vue中的单例模式 （1）Element UI Element UI是使用Vue开发的一个前端UI框架。ElementUI 中的全屏 Loadi...

2023年5月11日，我们很高兴地宣布发布 Vue 3.3 “浪客剑心”！ 此版本专注于开发人员体验改进-特别是SFC <script setup 与TypeScript的使用。与Vue语言工具 ^[1]^ （以前称为Volar）的1.6版本一起，我们在将Vue与TypeScript一起使用时解决了许多长期存在的痛点。这篇文章概述了3.3中突出显示的功能。有关更改的完整列表，请参阅GitHub上的完整更改日志 ^[2]^ 。 --- 依赖性更新升级到3.3时，建议也更新以下依赖项： volar / vue-tsc@^1.6.4 vite@^4.3.5 @vitejs/plugin-vue@^4.2.0 vue-loader@^17.1.0（如果使用webpack或vue-cli） \<脚本设置 + TypeScript DX改进^[3]^ 宏中的导入和复杂类型支持^[4]^ 通用组件^[5]^ 更符合人体工程学的定义Emits^[6]^ 带有定义插槽的类型插槽^[7]^ 实验特征^[8]^ 响应式 ...

1. 编程风格 & 视图风格 1.1 编程风格 1. React 语法少、难度大； Vue 语法多，难度小 例如指令： Vue <input v-model="username"/ <ul     <li v-for="(item,index) in list" :key="index" {{ item }}</li </ul 复制代码 React <input value={username} onChange={e =  setUsername(e.target.value)}/ <ul { list.map((item,index) =  <li key={index} {item}</li ) } </ul 复制代码 Vue 给我们提供了很多的指令功能，而这些功能在 React 中基本都需要我们使用原生 js 来实现。 所以会有很多人说: "使用 Vue 实际上你就是在操作 Vue，使用 React 实际上你是在操作 js"。 2. React 魔改少，手动实现；

vue2 对比 Vue3 有很多新特性增加，也有很多功能属于破坏性更新。 列举值得关注的新特性 1. 第一个肯定是组合式API setup 以及 setup语法糖 模式 2. 新增的内置组件 TelePort 以及 Suspense 3. 响应式原理的变化从 Object.defineProperty 换成了 proxy 4. 对ts支持比较友好 5. 自定义 hooks 逻辑拆分 6. v-memo 新指令可以小幅度提升性能 破坏性更新的API以及功能 1. 不在需要手动实例化Vue 废弃了 new Vue 这个操作,取而代之的是 createApp 接受一个根组件实例 ts import { createApp } from 'vue' import App from './App.vue' const app = createApp(App).mount(' app') 同时返回的app实例也跟之前不一样 废弃了 Vue.config.productionTip Vue.extend 具有影响

简介 在接到这个需求的时候，就纳闷，为啥要搞这么多花样，评论就评论吧，它还要你实现艾特某人的时候，还要调用后台的IM接口，给相关人员发送通知推送；说到这里，有点经验的JY应该就想到了，数据参数如何组装和传递这是个关键点，后面再细说。 评论区主要实现的功能点有：表情包选择，艾特符识别并弹出人员选择，还有就是图片选择（篇幅有限，这个放在第二篇文章述说），还有就是支持表情包，艾特人，文本组合显示的文本区域（这个是难点） 组合显示的文本区域，除了能正常显示三种元素节点，还需要将其关联的数据包裹起来，方便在点击发送的时候，将这些数据提取出来进行组装，然后发送给后台； 刚开始，毫无头绪，不知从何下手的时候，想到的就是去寻找一劳永逸的插件，然后发现，比较适合做这方面的插件，无非就是富文本编辑器吧，比如最常用的富文本编辑器Vue-Quill-Editor^[1]^ ,但是研究了一番这开源插件的文档发现，开发的API并不能满足我实际的需求， 比如艾特人的情况下数据存储，还有改写后光标的显示和跟踪问题， ，😮‍💨唉，一番折腾之后又陷入了苦思当中；但问题总归是要解决的，于是我开始萌...