2 天前 / 狼族小狈
前言我司基于 vue-class-component 开发的项目有上百个，其中部署的 SSR 服务也接近 100 个，如此庞大体量的项目一开始的时候还幻想着看看是否要升级 Vue3，结果调研一番下来，才发现 vue-class-component 对 Vue3 的支持，最后一个版本发布都过去两年了，迟迟还没有发布正式版本。目前基本上处于无人维护的状态，而且升级存在着大量的破坏性更新，对于未来是否还要继续使用 Vue3 现在还是持保留意见，但是不妨碍我们先把组件库做成 Vue2 和 Vue3 通用，于是就有了本文。
11 天前 / 冷星1024
作者：Anthony Fu 原文：https://www.zhihu.com/question/462378193/answer/1916657458 你可以认为他们是同一个功能的两种不同形态，底层的实现是一样的。 watch- 显式指定依赖源，依赖源更新时执行回调函数 watchEffect - 自动收集依赖源，依赖源更新时重新执行自身响应式依赖收集首先先需要了解一下 Vue 3 的响应式 [1] 是怎么工作的。我想很多文章都详细的讲过这个部分了，这里就简单带过一下。这里有个简化版的 ref 的实现： constref=(initialValue)=>{ let_value=initialValue return{ getvalue(){ track(this,'value')//收集依赖 return_value }, s...
16 天前 / 冷星1024
一直以来都想自己写一款插件去解决大屏的适配问题，最近终于有时间去完成这件事，特此记录下过程中碰到的问题。 注册 vue 指令如何支持类型提示？文档说 vue 插件的 use 方法是支持第二个参数的，一开始打算通过第二个参数做基础配置。能正确读取到该参数，可是不知道怎么做类型提示，因为官方定义的是 any[]， 那我总不能让使用者去从我的插件里导出类型再去 as 吧？ 谷歌了问题，翻了 issue , 也找了一些开源的插件去看，好像大家都没这个需求。 开端就遇到问题，搞得我都不是很有动力写下去了。
26 天前 / 冷星1024
点击上方前端阳光，关注公众号 回复加群，加入技术交流群交流群 前言 Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。 示例以这样一个列表为例： 1 2 那么它的vnode也就是虚拟 dom 节点大概是这样的。 { tag:'ul', children:[ {tag:'li',children:[{vnode:{text:'1'}}]}, {tag:'li',children:[{vnode:{text:'2'}}]}, ] } 假设更新以后，我们把子节点的顺序调换了一下： { tag:'ul', children:[ +{tag:'li',children:[{vnode:{text:'2'}}]}, +{tag:'li',children:[{vnode:{text:'1'}}]...
48 天前 / 冷星1024
本文作者为360技术中台效能工程部的前端开发工程师 ProxyVue3 的响应式原理依赖了 Proxy 这个核心 API，通过 Proxy 可以劫持对象的某些操作。 constobj={a:1}; constp=newProxy(obj,{ get(target,property,receiver){ console.log("get"); returnReflect.get(target,property,receiver); }, set(target,property,value,receiver){ console.log("set"); returnReflect.set(target,property,receiver); }, has(target,prop){ console.log("has"); returnReflect.has(target,prop); }, deleteProperty(target,prop){ console.log("deleteProperty"); returnR...
49 天前 / pingan8787
今天分享 6 个 Vue3 开发必备的 VSCode 插件，可以直接用过 VSCode 的插件中心直接安装使用。 如果有觉得有帮助，还请点赞支持一下~ 1. Volar 下载数 153 万 + 相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生，作为 Vue2 配套的 VSCode 插件，它的主要作用是对 Vue 单文件组件提供高亮、语法支持以及语法检测。 而随着 Vue3 正式版发布，Vue 团队官方推荐 Volar 插件来代替 Vetur 插件，不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能。
50 天前 / pingan8787
Vue3 为开发者提供 ref 和 reactive 两个 API 来实现响应式数据，这也是我们使用 Vue3 开发项目中经常用到的两个 API。 本文从入门角度和大家介绍这两个 API，如果有错误，欢迎一起讨论学习~ 「本文演示代码是基于 Vue3 setup 语法。」 在入门阶段，我们需要掌握的是「是什么」、「怎么用」、「有什么注意」，基本就差不多了。 1. reactive API 如何使用？reactive 方法用来创建响应式对象，它接收一个对象 / 数组参数，返回对象的响应式副本，当该对象的属性值发生变化，会自动更新使用该对象的地方。
58 天前 / 冷星1024
前言如果你使用过 Vue3，你知道的，在 Vue3 中有两个非常常用的响应式 API：reactive 和 ref。它们会把我们想要追踪的数据变成响应式。 而且我们在使用时一直被告知 ref 用于创建基础类型的响应式，也可以创建引用类型的响应式。而对于引用类型，底层也是转换为 reactive 来进行响应式处理。那既然这样为撒还需要 reactive ，全部使用 ref 不就行了吗？ 虽然 ref 创建的响应式数据在脚本中需要通过 .value 才能访问到呀！但是这里肯定影响不大。并且在模板中会自动添加上 .value，所以模板中不需要通过 .value 访问。
66 天前 / 冷星1024
来源 |https://segmentfault.com/a/1190000042073070 前言在vue源码中，封装了很多工具函数，学习这些函数，一方面学习大佬们的实现方式，另一方面是温习基础知识，希望大家在日常工作中，简单的函数也可以自己封装，提高编码能力。本次涉及的工具函数 1-16 在Vue3的源码中，路径是core/packages/shared/src/index.ts。17-22 在Vue2的源码中，路径是vue/src/shared/util.ts。1、EMPTY_OBJ 空对象 const EMPTY_OBJ = __DEV__ Object.freeze({}) : {}注意： Object.freeze只能浅冻结，如果属性是对象...
68 天前 / 冷星1024
前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。 背景你是否有在开发中遇到过这样的需求：需要实时获取某一个容器的宽度或者长度，也就是容器的 size，而 size 是根据视口的变化而实时改变的。这要是放在以前，我肯定会这么做： 1、监听视口的变化 2、在变化回调中去获取容器的宽度或高度这样就能实时得到容器的 size 了，那要怎么去实现呢？ ahooks 的 useSizeahooks 是一个很出色的库，他的 useSize 就是用来实时获取 size 的，具体用法可以看文档，以下就是 但是我在使用这个 hook 时...
70 天前 / 冷星1024
点击上方前端阳光，关注公众号 回复加群，加入技术交流群交流群 前言 如题这三个东西，相信很多人都见过，也都会用会配置，但要是让你说出个所以然来，恐怕还不是那么容易。 曾经的我，一边 google 一边配置，只要能用就万事大吉了，且每次 google 出来的似乎还跟上次的都有所不同，所以每次配置项目时，有差异的。然而却很少去深究为啥？为啥这样配也可以，那样配也可以，那到底怎样配置才是最佳的？ 下面就来简单说说我的理解，不对的地方欢迎指正。 名称解释 preset-env 从名称看有个 env，这里就是包含“环境”之意。
76 天前 / 冷星1024
1. Vue 3 和 Composition API 的状况 Vue 3 已经发布了一年，它的主要新功能是：Composition API。从 2021 年秋季开始，推荐新项目使用 Vue 3 的 script setup 语法，所以希望我们能看到越来越多的生产级应用程序建立在 Vue 3 上。 这篇文章旨在展示一些有趣的方法来利用 Composition API，以及如何围绕它来构造一个应用程序。 2. 可组合函数和代码重用新的组合 API 释放了许多有趣的方法来重用跨组件的代码。复习一下：以前我们根据组件选项 API 分割组件逻辑：data、methods、created 等。
85 天前 / 冷星1024
阅读本文，你将 可能什么也学不到。 了解一个 vue3 巨石项目落地为 react 容器 + vue3 子应用微应用方案的落地全过程。 你问我为啥要切换到 React 技术栈？公司决定统一技术路线，选了 React，冒办法啊。.. 了解一些已经实际落地的工程化方案；一、背景 复杂的方案。是为了解决复杂的问题。 假设某产品具备 “Sass 化”、“多业态支持”的模式。 在此模式指导下，可以设想的使用场景为：在同一套后台管理平台中，不仅可以按需给用户分配可用模块、还必须支持同一模块在不同业态下的“区分性”和“定制性”。
88 天前 / cxc_xinconan
前言 昨日有两条 Vue 的消息，一个是 VUE VLOG 停止运营，一则是 Vue2.7 正式版发布，有兴趣看看。今日前端早读课文章由 @CUGGZ 翻译授权，公号：前端充电宝分享。 正文从这开始～～ 今天，Vue 正式发布了 2.7 版本， 版本名称为 Naruto，即火影忍者。 尽管现在 Vue 3 是默认版本，但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中，从 Vue 3 向后移植了一些最重要的功能，以便 Vue 2 用户也可以从中受益。