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生命周期
《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包装成一个函数,提供一个全局的回调方法,加载完成时候再调用回调函数。

流程:
《vue常用知识点总结》

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

6.vue中组件通信

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

    原文作者:温茶儿
    原文地址: https://segmentfault.com/a/1190000014834486
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞