vue常用知识点总结

xiaokai 发布于2019-08-22 17:10 / 1280人阅读

摘要：这里借鉴了一下的处理方式，我们把多带带模块的包装成一个函数，提供一个全局的回调方法，加载完成时候再调用回调函数。

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

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

vue是数据、视图分离的一个框架，让数据与视图间不会发生直接联系。MVVM

组件化：把整体拆分为各个可以复用的个体

数据驱动：通过数据变化直接影响bom展示，避免dom操作。

可以在原项目的基础上，一两个组件使用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
实现流程：

实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者

实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数

实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

mvvm入口函数，整合以上三者

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

4.虚拟DOM和声明式渲染

为什么要减少DOM操作，DOM操作的时间耗在了哪里？

渲染引擎工作：

解析HTML代码，生产DOM tree

解析CSS样式，结合DOM tree生产Render tree（display: none;的结点不会存在Rendertree上，最后不会被paint）

计算Render tree各个节点的布局信息，比如box的位置、尺寸、颜色、外形等

根据计算后的布局信息，调用浏览器的UI引擎进行渲染。

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

layout 就是布局变动造成重新计算（耗CPU，有时也很耗内存）

paint 就是调用浏览器UI引擎进行渲染展示页面（耗CPU和内存）

参考这一篇，讲的很详细

Virtual DOM算法的步骤如下：

用 JavaScript 对象结构表示 DOM 树的结构；

然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。

然后用新的树和旧的树进行比较，记录两棵树差异把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

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

虚拟DOM先是用js模拟dom，主要是使用el

然后是对比虚拟的dom树节点的不同，主要用的是深搜

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

声明式渲染

命令式渲染：命令我们的程序去做什么，程序就会跟着你的命令去一步一步执行

声明式渲染：我们只需要告诉程序我们想要什么效果，其他的交给程序来做。

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

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

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

切换页面：路由的最大作用就是切换页面，以往后台的路由是直接改变了页面的url方式促使页面刷新。但是前端路由通过 #号不能刷新页面，只能通过 window 的监听事件 hashchange 来监听hash的变化，然后捕获到具体的hash值进行操作，手动下载js

注册路由：我们需要把路由规则注册到页面，这样页面在切换的时候才会有不同的效果。

异步加载js：一般单页面应用为了性能优化，都会把各个页面的文件拆分开，按需加载，所以路由里面要加入异步加载js文件的功能。异步加载我们就采用最简单的原生方法，创建script标签，动态引入js。

参数传递：在我们动态引入多带带模块的js之后，我们可能需要给这个模块传递一些多带带的参数。这里借鉴了一下jsonp的处理方式，我们把多带带模块的js包装成一个函数，提供一个全局的回调方法，加载完成时候再调用回调函数。

流程：

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

6.vue中组件通信

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

云服务器 GPU云服务器 linux数据结构知识点总结位段知识总结年终总结网络总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94918.html

Java学习路线总结，搬砖工逆袭Java架构师（全网最强）

摘要：哪吒社区技能树打卡打卡贴函数式接口简介领域优质创作者哪吒公众号作者架构师奋斗者扫描主页左侧二维码，加入群聊，一起学习一起进步欢迎点赞收藏留言前情提要无意间听到领导们的谈话，现在公司的现状是码农太多，但能独立带队的人太少，简而言之，不缺干 ? 哪吒社区Java技能树打卡【打卡贴 day2...

Scorpion 2021-11-18 10:02 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0