8 天前 / 冷星1024
vue 已是目前国内前端 web 端三分天下之一，同时也作为本人主要技术栈之一，在日常使用中知其然也好奇着所以然，另外最近的社区涌现了一大票 vue 源码阅读类的文章，在下借这个机会从大家的文章和讨论中汲取了一些营养，同时对一些阅读源码时的想法进行总结，出产一些文章，作为自己思考的输出，本人水平有限，欢迎留言讨论~ 目标 Vue 版本：2.5.17-beta.0 vue 源码注释：https://github.com/SHERlocked93/vue-analysis 声明：文章中源码的语法都使用 Flow，并且源码根据需要都有删节 ( 为了不被迷糊 @_@)，如果要看完整版的请进入上面的 github 地址...
9 天前 / mr7
Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本，我们连夜对 Release 进行了翻译。由于时间仓促，文中如有翻译不当的地方还望提出。如有侵权，请联系删帖。以下为译文正文。 原文：https://github.com/vuejs/vue-next/releases 作者：Vue 团队 译文：https://zhuanlan.zhihu.com/p/254219538 译者：QC-L 今天，我们非常自豪地宣布 Vue.js 3.0 "One Piece" 发布。本次主版本更新包含性能的改进，更小的 bundle 体积，对 TypeScript 更好的支持，用于处理大规模用例的全新 API，以及为框架未来的长期迭代奠定了夯实的基础。
52 天前 / lmjben
最近部门分享，有同学提到了 Vue 响应式原理，大家在讨论时，发现一些同学对这一知识理解还不够深入，不能形成一个闭环，为了帮助大家理解这个问题，我重新过了一下 Vue 源码，并整理了多张流程图，便于大家理解。 Vue 初始化模板渲染组件渲染本文 Vue 源码版本：2.6.11，为了便于理解，均有所删减。 本文将从以下两个方面进行探索： 从 Vue 初始化，到首次渲染生成 DOM 的流程。 从 Vue 数据修改，到页面更新 DOM 的流程。 Vue 初始化 先从最简单的一段 Vue 代码开始： {{ message }} new Vue({ data() { return { message: "hello world...
64 天前 / 冷星1024
写在开头在 vue 中有天然的 keep-alive 这个功能实现，react 也有一个库，react-keep-alive，但是这个库是直接进行 dom 操作，会导致数据驱动失效，断层至于为什么会失效断层，大家可以看我之前对 react-keep-alive 这个库源码的研究讲解，大概一共 1500 行 TS 代码最近确实比较忙，没什么时间写文章，但是尽量给大家写一些实用的东西，也在准备做一个非常棒的东西给大家去学习如何在 React 中实现 keep-alive？(react-keep-alive 源码讲解)本源码库地址： https://github.com/searchq=react-activation 使用安装 yarn add react-activation# ornpm instal...
68 天前 / Dunizb
来源：https://medium.com/js-dojo/ 作者：Oahehc (Andrew) 这是有关 React 和 Vue 语法比较的第三篇文章。在本文中，将比较两种生态系统中最著名的状态管理库（Redux 和 Vuex）的语法。 第一篇文章：React.js 和 Vue.js 的语法并列比较 第二篇文章：Next.js 和 Nuxt.js 的语法比较，Vue 和 React 的两大 SSR 解决方案 议程创建 StoreAction 异步 ActionReducer | MutationCombine-Reducers | ModulesConnect-with-Component 中间件 | 插件 Selector | GetterDevTools 创建 StoreRedux: https://redux.js.org/basics/store import React from 'react' imp...
75 天前 / 江米小枣tonylua
在 Vue 3 Composition API 最近的一次 beta 升级中，无论是 Vue 3 本 3 库 vue-next，还是面向 Vue 2 过渡用的 @vue/composition-api 库中，都同步更新了一个 useCSSModule 函数 -- 用来在使用了 Composition API 的 Vue 实例中，支持 CSS Modules 语法。 首先来看看什么是 CSS Modules： CSS ModulesCSS Modules 是一种 CSS 的模块化和组合系统。vue-loader 集成 CSS Modules，可以作为模拟 scoped CSS 的替代方案。
85 天前 / 江米小枣tonylua
React Context API 提供了一种 Provider 模式，用以在组件树中的多个任意位置的组件之间共享属性，从而避免必须在多层嵌套的结构中层层传递 props。其围绕 Context 的概念，分别提供了 Provider 和 Comsumer 两种对象。 虽然 API 不同，且更倾向用于插件，但 Vue 中同样提供了 Provider 模式。比如 Vue 2.x 文档中对此的描述是： 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。...... provide 和 inject 主要在开发高阶插件 / 组件库时使用。
89 天前 / 江米小枣tonylua
在 Vue 3.x 的 Composition API 中，我们可以用近似 React Hooks 的方式组织代码的复用；ref/reactive/computed 等好用的响应式 API 函数可以摆脱组件的绑定，抽离出来被随处使用了。 传统上在 Vue 2.x Options API 的实践中，不太推荐过多使用组件定义中的 watch 属性 -- 理由是除了某些新旧值比较和页面副作用以外，用 computed 值会更“合理”。 而随着新 API 的使用，由于“生命周期”概念大幅收窄为“副作用”，故新的独立 watch/watchEffect 函数使用频率大大增加了...
91 天前 / 江米小枣tonylua
原文：https://michaelnthiessen.com/6-levels-of-reusability/cksubscriberid=687636220 在编写代码的时候，谁都想“少干活、多办事”。以组件而言，我们希望它能被不止一次地复用。 一些组件仅需基本的复用性。 另一些则需要更复杂的技术以充分利用。 我认为复用性有 6 中不同的层级，这里大体上来看一下： 1. 模版化不同于将代码随处复制 / 粘贴的是，借助模版化可以将其包裹在组件内部。
93 天前 / Ryan众乐
写文章 Vue3 的 Proxy 能做到哪些精确的拦截操作？原理揭秘晨曦时梦见兮前端攻城狮 70 人赞同了该文章前言大家都知道，Vue2 里的响应式其实有点像是一个半完全体，对于对象上新增的属性无能为力，对于数组则需要拦截它的原型方法来实现响应式。 举个例子： let vm = new Vue({data() {return {a: 1}}})// oops，没反应！vm.b = 2let vm = new Vue({data() {return {a: 1}},watch: {b() {console.log('change !!')}}})// oops，没反应！vm.b = 2 这种时候，Vue 提供了一个 api：this.$set，来使得新增的属性也拥有响应式的效果。
97 天前 / 前端De早读课
前言 今日早读文章由字节跳动 @HcySunYang 授权分享。 正文从这开始~~ TOC： effect() 和 reactive() shallowReactive() readonly() shallowReadonly() isReactive() isReadonly() isProxy() markRaw() 哪些数据是可以被代理的 markRaw() 函数用于让数据不可被代理 toRaw() ReactiveFlags 调度执行 effect - scheduler watchEffect() 异步副作用和 invalidate 停止一个副作用 (effect) watchEffect() 与 effect() 的区别 track() 与 trigger() ref() isRef() toRef() toRefs() 自动脱 ref customRef() shallowRef() triggerRef() unref() Lazy 的 effect()...
104 天前 / u278358
快速开始# 拉取代码git clone git@github.com:fmfe/vue-genesis-micro.git# 进入项目目录cd vue-genesis-micro# 安装依赖npm install# 开发环境启动npm run dev# 打包生产环境代码npm run build# 生产环境运行npm run start微服务是什么？微服务是一个新兴的软件架构，就是把一个大型的单个应用程序和服务拆分为数十个的支持微服务。 为什么需要微服务？随着业务的发展，项目规模越来越大，给编译打包、合并的代码冲突带来了巨大的挑战，而服务的拆分可以获得更快的编译打包，独立部署、增量更新、不同的团队只需要负责自己的服务、更好的支持多端...