2 天前 / 江米小枣tonylua
React Context API 提供了一种 Provider 模式，用以在组件树中的多个任意位置的组件之间共享属性，从而避免必须在多层嵌套的结构中层层传递 props。其围绕 Context 的概念，分别提供了 Provider 和 Comsumer 两种对象。 虽然 API 不同，且更倾向用于插件，但 Vue 中同样提供了 Provider 模式。比如 Vue 2.x 文档中对此的描述是： 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。...... provide 和 inject 主要在开发高阶插件 / 组件库时使用。
6 天前 / 江米小枣tonylua
在 Vue 3.x 的 Composition API 中，我们可以用近似 React Hooks 的方式组织代码的复用；ref/reactive/computed 等好用的响应式 API 函数可以摆脱组件的绑定，抽离出来被随处使用了。 传统上在 Vue 2.x Options API 的实践中，不太推荐过多使用组件定义中的 watch 属性 -- 理由是除了某些新旧值比较和页面副作用以外，用 computed 值会更“合理”。 而随着新 API 的使用，由于“生命周期”概念大幅收窄为“副作用”，故新的独立 watch/watchEffect 函数使用频率大大增加了...
8 天前 / 江米小枣tonylua
原文：https://michaelnthiessen.com/6-levels-of-reusability/cksubscriberid=687636220 在编写代码的时候，谁都想“少干活、多办事”。以组件而言，我们希望它能被不止一次地复用。 一些组件仅需基本的复用性。 另一些则需要更复杂的技术以充分利用。 我认为复用性有 6 中不同的层级，这里大体上来看一下： 1. 模版化不同于将代码随处复制 / 粘贴的是，借助模版化可以将其包裹在组件内部。
10 天前 / 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，来使得新增的属性也拥有响应式的效果。
14 天前 / 前端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()...
28 天前 / u278358
Genesis 是什么？它只是一个基于 Vue SSR 的渲染库，它提供了 ssr-html、ssr-json、csr-html、csr-json 四种的渲染模式。HTML 渲染模式，可以提升首屏的渲染速度以及对 SEO 更加的友好。JSON 渲染模式，可以提供给 Vue、 EJS、React 等等，进行服务端渲染或者客户端渲染。微架构 通过 JSON 渲染模式，提供 API 接口，不管是微前端，还是微服务，都可以让其它服务对结果进行渲染。
54 天前 / Dunizb
React.js 和 Vue.js 都是很好的框架，而 Next.js 和 Nuxt.js 甚至将它们带入了一个新的高度，这有助于我们以更少的配置和更好的可维护性来创建应用程序。但是，如果你必须经常在框架之间切换，在深入探讨另一个框架之后，你可能会轻易忘记另一个框架中的语法。在本文中，我总结了这些框架的基本语法和方案，然后并排列出。我希望这可以帮助我们尽快掌握语法。 上一篇我们已经介绍了：React.js 和 Vue.js 的语法并列比较 目录 Assets Next.js Nuxt.js 基本路由 动态路由 Link Fetch-On-Server Next.js Nuxt.js Layout Next.js Nuxt.js 错误页面 Next.js Nu...
59 天前 / Dunizb
迎接 Vue3 系列： 在 Vue2 与 Vue3 中构建相同的组件 如何在 Vue3 中使用生命周期函数 如何在 Vue3 Composition API 中的提取和重用逻辑 Vue3.0 公测版 PPT （中文）Vue3 Composition API 如何替换 Vue Mixins 对于大多数单页应用程序而言，管理路由是一项必不可少的功能。随着新版本的 Vue Router 处于 Alpha 阶段，我们已经可以开始查看下一个版本的 Vue 中它是如何工作的。 Vue3 中的许多更改都会稍微改变我们访问插件和库的方式，其中包括 Vue Router。我们将结合使用 Alpha 版本的 Vue Router[1]和当前的 Vue3 Alpha[2]版本进行研究。
60 天前 / Dunizb
来源：https://learnvue.co/2020/03/how-to-use-lifecycle-hooks-in-vue3/ 作者：Matt Maribojoc Vue2 和 Vue3 中的生命周期钩子函数非常相似——我们仍然可以访问相同的钩子函数，并且我们仍然希望将它们用于相同的用例。 但是，随着 Composition API 的引入，我们访问这些钩子函数的方式已经改变。 到本文结束时，你将了解在 Vue3 中使用生命周期钩子函数的新方法，并开始编写更好的代码。 迎接 Vue3 系列： 在 Vue2 与 Vue3 中构建相同的组件 如何在 Vue3 Composition API 中的提取和重用逻辑 Vue3.0 公测版 PPT （中文）Vue3 Composition API 如何替换...
65 天前 / 冷星1024
前言我们都知道 Vue 对于响应式属性的更新，只会精确更新依赖收集的当前组件，而不会递归的去更新子组件，这也是它性能强大的原因之一。 例子举例来说 这样的一个组件： {{msg}} 我们在触发 this.msg = 'Hello, Changed~'的时候，会触发组件的更新，视图的重新渲染。 但是 这个组件其实是不会重新渲染的，这是 Vue 刻意而为之的。 在以前的一段时间里，我曾经认为因为组件是一棵树，所以它的更新就是理所当然的深度遍历这棵树，进行递归更新。本篇就从源码的角度带你一起分析，Vue 是怎么做到精确更新的。
70 天前 / Dunizb
4 月 16 日，Vue 开发团队终于在今天发布了 3.0-beta.1 版本，也就是测试版。通常来说，从测试版到正式版，只会修复 bug，不会引入新功能，或者删改老功能。所以，如果你对新版本非常感兴趣，或者有新项目即将上马，不妨尝试一下新版本。 随着 Vue3 即将发布，许多人都在想“ Vue2 与 Vue3 有何不同？” 为了显示这些更改，我们将在 Vue2 和 Vue3 中构建一个简单的表单组件。 在本文结尾，你将了解 Vue2 和 Vue3 之间的主要编程差异，并逐步成为一名更好的开发人员。