vue string转date_进阶高级前端,这9种Vue技术你掌握了吗?
现在,Vue.js已成为前端开发的热门框架。有很多工程师利用Vue.js的便利性和强大功能。但是,我们完成的某些解决方案可能未遵循最佳做法。好吧,让我们看一下那些必备的Vue技术。
来源:公众号《前端全栈开发者》
1. 函数组件
函数组件是无状态的,没有生命周期或方法,因此无法实例化
创建一个函数组件非常容易,你需要做的就是在SFC中添加一个 functional: true 属性,或者在模板中添加 functional。由于它像函数一样轻巧,没有实例引用,所以渲染性能提高了不少。
函数组件依赖于上下文,并随着其中给定的数据而突变。
{{props.book.name}} {{props.book.price}}
2.深层选择器
有时,你需要修改第三方组件的CSS,这些都是 scoped 样式,移除 scope 或打开一个新的样式是不可能的。
现在,深层选择器 >>> /deep/ ::v-deep 可以帮助你。
3.高级“watcher”
/ 立即执行 /
当被监控的prop发生突变时,watch handler就会触发。但有时,它是在组件被创建后才出现的。
是的,有一个简单的解决方案:在 created 的钩子中调用处理程序,但这看起来并不优雅,同时也增加了复杂性。
或者,你可以向观察者添加 immediate 属性:
watch: { value: { handler: 'printValue', immediate: true }},methods : { printValue () { console.log(this.value) }}
/ 深度监听 /
有时,watch 属性是一个对象,但是其属性突变无法触发 wacher 处理程序。在这种情况下,为观察者添加 deep:true 可以使其属性的突变可检测到。
请注意,当对象具有多个层时,深层可能会导致一些严重的性能问题。最好考虑使用更扁平的数据结构。
data () { return { value: { one: { two: { three: 3 } } } }},watch: { value: { handler: 'printValue', deep: true }},methods : { printValue () { console.log(this.value) }}
/ 多个handlers /
实际上,watch 可以设置为数组,支持的类型为 String、Function、Object。触发后,注册的watch处理程序将被一一调用。
watch: { value: [ 'printValue', function (val, oldVal) { console.log(val) }, { handler: 'printValue', deep: true } ]},methods : { printValue () { console.log(this.value) }}
/ 订阅多个变量突变 /
watcher 不能监听多个变量,但我们可以将目标组合在一起作为一个新的 computed,并监视这个新的 "变量"。
computed: { multipleValues () { return { value1: this.value1, value2: this.value2, } }},watch: { multipleValues (val, oldVal) { console.log(val) }}
4.事件参数:$event
$event 是事件对象的一个特殊变量。它在某些场景下为复杂的功能提供了更多的可选参数。
/ 原生事件 /
在原生事件中,该值与默认事件(DOM事件或窗口事件)相同。
/ 自定义事件 /
在自定义事件中,该值是从其子组件中捕获的值。
5.路由器参数解耦
我相信这是大多数人处理组件中路由器参数的方式:
export default { methods: { getRouteParamsId() { return this.$route.params.id } }}
在组件内部使用 $route 会对某个URL产生强耦合,这限制了组件的灵活性。
正确的解决方案是向路由器添加props。
const router = new VueRouter({ routes: [{ path: '/:id', component: Component, props: true }]})
这样,组件可以直接从props获取 params。
export default { props: ['id'], methods: { getParamsId() { return this.id } }}
此外,你还可以传入函数以返回自定义 props。
const router = new VueRouter({ routes: [{ path: '/:id', component: Component, props: router => ({ id: route.query.id }) }]})
6.自定义组件的双向绑定
允许自定义组件在使用 v-model 时自定义使props和event。默认情况下,组件上的v-model使用value作为属性,Input作为事件,但一些输入类型,如复选框和单选按钮可能希望使用value属性来实现不同的目的。在这种情况下,使用model选项可以避免冲突。
v-model 是众所周知的双向绑定。input 是默认的更新事件。可以通过 $emit 更新该值。唯一的限制是该组件需要 标记才能与 value 属性绑定。
双向绑定还有另一种解决方案,即 sync 修饰符。与 v-model 不同的是,它不需要你的组件有一个 标签并将值绑定到它上面。它仅触发 update: 通过事件系统对属性进行突变。
7.组件生命周期 Hook
通常,你可以像这样监听子组件的生命周期(例如 mounted)
还有另一种简单的解决方案,你可以改用 @hook:mount 在Vue内部系统中使用。
8.事件监听APIs
比如,在页面挂载时增加一个定时器,但销毁时需要清除定时器。这看起来不错。
坦白地说,只有在 beforeDestroy 中使用 this.timer 来获取计时器ID才有意义。并非刻薄,而是变量越少,性能越好。
export default { data () { return { timer: null } }, mounted () { this.timer = setInterval(() => { console.log(Date.now()) }, 1000) }, beforeDestroy () { clearInterval(this.timer) }}
使其只能在生命周期钩子内访问。使用 $once 来放弃不必要的东西。
export default { mounted () { let timer = null timer = setInterval(() => { console.log(Date.now()) }, 1000) this.$once('hook:beforeDestroy', () => { clearInterval(timer) }) }}
9.以编程方式挂载组件
在某些情况下,以编程方式加载组件要优雅得多。例如,可以通过全局上下文 $popup() 或 $modal.open() 打开弹出窗口或模态窗口。
import Vue from 'vue'import Popup from './popup'const PopupCtor = Vue.extend(Popup)const PopupIns = new PopupCtr()PopupIns.$mount()document.body.append(PopupIns.$el)Vue.prototype.$popup = Vue.$popup = function () { PopupIns.open()}
Element UI 实现了结构良好的模式组件,该组件允许使用自定义API来控制实例的生命周期。该理论与我上面演示的几乎相同。
这是有关Vue 2.x的9种技术,希望在本文中你可以对使用框架有更好的了解。如果你认为本文很棒,请在其他社交网络上分享。
如果对你有所启发和帮助,可以点个关注、收藏、转发,也可以留言讨论,这是对作者的最大鼓励。
作者简介:Web前端工程师,全栈开发工程师、持续学习者。
私信回复:大礼包,送某网精品视频课程网盘资料,准能为你节省不少钱!
vue string转date_进阶高级前端,这9种Vue技术你掌握了吗?相关推荐
- 《Vue》聊一聊实际项目中前端的几种皮肤实现和优缺点
前言 在现代大前端领域中,换肤功能已经逐渐成为几乎所有应用的标配,尤其是暗夜模式被推广之后,皮肤功能就正式走到了大众的视野,同样,在web领域尤其是后台管理系统中皮肤功能也由此几乎成为了标配,恰好最近 ...
- 初级前端到高级前端的进阶之路
如今,经济整体呈现走低的情形下,已经不再像以往那样好找工作了,前端岗位也不例外,这一点相信大家都有所体会,特别是求职者和招聘者两方人马各找各的的现象,更是令大伙满腹牢骚. 导致这种情况出现的原因是多方 ...
- Vue入门之Web端CURD前端项目示例
Vue入门之Web端CURD前端项目示例 随着vue.js越来越火,很多不太懂前端的小伙伴想要入坑.而入坑最好的办法就是上手实际操作,因此本文将重点放在实际操作上,对理论不做过多解释,不明白的地方小伙 ...
- 2021年高级前端进阶之路
YYDS 2021年高级前端进阶之路1.两边固定,中间自适应布局(1.用flex;2.用display:left;3.用相对定位和绝对定位结合)2.js判断字符串中出现次数最多的字符(1.用for循环 ...
- 高级前端软件工程师知识整理之Vue技术栈篇
1. 什么是MVVM? MVVM是Model-View-ViewModel的简写,它本质上就是MVC的改进版.MVVM就是将View的状态和行为抽象化,将视图UI和业务逻辑分开,View和Model之 ...
- 前端进阶试题css(来自js高级前端开发---豪情)既然被发现了HOHO,那我就置顶了嘿嘿!觉得自己技术OK的可以把这套题目做完哦,然后加入高级前端的社区咯...
http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...
- 前端进阶(三) webpack处理vue以及vue-cli脚手架环境
webpack处理vue 安装 vue yarn add vue vue单文件组件 single-file components(单文件组件) ,文件扩展名为 .vue 的文件,需要安装vetur插件 ...
- 高级前端程序员和初级前端程序员的区别
简单的来说,初级程序员和高级程序员的差别是: 初级多在写代码,高级多在设计代码: 初级多在解决一个问题,高级多在解决一类问题: 初级多在考虑技术问题,高级还要参与业务上的需求: 初级工程师只管接需求, ...
- 2023前端二面高频vue面试题集锦
vuex是什么?怎么使用?哪种功能场景使用它? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.vuex 就是一个仓库,仓库里放了很多对象.其中 state 就是数据源存放地,对应于一 ...
- 最近面试高级前端工程师的一些感受
我最近面了一个前端开发,4 年经验, 应聘的是前端高级开发工程师. 他的简历中提到很多技术点,从 HTML.CSS.JavaScript 再到 Vue.js 和 React 一个都不缺,跨平台PC.移 ...
最新文章
- FreeBSD控制台分辨率调整
- MapReduce程序的运行全貌
- ntp服务器查看状态命令ntpstat及ntpq -p 说明及差别详解
- html5外置样式表,HTML5移动端通用css详解
- 适用于树莓派Raspberry Pi的嵌入式QT平台(二) -- 在Windows下用Qt Creator开发编译Raspberry Qt 5应用程序...
- 蓝桥杯 ADV-121 算法提高 高精度加法
- 初级测试如何快速成长和进步
- web自动化测试 Selenium2 Java自动化测试实战9_3
- 康熙字典收录多少汉字_《康熙字典》一共有多少个字
- 简述物联网感知技术_物联网中应用的感知技术
- 挖矿病毒入侵服务器(没有解决,重置服务器了)
- 怎么把b站的视频保存到本地
- 基于BIND实现智能DNS解析
- Linux printf Class.this git rebase Persistent Bugger
- ctf比赛涉及的方面以及所需知识
- saas平台相关内容
- Java高效率复习-面向对象下篇[Java]
- RGBD相机的标定和图像配准
- 幼师计算机课是上什么,幼师面试 鱼在天空飞,鸟在水里游是小班课程,还是中班,大班的课程...
- 关于SQL Server numeric数据类型介绍
热门文章
- 连载8:时域信号相乘相当于频域卷积
- UIActivityIndicatorView活动指示器(菊花)
- 小知识点(复制过来的)
- php 利用cookie实现访问次数统计
- CSDN邀请您成为技术中心特约作者
- (原文)基于甘特图的深度强化学习方法求解端到端在线重调度
- 远程摄像头软件mjpg-streamer使用指南
- python 绘图sns.distplot
- CRT链接ubuntu报错The remote system refused the connection
- 编译ok6410linux内核,OK6410新手学习心得(一)Linux中加入led驱动及测试程序详解...