松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › 五招让你快速成为Vue.js大师

五招让你快速成为Vue.js大师

迦娜王
3年前Vue
434 0 0

前言

五招让你快速成为Vue.js大师

用过Vue的程序员都是这样评价它的,“Vue.js 兼具angular.js和react.js的优点,并剔除了它们的缺点”。

那么,大部分人都是掌握了Vue.js基本的几个API后,正常的开发前端网站。但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面小编要教给你的这五招你一定要认真学习。

第一招:极简的Watch

还原场景:

五招让你快速成为Vue.js大师

组件创建的时候我们获取一次列表,同时监听input框,每当发生变化的时候重新获取一次筛选后的列表这个场景很常见,那么我们要如何优化呢?

招式解析:

首先,在watch中,可以直接使用函数的字面量名称;其次,声明immediate:true表示创建组件时立马执行一次。

五招让你快速成为Vue.js大师

第二招:一劳永逸的组件注册

还原场景:

五招让你快速成为Vue.js大师

我们写了很多的基础UI组件,然后我们需要使用这些组件的时候,都得先import,然后声明components,很繁琐!秉承着能该偷懒就偷懒的原则,我们必须的优化啊!

招式解析:

在这里我们需要借助一下神器webpack,使用 require.context() 方法来创建自己的(模块)上下文,从而实现自动动态require组件。这个方法需要3个参数:要搜索的文件夹目录,是否还应该搜索它的子目录,以及一个匹配文件的正则表达式。

我们在components文件夹添加一个叫global.js的文件,在这个文件里借助webpack动态将需要的基础组件统统打包进来。

五招让你快速成为Vue.js大师

最后我们在main.js中import \’components/global.js\’,然后我们就可以随时随地使用这些基础组件,无需手动引入了。

第三招:釜底抽薪的router key

还原场景:

下面这个场景真的是伤透了很多程序员的心…先默认大家用的是Vue-router来实现路由的控制。

假设我们在写一个博客,需求是从/post-page/a,跳转到/post-page/b。然后我们惊人的发现,页面跳转后数据竟然没更新?!原因是vue-router”智能地”发现这是同一个组件,然后它就决定要复用这个组件,所以你在created函数里写的方法压根就没执行。通常的解决方案是监听$route的变化来初始化数据,如下:

五招让你快速成为Vue.js大师

bug是解决了,可是每次这么写也是很麻烦的?秉持着能偷懒则偷懒的原则,我们希望代码这样写:

招式解析:

那要怎么样才能实现这样的效果呢,答案是给router-view添加一个unique的key,这样即使是公用组件,只要url变化了,就一定会重新创建这个组件。(虽然损失了一丢丢性能,但避免了无限的bug)。同时,注意我将key直接设置为路由的完整路径,一举两得,完美。

五招让你快速成为Vue.js大师

第四招: 无所不能的render函数

还原场景:

vue要求每一个组件都只能有一个根元素,当你有多个根元素时,Vue就会给你报错

五招让你快速成为Vue.js大师

招式解析:

那么这个有没有办法解决呢?是可以解决的。只不过这时候我们需要使用render()函数来创建HTML,而不是template。其实用js来生成html的好处就是极度的灵活功能强大,而且你不需要去学习使用vue的那些功能有限的指令API,比如v-for, v-if。(reactjs就完全丢弃了template)

五招让你快速成为Vue.js大师

第五招:无招胜有招的高阶组件

划重点:这一招威力无穷,请务必掌握

当我们写组件的时候,父子组件的通信很重要。通常我们都需要从父组件传递一系列的props到子组件,同时父组件监听子组件emit过来的一系列事件。举例子:

五招让你快速成为Vue.js大师

有下面几个优化点:

  • 每一个从父组件传到子组件的props,我们都得在子组件的Props中显式的声明才能使用。这样一来,我们的子组件每次都需要申明一大堆props, 而类似placeholer这种dom原生的property我们其实完全可以直接从父传到子,无需声明。方法如下
五招让你快速成为Vue.js大师

$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 v-bind=”$attrs” 传入内部组件——在创建更高层次的组件时非常有用。

  • 注意到子组件的@focus=$emit(\’focus\’, $event)”其实什么都没做,只是把event传回给父组件而已,那其实和上面类似,我完全没必要显式地申明:
五招让你快速成为Vue.js大师

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。

  • 需要注意的是,由于我们input并不是BaseInput这个组件的根节点,而默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。所以我们需要设置inheritAttrs:false,这些默认行为将会被去掉, 以上两点的优化才能成功。
0
完美解决vue之keep-alive页面缓存问题
上一篇
Vue学习笔记三:Vue生命周期
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
Servicios profesionales Organizaciones
1年前
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
1年前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
1年前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
1年前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 0
  • 0
  • Top