Vue.js 的几点总结Watchers/router key/render
Vue.js 的几点总结,下面就是实战案例,一起来看一下。
第一招:化繁为简的Watchers
场景还原:
1 2 3 4 5 6 7 8 |
|
组件创建的时候我们获取一次列表,同时监听input框,每当发生变化的时候重新获取一次筛选后的列表这个场景很常见,有没有办法优化一下呢?
招式解析:
首先,在watchers中,可以直接使用函数的字面量名称;其次,声明immediate:true表示创建组件时立马执行一次。
1 2 3 4 5 6 |
|
第二招:一劳永逸的组件注册
场景还原:
1 2 3 4 5 6 7 8 9 10 |
|
1 2 3 4 5 6 7 |
|
我们写了一堆基础UI组件,然后每次我们需要使用这些组件的时候,都得先import,然后声明components,很繁琐!秉持能偷懒就偷懒的原则,我们要想办法优化!
招式解析:
我们需要借助一下神器webpack,使用 require.context() 方法来创建自己的(模块)上下文,从而实现自动动态require组件。这个方法需要3个参数:要搜索的文件夹目录,是否还应该搜索它的子目录,以及一个匹配文件的正则表达式。
我们在components文件夹添加一个叫global.js的文件,在这个文件里借助webpack动态将需要的基础组件统统打包进来。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
最后我们在main.js中import 'components/global.js',然后我们就可以随时随地使用这些基础组件,无需手动引入了。
第三招:釜底抽薪的router key
场景还原:
下面这个场景真的是伤透了很多程序员的心...先默认大家用的是Vue-router来实现路由的控制。
假设我们在写一个博客网站,需求是从/post-page/a,跳转到/post-page/b。然后我们惊人的发现,页面跳转后数据竟然没更新?!原因是vue-router"智能地"发现这是同一个组件,然后它就决定要复用这个组件,所以你在created函数里写的方法压根就没执行。通常的解决方案是监听$route的变化来初始化数据,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
bug是解决了,可每次这么写也太不优雅了吧?秉持着能偷懒则偷懒的原则,我们希望代码这样写:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
招式解析:
那要怎么样才能实现这样的效果呢,答案是给router-view添加一个unique的key,这样即使是公用组件,只要url变化了,就一定会重新创建这个组件。(虽然损失了一丢丢性能,但避免了无限的bug)。同时,注意我将key直接设置为路由的完整路径,一举两得。
1 |
|
第四招: 无所不能的render函数
场景还原:
vue要求每一个组件都只能有一个根元素,当你有多个根元素时,vue就会给你报错
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
招式解析:
那有没有办法化解呢,答案是有的,只不过这时候我们需要使用render()函数来创建HTML,而不是template。其实用js来生成html的好处就是极度的灵活功能强大,而且你不需要去学习使用vue的那些功能有限的指令API,比如v-for, v-if。(reactjs就完全丢弃了template)
1 2 3 4 5 6 7 8 9 10 |
|
第五招:无招胜有招的高阶组件
划重点:这一招威力无穷,请务必掌握
当我们写组件的时候,通常我们都需要从父组件传递一系列的props到子组件,同时父组件监听子组件emit过来的一系列事件。举例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
有下面几个优化点:
1.每一个从父组件传到子组件的props,我们都得在子组件的Props中显式的声明才能使用。这样一来,我们的子组件每次都需要申明一大堆props, 而类似placeholer这种dom原生的property我们其实完全可以直接从父传到子,无需声明。方法如下:
1 2 3 4 5 |
|
$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。
2.注意到子组件的@focus=$emit('focus', $event)"其实什么都没做,只是把event传回给父组件而已,那其实和上面类似,我完全没必要显式地申明:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
3.需要注意的是,由于我们input并不是BaseInput这个组件的根节点,而默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。所以我们需要设置inheritAttrs:false,这些默认行为将会被去掉, 以上两点的优化才能成功。
Vue.js 的几点总结Watchers/router key/render的更多相关文章
- vue.js(09)--v-for中的key
v-for中key的使用注意事项 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Vue.js刷新当前页面
Vue.js的路由跳转很强大,类似ajax的局部刷新,路由跳转时候页面是不刷新的,刷新当前页面的功能不建议用,但是有的时候确实需要刷新当前页面来实现某些需求,这个时候,我们有三 种方法可以实现. 第一 ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...
- Vue.js最佳实践
Vue.js最佳实践 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ t ...
- Vue.js最佳实践(五招让你成为Vue.js大师)
对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站.但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了. 第一招:化繁 ...
- web前端开发面试题(Vue.js)
1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? ...
- Vue.js最佳实践(五招助你成为vuejs大师)
转自https://www.jb51.net/article/139448.htm 本文面向对象是有一定Vue.js编程经验的开发者.如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给 ...
随机推荐
- IDEA 设置导出
见附件 https://files.cnblogs.com/files/chuancheng/settings.7z
- Mybatis-Spring包学习
MyBatis-Spring包用来将MyBatis无缝整合到Spring中.使用这个类库中的类, Spring将会加载必要的MyBatis工厂类和Session类. 这个类库也提供一个简单的方式来注入 ...
- php大型网站如何提高性能和并发访问
一.大型网站性能提高策略: 大型网站,比如门户网站,在面对大量用户访问.高并发请求方面,基本的解决方案集中在这样几个环节:使用高性能的服务器.高性能的数据库.高效率的编程语言.还有高性能的Web容器. ...
- docker 笔记(6)网络
docker network ls 默认docker安装时会创建3个网络 none网络 one 网络就是什么都没有的网络.挂在这个网络下的容器除了 lo,没有其他任何网卡.容器创建时,可以通过 - ...
- nginx 添加win 服务
https://jingyan.baidu.com/article/0964eca279aa818285f536a9.html
- iOS 给Main.storyboard 添加button 事件《转》
XCODE中使用Main.Storyboard拉入控件并实现事件(Swift语言) 如何在XCODE中的Main.Storyboard内拉入控件并实现一个简单的效果呢?本人由于刚接触Swift语言 ...
- Eclipse中如何开启断言(Assert),方法有二
Eclipse中如何开启断言(Assert),方法有二:1.Run -> Run Configurations -> Arguments页签 -> VM arguments文本框中加 ...
- intellij idea 在执行maven的操作 install等会出现中文乱码?其他程序打印正常?
之前一直碰到过这个问题,也没在意,因为那个中文对我来说用处不大,今天看着务必难受,一定把他给解决了,查了一下,找到了解决方法,如下: 首先打开你的设置. Setting->maven->r ...
- 【转】PEAR安装、管理及使用
PEAR安装 linux下只要你安装的是PHP 4.3.0以上的版本,默认安装都是支持PEAR的,除非你使用了”--WITHOUT-PEAR”选项,修改PHP.INI文件,在INCLUDE_PAT ...
- Linux 大页面使用与实现简介(转)
引言 随着计算需求规模的不断增大,应用程序对内存的需求也越来越大.为了实现虚拟内存管理机制,操作系统对内存实行分页管理.自内存“分页机制”提出之始,内存页面的默认大小便被设置为 4096 字节(4KB ...