Vue.js 是一个用于创建 web 交互界面的工具。其特点是
- 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
- 数据驱动 自动追踪依赖的模板表达式和计算属性。
- 组件化 用解耦、可复用的组件来构造界面。
- 轻量 ~24kb min+gzip,无依赖。
- 快速 精确有效的异步批量 DOM 更新。
- 模块友好 通过 NPM 或 Bower 安装,无缝融入你的工作流。
热门文章
由于这种编写VUE代码的方式相对较新,因此您可能想知道编写组合式函数的最佳实践是什么呢?本系列教程可以作为您和您的团队在进行组合式开发过程中的参考指南。
我们将涵盖以下内容:
1.如何通过选项对象参数使您的组合更加可配置; 👈 本篇主题
2.使用ref和unref使我们的参数更加灵活;
3.如何使你的返回值更有用;
4.为什么从接口定义开始可以使你的组合式函数更强大;
5.如何使用异步代码而无需“等待” - 使您的代码更易于理解;
不过,首先,我们需要确保我们对组合式函数的理解是一致的。我们先花点时间解释一下什么是组合式函数。
提示:Vue3.2 版本开始才能使用语法糖!
在 Vue3.0 中变量必须 return 出来,template中才能使用;而在 Vue3.2 中只需要在 script 标签上加上 setup 属性,无需 return,template 便可直接使用,非常的香啊!
在 Vue.js
中,跨层级组件如果想要传递数据,我们可以直接使用 props
来将祖先组件的数据传递给子孙组件:
注:上图来自 Vue.js
官网:Prop Drilling。
如上图所示,中间组件 <Footer>
可能根本不需要这部分 props
,但为了 <DeepChiild>
能访问这些 props
,<Footer>
还是需要定义这些 props
,并将其传递下去。
有人说我们可以使用 $attrs/$listeners
,但依然还要经过中间层级,而使用 Vuex
又过于麻烦,Event Bus
又很容易导致逻辑分散,出现问题后难以定位。
那么,有没有其他方法可以实现直接从祖先组件传递数据给子孙组件呢?答案就是 provide/inject
。
祖先组件
废话不多说,我们先来看一个 v-model 基本的示例:
<input type="text" v-model="search">
首先,我们要明白一点的是:v-model 的本质是指令。因此,它跟我们一般的自定义指令是一样的,需要实现 Vue.js 生命周期的钩子函数。
其次,v-model 实现了双向绑定,也就是:数据到 DOM 的单向流动、DOM 到数据的单向流动。
明白了上面这两点,再来看代码就清晰多了。
最近入门 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-bind
和v-on
,而且还能利用通过petite-vue附加给元素的_value
、_trueValue
和_falseValue
x 属性提供存储非字符串值的能力。
在开发组件库或者插件,经常会需要进行全局异常处理,从而实现:
全局统一处理异常;
为开发者提示错误信息;
方案降级处理等等。
那么如何实现上面功能呢?
本文先简单实现一个异常处理方法,然后结合 Vue3 源码中的实现详细介绍,最后总结实现异常处理的几个核心。
本文 Vue3 版本为 3.0.11
Vue 最独特的特性之一,是非侵入式的响应系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。聊到 Vue 响应式实现原理,众多开发者都知道实现的关键在于利用 Object.defineProperty , 但具体又是如何实现的呢,今天我们来一探究竟。
热门问答
- vue3怎么引入一个完整的html页面,包括里面的css和js
- vue3 v-for动态绑定ref问题
- vue在使用elementui标签的时候,为啥有的属性必须前面必须加“:”,有的却不用加?
- vue的动态组件component传参
- vue 路由如何让 404 页面跳外站?
- 如何使用vue写一个顶部菜单和侧边栏菜单并用npm发包
- vue3.0 项目中该如何使用百度地图BMapLib等开源库?如何导入引用呢?
- vue部署到服务器上,不是服务器根目录如何配置
- Vue3中如何进行变量的拼接
- vue router 中组件,规则,路径命名一致,开发者工具却找不到路由规则
推荐课程
内容介绍:
- Vue 3.0的新变化
- 开发团队的设计思路(为什么会有这些变化)
- 我们应该怎么准备
PS:大家想看哪些方面的技术内容,可以在评论区留言喔 ~
如有问题可以添加小姐姐微信~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。