总结vue知识体系之实用技巧

vue 作为目前前端三大框架之一,对于前端开发者可以说是必备技能。那么怎么系统地学习和掌握 vue 呢?为此,我做了简单的知识体系体系总结,不足之处请各位大佬多多包涵和指正,如果喜欢的可以点个小赞!本文主要讲述一些vue开发中的实用技巧。

相关推荐

总结vue 知识体系之基础入门篇

总结几个vue-router的使用技巧

搭建一个vue-cli的移动端H5开发模板

监听组件的生命周期

比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,常规的写法可能如下:

 // Parent.vue
<Child @mounted="doSomething"/>

// Child.vue
mounted() {
  this.$emit("mounted");
}

此外,还有一种特别简单的方式,子组件不需要任何处理,只需要在父组件引用的时候通过@hook 来监听即可,代码如下:

<Child @hook:mounted="doSomething" />
<Child @hook:updated="doSomething" />
复制代码

当然这里不仅仅是可以监听 mounted,其它的生命周期事件,例如:created,updated 等都可以。

watch 的初始立即执行

观察和响应 Vue 实例上的数据变动。类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作。

但是当 watch 一个变量的时候,初始化时并不会执行,如下面的例子,你需要在 created 的时候手动调用一次。

created() {
  this.getList();
},
watch: {
  keyWord: ‘getList‘,
}

上面这样的做法可以使用,但很麻烦,我们可以添加 immediate 属性,这样初始化的时候就会自动触发(不用再写 created 去调用了),然后上面的代码就能简化为:

watch: {
  keyWord: {
    handler: ‘getList‘,
    immediate: true
  }
}

watch 有三个参数

  • handler:其值是一个回调函数。即监听到变化时应该执行的函数
  • deep:其值是 true 或 false;确认是否深入监听。
  • immediate:其值是 true 或 false,确认是否以当前的初始值执行 handler 的函数

路由参数变化组件不更新

同一path的页面跳转时路由参数变化,但是组件没有对应的更新。

原因:主要是因为获取参数写在了created或者mounted路由钩子函数中,路由参数变化的时候,这个生命周期不会重新执行。

解决方案1:watch监听路由

watch: {
 // 方法1 //监听路由是否变化
  ‘$route‘ (to, from) {
   if(to.query.id !== from.query.id){
			this.id = to.query.id;
			this.init();//重新加载数据
		}
  }
}
//方法 2  设置路径变化时的处理函数
watch: {
‘$route‘: {
    handler: ‘init‘,
    immediate: true
  }
}

解决方案2 :为了实现这样的效果可以给router-view添加一个不同的key,这样即使是公用组件,只要url变化了,就一定会重新创建这个组件。

<router-view :key="$route.fullpath"></router-view>

路由懒加载

Vue 项目中实现路由按需加载(路由懒加载)的 3 中方式:

// 1、Vue异步组件技术:
	{
		path: ‘/home‘,
		name: ‘Home‘,
		component: resolve => reqire([‘path路径‘], resolve)
  }

// 2、es6提案的import()
  const Home = () => import(‘path路径‘)

// 3、webpack提供的require.ensure()
	{
		path: ‘/home‘,
		name: ‘Home‘,
		component: r => require.ensure([],() =>  r(require(‘path路径‘)), ‘demo‘)
	}

require.context()

require.context(directory,useSubdirectories,regExp)

  • directory:说明需要检索的目录
  • useSubdirectories:是否检索子目录
  • regExp: 匹配文件的正则表达式,一般是文件名

场景:如页面需要导入多个组件,原始写法:

import titleCom from ‘@/components/home/titleCom‘
import bannerCom from ‘@/components/home/bannerCom‘
import cellCom from ‘@/components/home/cellCom‘
components: {
  titleCom, bannerCom, cellCom
}

这样就写了大量重复的代码,利用 require.context 可以写成

const path = require(‘path‘)
const files = require.context(‘@/components/home‘, false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, ‘.vue‘)
  modules[name] = files(key).default || files(key)
})
components: modules

递归组件

  • 递归组件: 组件在它的模板内可以递归的调用自己,只要给组件设置 name 组件就可以了。
  • 不过需要注意的是,必须给一个条件来限制数量,否则会抛出错误: max stack size exceeded
  • 组件递归用来开发一些具体有未知层级关系的独立组件。比如:联级选择器和树形控件
<template>
  <div v-for="(item,index) in treeArr"> {{index}} <br/>
      <tree :item="item.arr" v-if="item.flag"></tree>
  </div>
</template>
<script>
export default {
  // 必须定义name,组件内部才能递归调用
  name: ‘tree‘,
  data(){
    return {}
  },
  // 接收外部传入的值
  props: {
     item: {
      type:Array,
      default: ()=>[]
    }
  }
}
</script>

清除定时器或者事件监听

由于项目中有些页面难免会碰到需要定时器或者事件监听。但是在离开当前页面的时候,定时器如果不及时合理地清除,会造成业务逻辑混乱甚至应用卡死的情况,这个时就需要清除定时器事件监听,即在页面卸载(关闭)的生命周期函数里,清除定时器。

methods:{
  resizeFun () {
    this.tableHeight = window.innerHeight - document.getElementById(‘table‘).offsetTop - 128
  },
  setTimer() {
    this.timer = setInterval(() => { })
  },
  clearTimer() {//清除定时器
		clearInterval(this.timer)
    this.timer = null
	}
},
mounted() {
  this.setTimer()
  window.addEventListener(‘resize‘, this.resizeFun)
},
beforeDestroy() {
  window.removeEventListener(‘resize‘, this.resizeFun)
  this.clearTimer()
}

自定义路径别名

我们也可以在基础配置文件中添加自己的路径别名

resolve: {
    extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
    alias: {
      ‘vue$‘: ‘vue/dist/vue.esm.js‘,
      ‘@‘: resolve(‘src‘),
      ‘assets‘: resolve(‘src/assets‘)
    }
  }

然后我们导入组件的时候就可以这样写:

// import YourComponent from ‘/src/assets/YourComponent‘
import YourComponent from ‘assets/YourComponent‘
复制代码

这样既解决了路径过长的麻烦,又解决了相对路径的烦恼。

动态给修改dom的样式

原因:因为我们在写.vue文件中的样式都会追加scoped。这样针对模板dom中的样式就可以生效,但其生效后的最终样式并不是我们写的样式名,而是编码后的。比如:

<template>
  <div class="box">dom</div>
</template>
<style lang="scss" scoped>
  .box {
    background: red;
  }
</style>

vue 将代码转译成如下,所以我们在js中拼接上的dom结构样式并不会生效。

.box[data-v-11c6864c]{ background:red; }
<template>
  <div class="box" data-v-11c6864c>dom</div>
</template>

解决方法:将要改变的样式写在非scoped样式标签中。

长列表性能优化

我们应该都知道 vue 会通过 object.defineProperty 对数据进行劫持,来实现视图响应数据的变化,然而有些时候我们的组件就是纯粹的数据展示,不会有任何改变,我们就不需要 vue 来劫持我们的数据,在大量数据展示的情况下,这能够很明显的减少组件初始化的时间。

所以,我们可以通过 object.freeze 方法来冻结一个对象,这个对象一旦被冻结,vue就不会对数据进行劫持了。

export default {
  data: () => ({
    list: []
  }),
  async created() {
    const list = await axios.get(‘xxxx‘)
    this.list = Object.freeze(list)
  },
  methods: {
    // 此处做的操作都不能改变list的值
  }
}

另外需要说明的是,这里只是冻结了 list 的值,引用不会被冻结,当我们需要 reactive 数据的时候,我们可以重新给 list 赋值。

内容分发(slot)

插槽 slot,也是组件的一块 HTML 模板,这一块模板显示不显示、以及怎样显示由父组件来决定。实际上,一个 slot 最核心的两个问题在这里就点出来了,是显示不显示和怎样显示。

默认插槽

又名单个插槽、匿名插槽,这类插槽没有具体名字,一个组件只能有一个该类插槽。

<!-- 父组件 parent.vue -->
<template>
  <div class="parent">
    <h1>父容器</h1>
    <child>
      <div class="tmpl">
        <span>菜单1</span>
      </div>
    </child>
  </div>
</template>

<!-- 子组件 child.vue -->
<template>
  <div class="child">
    <h1>子组件</h1>
    <slot></slot>
  </div>
</template>

具名插槽

匿名插槽没有 name 属性,所以叫匿名插槽。那么,插槽加了 name 属性,就变成了具名插槽。具名插槽可以在一个组件中出现 N 次,出现在不同的位置,只需要使用不同的 name 属性区分即可。

<!-- 父组件 parent.vue -->
<template>
  <div class="parent">
    <h1>父容器</h1>
    <child>
      <div class="tmpl" slot="up">
        <span>菜单up-1</span>
      </div>
      <div class="tmpl" slot="down">
        <span>菜单down-1</span>
      </div>
      <div class="tmpl">
        <span>菜单->1</span>
      </div>
    </child>
  </div>
</template>

<!-- 子组件 child.vue -->
<template>
  <div class="child">
    <!-- 具名插槽 -->
    <slot name="up"></slot>
    <h3>这里是子组件</h3>
    <!-- 具名插槽 -->
    <slot name="down"></slot>
    <!-- 匿名插槽 -->
    <slot></slot>
  </div>
</template>

作用域插槽

作用域插槽可以是默认插槽,也可以是具名插槽,不一样的地方是,作用域插槽可以为 slot 标签绑定数据,让其父组件可以获取到子组件的数据。

<!-- parent.vue -->
<template>
  <div class="parent">
    <h1>这是父组件</h1>
    <child
      >>
      <template slot="default" slot-scope="slotProps">
        {{ slotProps.user.name }}
      </template> </child
    >>
  </div>
</template>

<!-- 子组件 child.vue -->
<template>
  <div class="child">
    <h1>这是子组件</h1>
    <slot :user="user"></slot>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        user: {
          name: ‘小赵‘
        }
      }
    }
  }
</script>

推荐文章

从零开始构建一个webpack项目

总结几个webpack打包优化的方法

总结前端性能优化的方法

几种常见的JS递归算法

封装一个toast和dialog组件并发布到npm

一文读尽前端路由、后端路由、单页面应用、多页面应用

浅谈JavaScript的防抖与节流

原文地址:https://www.cnblogs.com/T888888/p/12601931.html

时间: 2024-11-08 19:50:47

总结vue知识体系之实用技巧的相关文章

前端涉及的所有知识体系

资源教程: 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 JavaScript(JS 教程) 麻省理工学院公开课:计算机科学及编程导论 JavaScript中的this陷阱的最全收集--没有之一 JS函数式编程指南 JavaScript Promise迷你书(中

前端知识体系2

Raw Blame History 1226 lines (983 sloc) 67.4 KB QQ联盟群交流(492107297)群规 GITHUB在线地址 http://t.cn/RL2NtqX 看云在线地址 http://t.cn/RUdaGHn 这是我们联盟群的组织结构,加入等级参考JS高级前端开发群加群说明. 这本来是我QQ群内部的一份公共约定的日常交流规则,后来得到大伙的一致认可,并用实际行动来捍卫它,使我倍受感动. 后来想:传播使爱更有力量,阅读使内心更为坚强,沉淀使生活更为醇香,

最全的资源教程-前端涉及的所有知识体系

https://github.com/AutumnsWind/Front-end-tutorial 资源教程: 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 JavaScript(JS 教程) 麻省理工学院公开课:计算机科学及编程导论 JavaScript中的t

职业程序员的知识体系

今天看到一篇文章,说人的知识分成两种,惰性知识和活性知识.那些对我们的工作,生活没有帮助的知识,称为惰性知识.惰性知识是用来装门面的,吹牛的.他不能解决我们的问题,只是填补我们生活的空虚.比如金鱼的记忆有几秒,就属于这种惰性知识.不过根据我最近的经验,我发现每天早上,当鱼儿们看见我拿起装鱼食的瓶子时,都很激动.这显然不是几秒记忆所能办到的. 为什么会有惰性知识呢?当一个知识不能与我们已有的知识体系建立关联,那么当我们遇到问题时,我们不会想到他,用到他,于是他就成了惰性知识.就好像你是一个将军,手

沟通是项目管理知识体系中的九大知识领域之一

项目管理要素有:范围.时间.成本.质量.人力.风险.采购.沟通.在项目管理中,沟通是一个软指标,其所起的作用不好量化,沟通对项目的影响往往也是隐形的.项目沟通管理是现代项目管理知识体系中的九大知识领域之一,项目沟通管理在成功所必须的因素-人.想法和信息之间提供了一个关键性连接. 沟通对项目的成功,尤其是IT项目的成功非常重要.本文就围绕沟通的重要意义.项目干系人.沟通对效率的影响.沟通的关键要素这几方面展开一些探讨,最后结合高职外语教学.综合测评平台项目,对沟通在小组软件开发过程中的应用进行案例

前端知识体系之入门篇总结(一)

利用国庆节时间,把前端学习的知识碎片进行了整理,希望能在前端之路继续努力. 前端是一个范围很大的概念,其领域包括在了计算系统中的方方面面,可以说所有与用户交互行为相关的程序开发工作都是前端的范围,这包括一个数字仪表的显示设计或者一个手机APP.通常意义上讲,前端指的是Web前端的开发工作,而学习前端也是从Web前端知识开始的. 这篇blog面向对前端没有入门或者已经有一定的网页编码技术但对于前端知识体系没有一个清晰条理的开发者,其要旨是整理一个普通网页开发过程中所能用到的知识点.与其它类似的教程

iOS实用技巧 - AFNetworking2安全的使用自签证书访问HTTPS

友情提示:本文使用的AFNetworking是最新git pull的2.3.1版本,如果想确认你机器上的AFNetworking版本,请打git tag命令查看. 绝大部分iOS程序的后台服务都是基于RESTful或者WebService的,不论在任何时候,你都应该将服务置于HTTPS上,因为它可以避免中间人攻击的问题,还自带了基于非对称密钥的加密通道!现实是这些年涌现了大量速成的移动端开发人员,这些人往往基础很差,完全不了解加解密为何物,使用HTTPS后,可以省去教育他们各种加解密技术,生活轻

【老鸟分享】LINUX命令行终端提示符多种实用技巧!

1.Linux命令行提示符简介 众所周知,Linux命令行是系统管理员管理Linux的重要手段,我们管理Linux,首先要面对的就是Linux命令行提示符. Linux命令行结尾的提示符有"#"和"$"两种不同的符号,如下所示: [[email protected] ~]# #<==这是超级管理员root用户对应的命令行. [[email protected] ~]$ #<==这是普通用户oldboy对应的命令行. 其中: 1)#号,是使用超级用户roo

使用FlashPaper在线转换.doc为.swf_实用技巧

https://yq.aliyun.com/ziliao/160044?spm=5176.8246799.0.0.JBbqjY 摘要: 本文讲的是使用FlashPaper在线转换.doc为.swf_实用技巧, FlashPaper 是Macromedia推出的一款电子文档类工具!通过使用FlashPaper,可以将需要的文档通过简单的设置转换为SWF格式的Flash动画,原文档的排版样式和字体显示不会收到影响,这样做的好处是不论对方的平台和语言 云计算 云服务器ECS 大数据 建站 备案 文档