积累

关于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(以防请求数据量过大页面加载时拿不到返回的数据)
 

axios、fetch与ajax有什么区别?     

Ajax 指的是 XMLHttpRequest(XHR), 是一种创建交互式网页应用的网页开发技术

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

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

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-ReduxRedux的官方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

 

原文地址:https://www.cnblogs.com/zhengweijie/p/12067918.html