我的编程空间,编程开发者的网络收藏夹
学习永远不晚

提高开发效率和性能的Vue技巧有哪些

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

提高开发效率和性能的Vue技巧有哪些

本篇内容主要讲解“提高开发效率和性能的Vue技巧有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“提高开发效率和性能的Vue技巧有哪些”吧!

提高开发效率和性能的Vue技巧有哪些

1. 巧用$attrs$listeners

$attrs用于记录从父组件传入子组件的所有不被props捕获以及不是classstyle的参数,而$listeners用于记录从父组件传入的所有不含.native修饰器的事件。

那下面的代码作例子:

Vue.component('child', {  props: ['title'],  template: '<h4>{{ title }}</h4>'})new Vue({  data:{a:1,title:'title'},  methods:{    handleClick(){      // ...    },    handleChange(){      // ...    }  },  template:'    <child class="child-width" :a="a" b="1" :title="title" @click.native="handleClick" @change="handleChange">',})

则在<child/>在中

  • attrs的值为{a:1,b:"1"}

  • listeners的值为{change: handleChange}

通常我们可以用$attrs$listeners作组件通信,在二次封装组件中使用时比较高效,如:

Vue.component("custom-dialog", {  // 通过v-bind="$attrs"和v-on="$listeners"把父组件传入的参数和事件都注入到el-dialog实例上  template: '<el-dialog v-bind="$attrs" v-on="$listeners"></el-dialog>',});new Vue({  data: { visible: false },  // 这样子就可以像在el-dialog一样用visible控制custom-dialog的显示和消失  template: '<custom-dialog :visible.sync="visible">',});

再举个例子:

Vue.component("custom-select", {  template: `<el-select v-bind="$attrs" v-on="$listeners">    <el-option value="选项1" label="黄金糕"/>    <el-option value="选项2" label="双皮奶"/>  </el-select>`,});new Vue({  data: { value: "" },  // v-model在这里其实是v-bind:value和v-on:change的组合,  // 在custom-select里,通过v-bind="$attrs" v-on="$listeners"的注入,  // 把父组件上的value值双向绑定到custom-select组件里的el-select上,相当于<el-select v-model="value">  // 与此同时,在custom-select注入的size变量也会通过v-bind="$attrs"注入到el-select上,从而控制el-select的大小  template: '<custom-select v-model="value" size="small">',});

2. 巧用$props

$porps用于记录从父组件传入子组件的所有被props捕获以及不是classstyle的参数。如

Vue.component('child', {  props: ['title'],  template: '<h4>{{ title }}</h4>'})new Vue({  data:{a:1,title:'title'},  methods:{    handleClick(){      // ...    },    handleChange(){      // ...    }  },  template:'    <child class="child-width" :a="a" b="1" :title="title">',})

则在<child/>在中,$props的值为{title:'title'}$props可以用于自组件和孙组件定义的props都相同的情况,如:

Vue.component('grand-child', {  props: ['a','b'],  template: '<h4>{{ a + b}}</h4>'})// child和grand-child都需要用到来自父组件的a与b的值时,// 在child中可以通过v-bind="$props"迅速把a与b注入到grand-child里Vue.component('child', {  props: ['a','b'],  template: `  <div>    {{a}}加{{b}}的和是:    <grand-child v-bind="$props"/>  </div>  `})new Vue({  template:'    <child class="child-width" :a="1" :b="2">',})

3. 妙用函数式组件

函数式组件相比于一般的vue组件而言,最大的区别是非响应式的。它不会监听任何数据,也没有实例(因此没有状态,意味着不存在诸如createdmounted的生命周期)。好处是因只是函数,故渲染开销也低很多。

把开头的例子改成函数式组件,代码如下:

<script>  export default {    name: "anchor-header",    functional: true, // 以functional:true声明该组件为函数式组件    props: {      level: Number,      name: String,      content: String,    },    // 对于函数式组件,render函数会额外传入一个context参数用来表示上下文,即替代this。函数式组件没有实例,故不存在this    render: function (createElement, context) {      const anchor = {        props: {          content: String,          name: String,        },        template: '<a :id="name" :href="`#${name}`"> {{content}}</a>',      };      const anchorEl = createElement(anchor, {        props: {          content: context.props.content, //通过context.props调用props传入的变量          name: context.props.name,        },      });      const el = createElement(`h${context.props.level}`, [anchorEl]);      return el;    },  };</script>

4. 妙用 Vue.config.devtools

其实我们在生产环境下也可以调用vue-devtools去进行调试,只要更改Vue.config.devtools配置既可,如下所示:

// 务必在加载 Vue 之后,立即同步设置以下内容// 该配置项在开发版本默认为 `true`,生产版本默认为 `false`Vue.config.devtools = true;

我们可以通过检测cookie里的用户角色信息去决定是否开启该配置项,从而提高线上 bug 查找的便利性。

5. 妙用 methods

Vue中的method可以赋值为高阶函数返回的结果,例如:

<script>  import { debounce } from "lodash";  export default {    methods: {      search: debounce(async function (keyword) {        // ... 请求逻辑      }, 500),    },  };</script>

上面的search函数赋值为debounce返回的结果,也就是具有防抖功能的请求函数。这种方式可以避免我们在组件里要自己写一遍防抖逻辑。

这里有个例子sandbox,大家可以点进去看看经过高阶函数处理的method与原始method的效果区别

除此之外,method还可以定义为生成器,如果我们有个函数需要执行时很强调顺序,而且需要在data里定义变量来记录上一次的状态,则可以考虑用生成器。

例如有个很常见的场景:微信的视频通话在接通的时候会显示计时器来记录通话时间,这个通话时间需要每秒更新一次,即获取通话时间的函数需要每秒执行一次,如果写成普通函数则需要在data里存放记录时间的变量。但如果用生成器则能很巧妙地解决,如下所示:

<template>  <div id="app">    <h4>{{ timeFormat }}</h4>  </div></template><script>  export default {    name: "App",    data() {      return {        // 用于显示时间的变量,是一个HH:MM:SS时间格式的字符串        timeFormat: "",      };    },    methods: {      genTime: function* () {        // 声明存储时、分、秒的变量        let hour = 0;        let minute = 0;        let second = 0;        while (true) {          // 递增秒          second += 1;          // 如果秒到60了,则分加1,秒清零          if (second === 60) {            second = 0;            minute += 1;          }          // 如果分到60了,则时加1,分清零          if (minute === 60) {            minute = 0;            hour += 1;          }          // 最后返回最新的时间字符串          yield `${hour}:${minute}:${second}`;        }      },    },    created() {      // 通过生成器生成迭代器      const gen = this.genTime();      // 设置计时器定时从迭代器获取最新的时间字符串      const timer = setInterval(() => {        this.timeFormat = gen.next().value;      }, 1000);      // 在组件销毁的时候清空定时器和迭代器以免发生内存泄漏      this.$once("hook:beforeDestroy", () => {        clearInterval(timer);        gen = null;      });    },  };</script>

但需要注意的是:method 不能是箭头函数

注意,不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined

6. 妙用 watch 的数组格式

很多开发者会在watch中某一个变量的handler里调用多个操作,如下所示:

<script>  export default {    data() {      return {        value: "",      };    },    methods: {      fn1() {},      fn2() {},    },    watch: {      value: {        handler() {          fn1();          fn2();        },        immediate: true,        deep: true,      },    },  };</script>

虽然fn1fn2都需要在value变动的时候调用,但两者的调用时机可能不同。fn1可能仅需要在deepfalse的配置下调用既可。因此,Vuewatch的值添加了Array类型来针对上面所说的情况,如果用watchArray的写法处理可以写成下面这种形式:

<script>  watch:{      'value':[          {              handler:function(){                  fn1()              },              immediate:true          },          {              handler:function(){                  fn2()              },              immediate:true,              deep:true          }      ]  }</script>

7. 妙用$options

$options是一个记录当前Vue组件的初始化属性选项。通常开发中,我们想把data里的某个值重置为初始化时候的值,可以像下面这么写:

this.value = this.$options.data().value;

这样子就可以在初始值由于需求需要更改时,只在data中更改即可。

这里再举一个场景:一个el-dialog中有一个el-form,我们要求每次打开el-dialog时都要重置el-form里的数据,则可以这么写:

<template>  <div>    <el-button @click="visible=!visible">打开弹窗</el-button>    <el-dialog @open="initForm" title="个人资料" :visible.sync="visible">      <el-form>        <el-form-item label="名称">          <el-input v-model="form.name"/>        </el-form-item>        <el-form-item label="性别">          <el-radio-group v-model="form.gender">            <el-radio label="male">男</el-radio>            <el-radio label="female">女</el-radio>          </el-radio-group>        </el-form-item>      </el-form>    </el-dialog>  </div></template><script>export default {  name: "App",  data(){    return {      visible: false,      form: {        gender: 'male',        name: 'wayne'      }    }  },  methods:{    initForm(){      this.form = this.$options.data().form    }  }};</script>

每次el-dialog打开之前都会调用其@open中的方法initForm,从而重置form值到初始值。

如果要重置data里的所有值,可以像下面这么写:

Object.assign(this.$data, this.$options.data());// 注意千万不要写成下面的样子,这样子就更改this.$data的指向。使得其指向另外的与组件脱离的状态this.$data = this.$options.data();

8. 妙用 v-pre,v-once

v-pre

v-pre用于跳过被标记的元素以及其子元素的编译过程,如果一个元素自身及其自元素非常打,而又不带任何与Vue相关的响应式逻辑,那么可以用v-pre标记。标记后效果如下:

提高开发效率和性能的Vue技巧有哪些

v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

对于部分在首次渲染后就不会再有响应式变化的元素,可以用v-once属性去标记,如下:

<el-select>  <el-option    v-for="item in options"    v-once    :key="item.value"    :label="item.label"    :value="item.value"    >{{i}}</el-option  ></el-select>

如果上述例子中的变量options很大且不会再有响应式变化,那么如例子中用上v-once对性能有提升。

9. 妙用 hook 事件

如果想监听子组件的生命周期时,可以像下面例子中这么做:

<template>  <child @hook:mounted="removeLoading" /></template>

这样的写法可以用于处理加载第三方的初始化过程稍漫长的子组件时,我们可以加loading动画,等到子组件加载完毕,到了mounted生命周期时,把loading动画移除。

初次之外hook还有一个常用的写法,在一个需要轮询更新数据的组件上,我们通常在created里开启定时器,然后在beforeDestroy上清除定时器。而通过hook,开启和销毁定时器的逻辑我们都可以在created里实现:

<script>  export default {    created() {      const timer = setInterval(() => {        // 更新逻辑      }, 1000);      // 通过$once和hook监听实例自身的beforeDestroy,触发该生命周期时清除定时器      this.$once("hook:beforeDestroy", () => {        clearInterval(timer);      });    },  };</script>

像上面这种写法就保证了逻辑的统一,遵循了单一职责原则。

到此,相信大家对“提高开发效率和性能的Vue技巧有哪些”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

提高开发效率和性能的Vue技巧有哪些

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

提高开发效率和性能的Vue技巧有哪些

本篇内容主要讲解“提高开发效率和性能的Vue技巧有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“提高开发效率和性能的Vue技巧有哪些”吧!1. 巧用$attrs和$listeners$att
2023-07-02

提高效率的Linux技巧有哪些

这篇文章将为大家详细讲解有关提高效率的Linux技巧有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。命令编辑如果要对一个已输入的命令进行修改,可以使用 ^a(ctrl + a)或 ^e(ctrl +
2023-06-16

提升前端开发效率的CSS技巧有哪些

今天小编给大家分享一下提升前端开发效率的CSS技巧有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1. 解决图片5px间
2023-07-05

提高Linux管理效率的技巧有哪些

这篇文章主要为大家展示了“提高Linux管理效率的技巧有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“提高Linux管理效率的技巧有哪些”这篇文章吧。技巧 1:卸载无响应的 DVD 驱动器网
2023-06-16

Vue开发中的性能优化技巧有哪些

这篇文章将为大家详细讲解有关Vue开发中的性能优化技巧有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 长列表性能优化1. 不做响应式比如会员列表、商品列表之类的,只是纯粹的数据展示,不会有任何动
2023-06-29

优化Vue开发中的性能技巧有哪些

这篇文章主要介绍了优化Vue开发中的性能技巧有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇优化Vue开发中的性能技巧有哪些文章都会有所收获,下面我们一起来看看吧。1. 长列表性能优化1. 不做响应式比如会
2023-06-29

提高效率的Java代码小技巧有哪些

提高效率的Java代码小技巧有哪些,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。前言代码优化 ,一个很重要的课题。可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改
2023-06-16

15个提高 Javascript 开发效率的技巧

在文章中,我将分享15 个关于JavaScript 的优秀技巧。这些技巧或者你可能已经掌握了,不过没有关系,这个技巧也不可能适用所有人,我分享的目的是把这些有趣好玩又便捷的技巧让更多人知道,以及在需要的时候,可以想到它们。

提高效率的Vue指令有哪些

这篇文章主要介绍了提高效率的Vue指令有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇提高效率的Vue指令有哪些文章都会有所收获,下面我们一起来看看吧。v-model相信大家对v-model并不陌生,简单来
2023-06-30

Python开发经验总结:提高开发效率的技巧和工具

Python开发经验总结:提高开发效率的技巧和工具在当今快节奏的软件开发环境中,提高开发效率成为了每个开发者都关注的重点。作为一种功能强大且易学易用的编程语言,Python在软件开发领域中日益受到青睐。本文将总结一些提高Python开发效率
Python开发经验总结:提高开发效率的技巧和工具
2023-11-22

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录