景安微信
网站有问题
老雷来帮忙
景安网络 欢迎来到景安网络虚拟主机资讯站!
免费主机国内主机
国内主机
0元购买
原价99元/年 我想领取
QQ群
快云体验交流群

群名称:快云体验群

群   号:288544772

一键加群 快云体验交流群
公众号
快云官方微信

扫码关注公众号您可以:

1、微信一键登录会员;

2、微信提交故障工单;

3、微信查询网站备案。

回顶部
虚拟主机

首页 > 网络教程 > 不可错过的 vue 开发技巧

不可错过的 vue 开发技巧

来源:未知

作者:hanlei

更新时间:2019-08-02 16:07

景安网络—专业的数据中心服务商!提供快云服务器,快云VPS,虚拟主机,域名注册,服务器托管,服务器租用,SSL证书,数据库存储。 2019快云上云特惠季 立即注册

在v-if/v-if-else/v-else中使用key

如果一组v-if 与v-else的元素类型相同,最好使用属性key。这是因为Vue2.0引入虚拟DOM,为了避免不必要的DOM操作,虚拟DOM在虚拟节点映射到视图过程中,将虚拟节点与上一次渲染视图所使用的旧虚拟节点做对比,找出真正需要更新的节点来进行DOM操作。但有时如果两个本不相同的节点被识别为相同,便会出现意料之外的问题。我们看下面的一个例子:

如果添加了属性key,那么在对比虚拟DOM时,则会认为它们是两个不同的节点,于是会将旧元素移除并在相同位置添加新元素,从而避免漏洞的出现。

v-for循环中不要使用index作为key

我们会给列表渲染设置属性key,这个key属性主要用在虚拟DOM算法上,在对比新旧虚拟节点时辨识虚拟节点。但如果key用得不合理,就会出现bug,比如我们使用index作为key(见下面例子),核心代码如下:

上例中,我们想删除第二个输入框,却误删了第三个输入框,这因为当使用splice()方法删除数组的某个元素时数组的index会被重新索引,造成数组的最后一个index丢失,从而会使虚拟DOM的最后一个结点(key)丢失,造成无论删除哪个结点都会误删除最后一个结点的bug。但如果我们使用传入的key作为key,就可以避免这种问题出现。

简单暴力的router key

 

我们在项目开发时,可能会遇到这样问题:当页面切换到同一个路由但不同参数地址时,比如/detail/1,跳转到/detail/2,页面跳转后数据竟然没更新?路由配置如下:

这是因为vue-router会识别出两个路由使用的是同一个组件从而进行复用,并不会重新创建组件,而且组件的生命周期钩子自然也不会被触发,导致跳转后数据没有更新。那我们如何解决这个问题呢? 我们可以为router-view组件添加属性key,例子如下:

这种办法主要是利用虚拟DOM在渲染时候通过key来对比两个节点是否相同,如果key不相同,就会判定router-view组件是一个新节点,从而先销毁组件,然后再重新创建新组件,这样组件内的生命周期会重新触发。

路由懒加载

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 配合webpack支持的路由懒加载方法有:
这种方法比较通用,而且支持性好

这种写法是官方文档推荐的,如下:

接下来我们以官方文档的写法为例,对比这两种写法:

推荐以下写法,路由懒加载可以帮我们在进入首屏时不用加载过多的资源,从而减少首屏加载速度。

不要在使用v-for的同一元素上使用v-if

Vue官方文档强烈建议永远不要把 v-if 和 v-for 同时用在同一个元素上。一般我们在两种常见的情况下会倾向于这样做:

1)为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下,请将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表(见下面例子)。

当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,所以哪怕我们只渲染出一小部分用户的元素,也得在每次重渲染的时候遍历整个列表,不论活跃用户是否发生了变化。我们可通过将其更换为在如下的一个计算属性上遍历:

2)为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下,请将 v-if 移动至容器元素上 (比如 ul, ol)(见下面例子)。

更新为:

过滤器让数据处理更便利

Vue.js 允许你自定义过滤器,它的用法其实是很简单,但是可能有些朋友没有用过,接下来我们介绍下:

1.理解过滤器

  • 功能:对要显示的数据进行特定格式化后再显示。

  • 注意:过滤器并没有改变原本的数据,需要对展现的数据进行包装。

  • 使用场景:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

2.定义过滤器

 

可以在一个组件的选项中定义本地的过滤器:

也可以在创建 Vue 实例之前全局定义过滤器:

3.使用过滤器

使用方法也简单,即在双花括号中使用管道符(pipeline) |隔开:

接下来我们看个如何使用过滤器格式化日期的例子:

能用computed的尽量用computed代替 watch

很多时候页面会出现 watch 的滥用而导致一系列问题的产生,而通常更好的办法是使用 computed 属性,先从一张图区别它们有什么区别?

从上面流程图中,我们可以看出它们之间的区别:

  • watch:监测的是属性值, 只要属性值发生变化,其都会触发执行回调函数来执行一系列操作。

  • computed:监测的是依赖值,依赖值不变的情况下其会直接读取缓存进行复用,变化的情况下才会重新计算。

除此之外,有点很重要的区别是:计算属性不能执行异步任务,计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务,就交给侦听属性。watch也可以检测computed属性。总而言之,两者的区别归纳为以下两句话:

  • computed能做的,watch都能做,反之则不行

  • 能用computed的尽量用computed

为啥提倡使用 computed 代替 watch,这是因为有时候可以实现同样的效果,而 computed 会更胜一筹,比如在处理多数据联动的情况下,使用 computed 会更加合理一点。

化繁为简的Watchers

 

如果我们需要在组件初始化以及侦听属性变化时调用同一个方法,通常的做法像下面这样:

尽管上面这段代码看起来没什么问题,但created钩子里面执行的方法是多余的。我们可以把所需要执行的方法放到watch里面,避免在created钩子里写重复代码,那将会在组件实例化的时候触发多一次。 那如何优化呢?代码如下:

本文链接:http://host.zzidc.com/wljc/1922.html

关键字:

若无特别注明,文章皆为景安网络原创,转载请注明出处。

上云HI购