关键前端知识点记录随笔

1. webpack与gulp的区别

gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译，替代手工实现自动化工作。

webpack是前端构建工具，称为模块打包机，webpack支持模块化；构建前端开发过程中常用的文件，如：js，css，html，img等；使用简单方便，自动化构建。webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。

来自：https://www.cnblogs.com/wenshaochang123/p/7978773.html

2. Vue与React的区别

相同点：

    1.都支持服务器端渲染

    2.都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范

    3.数据驱动视图

    4.都有支持native的方案,React的React native,Vue的weex

    5.都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做）

不同点：

       1.React严格上只针对MVC的view层,Vue则是MVVM模式

       2.virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

       3.组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即‘all in js‘; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;

       4.数据绑定: vue实现了数据的双向绑定,react数据流动是单向的

       5.state对象在react应用中不可变的,需要使用setState方法更新状态; 在vue中,state对象不是必须的,数据由data属性在vue对象中管理；

来自：https://www.cnblogs.com/yf-html/p/9102931.html

3. Vue数据双向绑定的模拟实现

1. 深入理解视图层到数据层
2. 深入理解数据层如何映射到视图层
3. 深入理解里面的Watcher类的实现

来自：https://www.jianshu.com/p/d33c16075c88

4. 详解Vue中的虚拟Dom

1. 深度理解虚拟dom函数的触发时机
2. 了解整个虚拟dom的工作流程

来自：https://www.cnblogs.com/fundebug/p/vue-virtual-dom.html

5. Vue中的MVVM模式

ViewModel 是一个同步View 和 Model的对象。

mvc: 
当用户出发事件的时候，view层会发送指令到controller层，接着controller去通知model层更新数据，model层更新完数据以后直接显示在view层上，这就是MVC的工作原理。

mvvm:
mvc中Controller演变成mvvm中的viewModel。view层和viewmodel层是相互绑定的关系，这意味着当你更新viewmodel层的数据的时候，view层会相应的变动ui。
主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到View的问题 。

1. 类
2. 模块化
3. 箭头函数
4. 函数参数默认值
5. 模板字符串
6. 解构赋值
7. 延展操作符
8. 对象属性简写
9. Promise
10.let,const