一些Vue开发小技巧

下面我们来看一些vue开发小技巧:

一、状态共享

使用Vue进行开发时,随着项目的复杂化,组件个数也逐渐增加,此时我们就面临着一个问题——多组件状态共享。也许有人说这不是啥问题,Vuex就可以解决啊。

是的,Vuex可以解决多组件状态共享的问题,但是如果此时我们的项目没有那么大那么复杂,还要使用Vuex来解决这个问题吗?答案是否定的,因为这会导致代码繁琐冗余。

那该怎么办?其实我们还可以通过vue.js2.6版本新增的Observable API来解决这个问题。

示例1:Observable实现多组件状态共享

a) 创建一个 store.js,包含一个store和一个mutations,分别用来指向数据和处理方法。

1.jpg

b) 在 App.vue里面引入这个 store.js,使用引入的数据和方法。

2.jpg

二、长列表性能优化

Vue会通过劫持我们的数据,进而实现视图响应数据的变化。但有时候我们的数据不需要发生变化,只是纯粹的数据展示,此时Vue再进行数据劫持会大大增加组件初始化时间。此时我们可以使用object.freeze方法来阻止vue劫持数据,进而减少组件初始化时间。

示例2:object.freeze方法冻结users值

3.jpg

注意:object.freeze方法冻结的只是users的值,其引用并未被冻结。

三、作用域插槽

所谓的作用域插槽,就是父组件在调用子组件时给子组件传输一个插槽,且该插槽必须放在template标签里边,同时声明从子组件接收的数据放在一个自定义属性内,并定义该数据的渲染方式。

那作用域插槽有什么用处呢?

比如项目中有一个A组件只负责布局不管数据逻辑,另一个B组件负责数据处理,A组件需要数据的时候就去B组件中取。那当开发过程中我们的布局发生变化时,我们只需要修改A组件即可,而不需要修改B组件,这样就能充分复用B组件的数据逻辑处理。

那了解了作用域插槽的用处,接下来我们通过一个简单的小例子给大家讲解作用域插槽的使用方式。

示例3:使用slot、slot-scope实现作用域插槽

a) 创建一个user.vue组件,将user数据绑定在<slot>元素上

4.jpg

b) 在父组件中引用 user组件,展示user数据的firstName数据,此时给 v-slot带一个值来定义我们提供的插槽 prop 的名字:

5.jpg

四、属性事件传递

学过react的同学应该都知道react中的{…this.props}可以一次性传递属性。那在vue中有没有这个功能呢?当属性较多时,不需要我们一个个去传递?答案就是vue中的v-bind和v-on。

示例4:v-bind&v-on实现属性事件传递

BaseList组件只有基础的列表展示功能,此时需要为其增加排序功能。

a) 创建一个高阶组件SortList

5.jpg

五、函数式组件

函数式组件是一种stateless和instanceless的组件,它内部没有生命周期处理方式,因而非常轻量,渲染性极高,当需要创建的组件只需要根据外部数据的变化而变化时,就可以将其创建为函数式组件。

写法如下:

l 在 template标签里面标明 functional

l 只接受 props值

l 不需要 script标签

示例5:创建函数

6.JPG

7.jpg

Image placeholder
前端答疑
未设置
  25人点赞

没有讨论,发表一下自己的看法吧

推荐文章
用vscode开发react用哪些插件

用vscode开发react用哪些插件1.代码提示类插件1.1Reactjscodesnippets1.2ReactReduxES6Snippets1.3React-Native/React/Redu

VIM教程_一些小技巧

简单设置Vim “工欲善其事,必先利其器”。尽管Vim非常强大,但默认配置的Vim看起来还是比较朴素的,为了适合我们的开发需求,要对Vim进行一些简单的配置。 :setnumber显示行号 :setr

一位从卖猪肉转行到前端开发小哥的自我救赎

一位曾经卖过猪肉的前端小哥自我救赎之路来自微信公众号:前端巅峰  的交流群真实采访花名:**郑伊健**一、你为什么要给自己取一个郑伊健的花名,有什么特殊含义特殊含义倒是没有,取这个花名,只是因为觉得郑

分享 10 个你可能不知道的 Laravel Eloquent 小技巧

Laravel是一个功能丰富的框架。但是,你无法从官方文档中找到所有可用的功能。以下是一些你可能不知道的功能。 1.获取原始属性 当修改一条Eloquent模型记录的时候你可以通过调用getOrig

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

Vuex的一些常用知识点介绍

一、为什么要使用Vuex1、多个组件依赖同一个状态,使用组件之间通信方法会非常繁琐,例如多层嵌套组件。2、需要全局保存的数据,例如用户、权限信息,全局系统设置二、Vuex的五个核心属性1、state:

avue和vue是什么关系?

Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,

Vue命令行工具vue-cli详解

本文将详细介绍Vue命令行工具vue-cli。概述Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cli有以下几大优势1、Vue-cli是一套成熟的vue项目架构设计,会

vue1和vue2的区别是什么?

vue1和vue2的区别模板v2每个组件只允许有一个根元素,v1允许一个组件有多个根元素生命周期函数vue1.0周期解释init组件刚刚被创建,但Data、method等属性还没被计算出来create

vue 生成二维码插件 vue-qrcode

链接地址生成二维码安装https://www.npmjs.com/package...npm install --save qrcode.vue在组件中引入 importQrcodeVuefrom

vue源码解读(四)Vue中的异步更新策略

欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了6篇啦~https://github.com/yisha0307/...快速跳转: Vue的双向绑定原理(已完成) 说说vu

eclipse可以开发vue吗?

CodeMix是Eclipse的一款插件,它解锁了VSCode和CodeOSS附加扩展的各种技术,支持各种语言,具有Webclipse中您最喜欢的功能(包括带有LivePreview的Terminal

vue项目开发必须要搭脚手架么?

vue是一个渐进式的前端框架,渐进式也就意味着你可以在使用过程中,引入自己需要的一系列外部资源。这也就意味着,你可以自己搭建自己的框架,如果不用vue-cli,你可以自己搭建开发框架,需要vuex、需

分享一个可视化开发vue框架下的各类ui的web在线表单设计布局器

新手发帖,第一次不小心刷新了一下就没了本人刚入门vue,偶然间发现这款布局器挺好的,可视化开发element所以分享给大家网站地址:http://lowcode.magicalcoder.c...嵌入

使用 jQuery 触发 Vue 事件

时间一长老是忘记这行代码的写法,今天特地记上一笔,方便今后查阅 js文件如下document.save.dispatchEvent(newEvent('无此事件'))//触发不存在的事件不会报错 do

jquery和vue的区别是什么?

jquery和vue的区别是什么?●jquery是直接操作DOM;使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作;和原生的js区别只在于可以更方便的选取和操作DOM对象;数据和界面

vuejs和jquery的区别是什么?

vuejs和jquery的区别1、jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作2、Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值

vue和jquery之间有什么区别?

首先我们来了解一下jquery和vue是什么?Vue是什么?Vue.js是一个前端JavaScript框架,用于构建用户界面。它是开源的。当使用其他JavaScript库时,它还可以用作集成工具。它本

vue与jquery的区别是什么?

vue与jquery的区别是什么?vue和jquey的对比:jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DO

MySQL 中 JSON 字段的使用技巧

mysql5.7.8之后开始原生支持json.在类似mongodb这种nosql数据库中,json存储数据是非常自然的,在mysql中合理的使用json,能够带来极大的便利 Json字段的使用场景 在

你不知道的 PHP 缓存技巧

前言 相信有一定开发经验的PHP程序员都有缓存的使用经验,包括但不限于redis缓存,模板缓存,路由缓存,配置缓存,数据库缓存,还有opcache(真的很有用),但是今天我不准备炒冷饭了,我要讲点你不

分享 6 个 Go 处理字符串的技巧

如果你从Ruby或者Python转型到Go,将会有很多语言差异需要学习,其中很多问题都是围绕处理string类型。下面是一些字符串的技巧,这些技巧解决了我在使用Golang的最初几周中遇到的问题。

[PHP 技巧] 不要直接克隆对象,请使用深拷贝

声明:这篇文章的目的并不是让你停止使用clone关键字,而是让你作进一步理解它的用法,因为这部分的文档介绍不够清楚。 众所周知,PHP的clone关键字用于克隆对象的所有属性。其背后的原理在于默认创

iOS 核心动画高级技巧 - 1

1.图层树图层的树状结构 巨妖有图层,洋葱也有图层,你有吗?我们都有图层--史莱克 CoreAnimation其实是一个令人误解的命名。你可能认为它只是用来做动画的,但实际上它是从一个叫做LayerK

分享个人珍藏的 Git 使用技巧

Besidesthe"basic"commandsofGit,everyonehastheirownlittleGittrickstheyuse.Iwantedtoquicklywrit