积累

关于VUE

vue.js的两个核心是什么？ 　　　　　　 　　

Vue.js是一个提供MVVM数据双向绑定的库，专注于UI层面，核心思想是：数据驱动、组件系统。

https://www.php.cn/js-tutorial-421002.html

 

vue中 keep-alive 组件的作用  　　　　 　

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

https://www.cnblogs.com/lxlin/p/8472395.html

 

vue更新数组时触发视图更新的方法  　　　　

vue直接修改数组元素是无法触发视图更新的, 修改array的length也无法触发视图更新, 可以通过 Vue.set   、 Vue.delete 、 Arr.splice  等方法修改

https://www.cnblogs.com/mengff/p/8482867.html

 

解决非工程化项目初始化页面闪动问题

vue页面在加载的时候闪烁花括号{}}，v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕

https://www.cnblogs.com/gitByLegend/p/10869815.html

 

vue等单页面应用及其优缺点 　　

优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

 

vue-cli3 配置全局自定义变量 开发/生产环境

 https://blog.csdn.net/m0_37827076/article/details/102831552

 

vue-cli中自定义指令的使用 　　　

通过  directives 属性设置，定义 inserted 方法，该方法传入一个el 对象

https://www.jianshu.com/p/90297e8c9d06

 

完整的 vue-router 导航解析流程 　　　　　 

路由的解析过程共有12步。

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

红色的钩子函数是全局的，蓝色的钩子函数是路由特有的，粉紫色的钩子函数是组件内部的。

最常用的是全局的 beforeEach 守卫。

 

vue-router的几种实例方法以及参数传递　　  

1.命名路由搭配params，刷新页面参数会丢失
2.查询参数搭配query，刷新页面数据不会丢失

https://blog.csdn.net/crazywoniu/article/details/80942642

 

vue-router实现路由懒加载（ 动态加载路由 ） 

1. vue异步组件
2. es提案的import()
3. webpack的require,ensure()

 https://blog.csdn.net/mzrxLXR/article/details/81484676

 

vue-router路由的两种模式 　　　　　　　　 

vue-router 默认 hash 模式，还有一种是history模式。history模式不会再URL后面带 #/ 标识

https://blog.csdn.net/wang1006008051/article/details/81805932

 

使用vuex的核心概念（介绍状态机）　

主要有 state 、 getters、 mutations、actions 四个状态

https://www.cnblogs.com/zhengweijie/p/7132234.html

 

pc端页面刷新时实现vuex缓存  　　　　　

办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）
办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据
办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）

  https://www.jianshu.com/p/c2078f6f63b3

 

axios、fetch与ajax有什么区别？　　　　　

Ajax 指的是 XMLHttpRequest（XHR）， 是一种创建交互式网页应用的网页开发技术

Axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装

Fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

https://www.jianshu.com/p/8bc48f8fde75

 

axios有什么特点？ 　　　　　　　　　　　

1、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API
2、它可以拦截请求和响应
3、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
4、安全性更高，客户端支持防御 XSRF

http://www.bslxx.com/a/vue/mianshiti/2017/1107/1409.html

 

vue如何优化首屏加载速度？ 　　　　　　

1、路由异步加载

2、不打包库文件

3、关闭sourcemap

4、开启gizp压缩，前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件。

https://www.jianshu.com/p/df198914331b

 

vue的双向绑定原理及实现 　　　　　　　　 

主要是通过 object.defineProperty() 方法来实现数据劫持的，该方法具两个描述属性get和set ，赋值的时候除发set , 使用的时候触发get  

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

 https://www.cnblogs.com/libin-1/p/6893712.html

 

MVC、MVP与MVVM的区别 　　　　　　　

https://blog.csdn.net/github_37130188/article/details/89762737

 

什么是 Virtual DOM？ 　　　　　　　　　　

https://blog.csdn.net/weixin_40814356/article/details/84214244

 

全面解析Vue     

https://mp.weixin.qq.com/s/LilyrAKBWWPtuyisE0ffMA

 

关于React

在React中使用react-router-dom路由 

react构建的是单页面应用，使用该插件实现页面间的跳转等功能，类似于vue-router

https://www.jianshu.com/p/8954e9fb0c7e

 

什么是Redux  ?  

Redux 是 JavaScript 状态容器，提供可预测化的数据状态管理（可理解为类似Vuex ），不同的是，Redux可以搭配任何语言使用，并不是专门用于React

store: store对象是保存公共数据的地方，一个应用只能创建一个store

state：state是store映射的数据集合，一个state 只对应一个view (即存放数据变量的地方)

action：改变state 数据的唯一方法，需要声明一个type属性，在调用时使用

store.dispatch()：store.dispatch()是 view 发出 action 的唯一方法，也可以理解为发射action通知的唯一方法。里面的type属性值为需要调用的action方法type值

reducer() : 当action方法被触发后，会自动调用，接收两个参数，一个为原本的state, 另一个为被调用的action，可根据action.type 类型执行对应逻辑

https://www.jianshu.com/p/d99f5deccfaa

 

Redux数据管理原理 

 https://github.com/brickspert/blog/issues/22

 

React-redux的使用  

React-Redux是Redux的官方React绑定库， 是基于 Redux 的基础上，做了一些封装，使其更方便使用在React中

提供 connect() 方法，让你把组件和store连接起来

提供了<Provider/>组件，可在最外层注入整个store, 能够使你的整个app访问到Redux store中的数据

https://www.jianshu.com/p/e8385b129b77

 

关于Dva   

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

dva = React-Router + Redux + Redux-saga   ， 它将三个 React 工具库包装在一起，方便开发使用。

https://dvajs.com/

 

关于Mobx

跟React-Redux 一样，是一套为React开发的数据状态管理技术，类似Vuex。 使用后在React中的开发方式类似于Vue, 可使用this.name 进行访问赋值

observer  声明该组件类能够响应 observable 的变化

inject      在组件类注入store , 可通过props的方式进行访问 store.state 中的值

observable  表示该变量被监听，可通过this.name的方法进行调用赋值

action    声明该方法可改变被 observable 监听的变量

https://www.jianshu.com/p/2dfe11a9dfde      https://cn.mobx.js.org/

 

 

React企业级开发框架 Umi 

一个可插拔的企业级 react 应用框架, 内置 react、react-router 等, 集成从源码到构建产物的每个生命周期功能，理解为一个集成了开发大型项目所需要各个流程功能的框架。

https://umijs.org/zh/

 

企业级中后台前端 Ant Design Pro

Ant Design Pro 是一个企业级中后台前端/设计解决方案, 构建了一套基于 React 的中后台管理控制台的脚手架，它可以帮助你快速搭建企业级中后台产品原型。

Ant Design Pro = React + Antd + Umi.js

https://pro.ant.design/docs/getting-started-cn

 

react 新功能之 Hooks 

React 具备 无状态组件（Function）和 有状态组件（Class） 两种方式， 无状态组件不存在生命周期，只可作为组件使用。

Hooks 解决了 React 复用一个组件时生命周期复杂的问题，同时也可以让 无状态组件存在生命周期

 

 https://www.jianshu.com/p/aafccf6e9ad6   https://www.jianshu.com/p/15fabae835a0

 

关于 react 那些小知识点儿 

 https://www.jianshu.com/p/4d2838ae7b29

 

react 性能优化 

 https://mp.weixin.qq.com/s/LG_1WXWFJQbuJuHiTqXzyw

 

网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？

 https://www.zhihu.com/question/31809713/answer/53544875

 

原生客户端技术

对flutter的了解  https://www.jianshu.com/p/b77242539f58

weex和rn原理   https://www.jianshu.com/p/3dde6902351c

pwa的使用    https://segmentfault.com/a/1190000012353473

Electron 快速入门   https://www.w3cschool.cn/electronmanual/p9al1qkx.html

NW.js是什么？https://www.php.cn/js-tutorial-419101.html

关于JS

什么是JS的同源策略和跨域问题？ https://www.php.cn/js-tutorial-405805.html

Object.defineProperty()方法 https://www.cnblogs.com/zhaowj/p/9576450.html

ES6新语法  https://mp.weixin.qq.com/s/8bov6788ivV0sHzmwrn5lw     http://es6.ruanyifeng.com/#docs/function  https://mp.weixin.qq.com/s/3Ku8w-LLgM0cor2c8ipY9A

JS面试题  https://www.jianshu.com/p/f1f39d5b2a2e

 

 

Webpack

https://www.cnblogs.com/gaoht/p/11310365.html

https://www.jianshu.com/p/06c6614001be?utm_source=oschina-app

https://www.jianshu.com/p/e80d38661358

https://www.cnblogs.com/theblogs/p/10781273.html

 

关于CSS

https://mp.weixin.qq.com/s/e_gXXJTFocNxDaG0U_iB_g

 

 其他

页面性能优化 https://www.cnblogs.com/xiaohuochai/p/9178390.html 

http缓存   https://www.jianshu.com/p/278e93e5b1fb   https://www.cnblogs.com/echolun/p/9419517.html

对http2的了解  https://www.jianshu.com/p/a742c589f121

前端安全相关   https://blog.csdn.net/yinqian999/article/details/90230298

 

https://blog.csdn.net/lhjuejiang/article/details/80936199

https://github.com/geekcompany/ResumeSample/blob/master/web.md

 

关于小程序

https://www.cnblogs.com/angel648/p/11426318.html