头图

SegmentFault 思否技术周刊 -- 超实用 Vue 合集,请查收

Beverly
English

Vue.js 是一个用于创建 web 交互界面的工具。其特点是

  • 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
  • 数据驱动 自动追踪依赖的模板表达式和计算属性。
  • 组件化 用解耦、可复用的组件来构造界面。
  • 轻量 ~24kb min+gzip,无依赖。
  • 快速 精确有效的异步批量 DOM 更新。
  • 模块友好 通过 NPM 或 Bower 安装,无缝融入你的工作流。

热门文章

《Vue3 Composable最佳实践(一)》

由于这种编写VUE代码的方式相对较新,因此您可能想知道编写组合式函数的最佳实践是什么呢?本系列教程可以作为您和您的团队在进行组合式开发过程中的参考指南。
我们将涵盖以下内容:
1.如何通过选项对象参数使您的组合更加可配置; 👈 本篇主题
2.使用ref和unref使我们的参数更加灵活;
3.如何使你的返回值更有用;
4.为什么从接口定义开始可以使你的组合式函数更强大;
5.如何使用异步代码而无需“等待” - 使您的代码更易于理解;
不过,首先,我们需要确保我们对组合式函数的理解是一致的。我们先花点时间解释一下什么是组合式函数。

《Vue3.2 setup语法糖总结》

提示:Vue3.2 版本开始才能使用语法糖!
在 Vue3.0 中变量必须 return 出来,template中才能使用;而在 Vue3.2 中只需要在 script 标签上加上 setup 属性,无需 return,template 便可直接使用,非常的香啊!

《Vue.js 3.x 中跨层级组件如何传递数据?》

Vue.js 中,跨层级组件如果想要传递数据,我们可以直接使用 props 来将祖先组件的数据传递给子孙组件:

prop-drilling.png

注:上图来自 Vue.js 官网:Prop Drilling

如上图所示,中间组件 <Footer> 可能根本不需要这部分 props,但为了 <DeepChiild> 能访问这些 props<Footer> 还是需要定义这些 props,并将其传递下去。

有人说我们可以使用 $attrs/$listeners,但依然还要经过中间层级,而使用 Vuex 又过于麻烦,Event Bus 又很容易导致逻辑分散,出现问题后难以定位。

那么,有没有其他方法可以实现直接从祖先组件传递数据给子孙组件呢?答案就是 provide/inject

祖先组件

《Vue.js 3.x 双向绑定原理》

废话不多说,我们先来看一个 v-model 基本的示例:
<input type="text" v-model="search">
首先,我们要明白一点的是:v-model 的本质是指令。因此,它跟我们一般的自定义指令是一样的,需要实现 Vue.js 生命周期的钩子函数。
其次,v-model 实现了双向绑定,也就是:数据到 DOM 的单向流动、DOM 到数据的单向流动。
明白了上面这两点,再来看代码就清晰多了。

《 分享 15 个 Vue3 全家桶开发的避坑经验 》

最近入门 Vue3 并完成 3 个项目,遇到问题蛮多的,今天就花点时间整理一下,和大家分享 15 个比较常见的问题,基本都贴出对应文档地址,还请多看文档~
已经完成的 3 个项目基本都是使用 Vue3 (setup-script 模式)全家桶开发,因此主要分几个方面总结:
Vue3
Vite
VueRouter
Pinia
ElementPlus

《通过差异化对比学习法,带你回顾 Vue2 快速掌握 Vue3 》

Vue3 已经发布有一段时间了,同时也得到了各大厂商和社区的支持和众多开发者喜爱,周边生态也正在逐步完善。可谓是一片欣欣向荣的美景。本文意在通过梳理 Vue2 常用 api 通过差异化对比 Vue3,帮助你快速掌握 Vue3
本文假设你已经有一定 Vue2 实操经验,不会过多描述 api 细节

《petite-vue源码剖析-双向绑定v-model的工作原理》

双向绑定 v-model 不仅仅是对可编辑HTML元素( select, input, textarea 和附带 [contenteditable=true] )同时附加 v-bindv-on ,而且还能利用通过petite-vue附加给元素的 _value_trueValue_falseValue x 属性提供存储非字符串值的能力。

《Vue3 如何实现全局异常处理?》

在开发组件库或者插件,经常会需要进行全局异常处理,从而实现:
全局统一处理异常;
为开发者提示错误信息;
方案降级处理等等。
那么如何实现上面功能呢?
本文先简单实现一个异常处理方法,然后结合 Vue3 源码中的实现详细介绍,最后总结实现异常处理的几个核心。
本文 Vue3 版本为 3.0.11

《 Vue 响应式原理 》

Vue 最独特的特性之一,是非侵入式的响应系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。聊到 Vue 响应式实现原理,众多开发者都知道实现的关键在于利用 Object.defineProperty , 但具体又是如何实现的呢,今天我们来一探究竟。

热门问答

推荐课程

【思否编程】迎接Vue 3.0

内容介绍:

  • Vue 3.0的新变化
  • 开发团队的设计思路(为什么会有这些变化)
  • 我们应该怎么准备

PS:大家想看哪些方面的技术内容,可以在评论区留言喔 ~
如有问题可以添加小姐姐微信~
image.png

阅读 3.1k

SegmentFault_社区周刊
主题技术周刊,每周分享新鲜有趣的技术干货。
avatar
Beverly
SegmentFault 思否社区打工人

怂人面前全是坑,努力填坑。加油💪🏻,小鸣酱~

568 声望
2.1k 粉丝
0 条评论
avatar
Beverly
SegmentFault 思否社区打工人

怂人面前全是坑,努力填坑。加油💪🏻,小鸣酱~

568 声望
2.1k 粉丝
文章目录
宣传栏