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监听自定义事件，并在回调函数中处理传递过来的参数
平级组件通信
父子组件通信