LearningRecord
LearningRecord copied to clipboard
Rashomon511
学习资料汇总、阅读记录，持续学习,每天进步一点点.🏫🏫
$route 是路由信息对象，包括path，params，hash，query，fullPath，matched，name 等路由信息参数。 而 $router 是路由实例对象，包括了路由的跳转方法，钩子函数等
先来看一下计算属性的定义： 当其依赖的属性的值发生变化的时，计算属性会重新计算。反之则使用缓存中的属性值。 计算属性和vue中的其它数据一样，都是响应式的，只不过它必须依赖某一个数据实现，并且只有它依赖的数据的值改变了，它才会更新。
在 Vue 中，每次切换组件时，都会重新渲染。如果有多个组件切换，又想让它们保持原来的状态，避免重新渲染，这个时候就可以使用 keep-alive。 keep-alive 可以使被包含的组件保留状态，或避免重新渲染。
利用 vue-router 的 beforeEach 事件，可以在跳转页面前判断用户的权限（利用 cookie 或 token），是否能够进入此页面，如果不能则提示错误或重定向到其他页面，在后台管理系统中这种场景经常能遇到。
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用v-if 较好。
说简单点，vue-router的原理就是通过对URL地址变化的监听，继而对不同的组件进行渲染。 每当URL地址改变时，就对相应的组件进行渲染。原理是很简单，实现方式可能有点复杂，主要有hash模式和history模式。
```javascript function format(str) { let s = '' let count = 0 for (let i = str.length - 1; i >= 0; i--) { s = str[i] + s count++...
HTML5引入了 history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。 ```javascript let stateObj = { foo: "bar", }; history.pushState(stateObj, "page 2", "bar.html"); ``` 假设当前页面为 foo.html，执行上述代码后会变为 bar.html，点击浏览器后退，会变为 foo.html，但浏览器并不会刷新。 pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个...
- 图片懒加载。在页面的未可视区域添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。 - 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。 - 如果图片为css图片，可以使用CSSsprite，SVGsprite等技术。 - 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。 - 如果图片展示区域小于图片的真实大小，应在服务器端根据业务需要先进行图片压缩，图片压缩后大小与展示一致。
Performance 接口可以获取到当前页面中与性能相关的信息。 该类型的对象可以通过调用只读属性 Window.performance 来获得。 白屏时间： ```javascript performance.timing.responseStart - performance.timing.navigationStart ``` 首屏时间 ```javascript window.onload = () => { new Date() - performance.timing.responseStart } ```