vue经常使用知识点总结

感谢本文引用连接的各位大佬们，小菜鸟我只是个搬运工

1.谈一谈你理解的vue是什么样子的？

1. vue是数据、视图分离的一个框架，让数据与视图间不会发生直接联系。MVVM
2. 组件化：把总体拆分为各个能够复用的个体
3. 数据驱动：经过数据变化直接影响bom展现，避免dom操做。
4. 能够在原项目的基础上，一两个组件使用vue，也可使用vue全家桶开发

全家桶：vue-router，vuex， vue-resource，vue-cli，sass样式
这篇文章关于渐进式的解释很好
vue中几个必需要知道的点

2.vue生命周期

一张图总结vue生命周期

需注意created时data已绑定，但DOM未生成，$el不存在，mounted时$el已存在，能够挂载。
这篇文章对vue的生命周期写的很细致，并且有代码能够手动验证每一个阶段

3.v-model双向数据绑定

双向绑定就在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view
实现流程：

1. 实现一个数据监听器Observer，可以对数据对象的全部属性进行监听，若有变更可拿到最新值并通知订阅者
2. 实现一个指令解析器Compile，对每一个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3. 实现一个Watcher，做为链接Observer和Compile的桥梁，可以订阅并收到每一个属性变更的通知，执行指令绑定的相应回调函数，从而更新视图
4. mvvm入口函数，整合以上三者

点我查看大佬文章1
点我查看大佬文章2

4.虚拟DOM和声明式渲染

• 为何要减小DOM操做，DOM操做的时间耗在了哪里？

渲染引擎工做：

1. 解析HTML代码，生产DOM tree
2. 解析CSS样式，结合DOM tree生产Render tree（display: none;的结点不会存在Rendertree上，最后不会被paint）
3. 计算Render tree各个节点的布局信息，好比box的位置、尺寸、颜色、外形等
4. 根据计算后的布局信息，调用浏览器的UI引擎进行渲染。

而操做dom会产生几种动做，极大的影响渲染的效率。其中 layout（布局）和paint（绘制）是最大的。

1. layout 就是布局变更形成从新计算（耗CPU，有时也很耗内存）
2. paint 就是调用浏览器UI引擎进行渲染展现页面（耗CPU和内存）

参考这一篇，讲的很详细

• Virtual DOM算法的步骤以下：

1. 用 JavaScript 对象结构表示 DOM 树的结构；
2. 而后用这个树构建一个真正的 DOM 树，插到文档当中当状态变动的时候，从新构造一棵新的对象树。
3. 而后用新的树和旧的树进行比较，记录两棵树差别把2所记录的差别应用到步骤1所构建的真正的DOM树上，视图就更新了

如何理解虚拟DOM? - 戴嘉华的回答 - 知乎

• 虚拟DOM先是用js模拟dom，主要是使用el
• 而后是对比虚拟的dom树节点的不一样，主要用的是深搜

比较两棵虚拟树的差别用的是diff算法，核心是深搜，首先对比DOM树中每层的差别，并标记进行差别，而后使用相似动态规划来求出最小编辑距离

• 声明式渲染

1. 命令式渲染 ： 命令咱们的程序去作什么，程序就会跟着你的命令去一步一步执行
2. 声明式渲染 ： 咱们只须要告诉程序咱们想要什么效果，其余的交给程序来作。

这篇文章里不只有声明式渲染，还介绍了vue中基本内容

5.路由用原生js如何实现

前端中的路由有两种实现方式，一种html5的，另外一种就是vue的hashhash路由，就是常见的 # 号，这种方式兼容性更好。

1. 切换页面：路由的最大做用就是切换页面，以日后台的路由是直接改变了页面的url方式促使页面刷新。可是前端路由经过 #号不能刷新页面，只能经过 window 的监听事件 hashchange 来监听hash的变化，而后捕获到具体的hash值进行操做，手动下载js
2. 注册路由：咱们须要把路由规则注册到页面，这样页面在切换的时候才会有不一样的效果。
3. 异步加载js：通常单页面应用为了性能优化，都会把各个页面的文件拆分开，按需加载，因此路由里面要加入异步加载js文件的功能。异步加载咱们就采用最简单的原生方法，建立script标签，动态引入js。
4. 参数传递：在咱们动态引入单独模块的js以后，咱们可能须要给这个模块传递一些单独的参数。这里借鉴了一下jsonp的处理方式，咱们把单独模块的js包装成一个函数，提供一个全局的回调方法，加载完成时候再调用回调函数。

流程：

来自这篇文章，讲的很细致
这个也做为参考，代码简单一些，但和上一篇略有不一样

6.vue中组件通讯

挺好理解的，就是建立一个中央事件总线作为通讯桥梁，须要传值的组件中用bus.$emit触发一个自定义事件，并传递参数，在须要接收数据的组件中用bus.$on监听自定义事件，并在回调函数中处理传递过来的参数
平级组件通讯
父子组件通讯