a7650 / my-blog Goto Github PK

路由守卫的解析流程如下
1.导航被触发
2.在失活组件里调用beforeRouteLeave（在组件里声明）
3.调用全局的beforeEach（在main里声明：router.beforeEach）
4.如果组件是重用的，调用brforeRouteUpdate。（此时只会触发全局的三个守卫）
5.在路由配置里调用beforeEnter
6.异步解析路由（前面几个均是按顺序执行，之后的是异步执行）
7.在被激活的组件里调用beforeRouteEnter（在组件里定义，此时不能访问this，因为还没实例创建，可以在该函数的next里传入一个回调，该回调参数就是this实例，会在实例创建完成后触发，也是唯一一个可以在next中传入以组件实例为参数的守卫）
8.调用全局的beforeResolve
9.导航被确认
10.调用全局afterEach（路由守卫里只有该函数不用next）
11.触发dom更新
12.执行beforeRouteEnter中的next中传入的回调函数。

Promise的状态只能改变一次，即resolve之后就不能再执行reject，reject起不到任何作用。

then里面的函数是顺序执行的，then中的函数需要return val来给下一个then传入值。then中return的还是一个promise，即一个新的promise，当return的是值的时候，会使用Promise.resolve(val)封装后传入下一个then。也可以在return Promise.resolve(val)/return Promise.reject(val)，这样下一个then会根据状态来执行相应的函数。

如果想要在then里面执行另外的异步函数，即多个异步函数按照顺序执行，需要 return new Promise( fn(...) )

父子组件之间如何协作
父组件如何监听子组件的事件
父组件的监听的方法保存在父组件还是子组件
子组件为什么可以触发事件

Vue Router

router.push(location, onComplete?, onAbort?)可提供可选的第2、3个回调函数，分别在导航完成后或者终止后调用。

如果使用动态路由，只有参数发生了变化，则该路由的模块会被复用，意味着声明周期的钩子函数不会被触发，可以通过watch $route或者使用beforeRouteUpdate。

[路由里可以使用正则匹配，链接，如果一个路由可以被多个route匹配到，则遵循先定义的优先级最高，因此可以在路由的最后加上一个通配符*匹配的404页面。

router.go(n)是将路由前进或后退n步。类似于window.history.go(n)

Vue命名视图
对跳转路由使用导航守卫不会有任何效果，导航守卫仅仅是应用在其目标上。router还可以添加别名{ path: '/a', component: A, alias: '/b' }意思是用户访问b时，url保持为b，但是路由匹配为a。

路由组件传参。

导航守卫，router.beforeEach((to, from, next) => {// ...}), 链接

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

路由元信息
链接

浏览器渲染的前提是生成渲染树，而且html和css解析完之后生成dom和cssom（两者同时解析），然后这两者合在一起生成render tree，生成render tree的时机是在DOMContentLoaded触发之后。
js会阻止dom的解析，dom和css都解析完才会渲染，所以js阻止渲染，所以js应该放在页面底部，加快生成render tree。
css也会阻止js的解析，因为js会等待其前面的css下载执行后才会执行，所以css放在js前会阻止js的解析，js的解析又阻止dom解析，进而又阻止页面渲染。所以如果js和css都放在头部的话，js应放在css前面。
浏览器在遇到script标签时，会触发页面渲染。

文档1
文档2

JS总共有7种类型，分别是string，number，null，undefined，boolean，symbol以及object，除了最后一个object是复杂类型其余全是基本类型。

判断类型的函数主要有：typeof ，instanceof，constructor，Object.prototype.toString.call()，Array.isarray()

typeof

typeof返回的值可能是 string，number，undefined，boolean，symbol，以及object和function，且均是字符串

null，array，date等均返回object，所以用typeof来检测一个数据是否为对象类型不是很精确。
另 typeof Number(1) === 'number'; typeof new Number(1) === 'object';因为使用new的时候会返回一个对象

instanceof

instanceof用来判断某一个对象是否是一个构造函数的实例，或者在该对象的原型链上是否存在一个构造函数,用法 object instanceof constructor ，该方法一般用来判断对象，如果直接传入数字，字符串等会返回false，但是用基本包装类型可以判断，如 var a = new Number(1)这里的a就是构造函数Number的实例，可以用instanceof判断。
另外，虽然用typeof null 返回的是对象，但是如果null instanceof Object的话，返回的是false，
这是因为虽然null是对象（这是js的一个bug，null是一个类型，所以它应该是null类型），但是null却不是Object的实例，原型链最上面是Object.prototype,所有的object类型都继承这里的原型方法，但是Object.prototype的上面是null，null才是原型链的最顶层，即Object.prototype.__proto__===null。
undefined instanceof Undefined 和 null instanceof Null也都会返回false，因为Undefined 和Null都不是构造函数。

constructor

constructor存在于一个对象的原型中，

Object.prototype.toString.call

该方法用来检测object比较准确，用Object原型的toString方法而不用具体实例的方法（如“str”.toString()）是因为object所有类型(以上七种),（Array，Function，Date等均为Object的下层类型）以及基本包装类型（Number，String，Boolean），均重写了适应本数据类型的toString方法。
该方法判断任何内置类型均会返回正常的值，但是自定义类型不能判断出来，还是[object Object]
该方法判断原生JSON对象也会返回正确的。

*判断一个数据是否为null可以①直接x===null,② Object.prototype.toString.call

各种继承，优缺点

链接

vue中的以下划线_和美元符号$开头的属性不会进行响应式绑定。

1. DataV：基于Vue的数据可视化组件库，涵盖各种数据可视化图表 。项目地址
2. vxe-table：一个基于 vue 的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口。项目地址
3. 开源免费的web动画图标项目地址

1. 路由懒加载

router导入模块的时候使用 ()=>import(' ... ')

2. 使用gzip压缩

需要先安装插件compression-webpack-plugin，之后在plugins里面加入 如下配置

new CompressionPlugin({ test: /\.js$|\.html$|\.css/, threshold: 10240 // deleteOriginAssets:false })

同时还要服务器进行配置，nginx里面开启 gzip on
同时可以在请求头/响应头查看Accept-Encoding/content-encoding.

3.CDN引入

对于某些体积比较大的包，通过cdn引入可以有效减少文件体积，
https://cdn.bootcss.com 上找到对应的cdn地址，然后在index.html里引入，在配置里面configureWebpack加入新的选项，

externals: { "echarts": "echarts", "crypto": "CryptoJS" }

在使用的时候无需import，直接使用即可。

4.运行时构建和独立构建

参考 https://www.jianshu.com/p/bce0e4376dd9

5.打包分析

安装插件 cnpm install webpack-bundle-analyzer -D，然后package.json里面添加命令
"analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"

然后配置里面加入新插件
new BundleAnalyzerPlugin({ analyzerMode: "server", analyzerHost: "127.0.0.1", analyzerPort: 8888, reportFilename: "report.html", defaultSizes: "parsed", openAnalyzer: false, generateStatsFile: false, statsFilename: "stats.json", statsOptions: null, logLevel: "info" })
运行npm run analyz,或者直接build 访问8888即可查看分析图。

6.其他教程

http://jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/
https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5c0678636fb9a049b347c0aa