zoukankan      html  css  js  c++  java
  • 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监听自定义事件,并在回调函数中处理传递过来的参数
    平级组件通信
    父子组件通信

  • 相关阅读:
    [VC++]轻松搞VC之定时器(Timer)
    [VC++]VC中如何获得当前系统时间
    [VC++]如何利用this获得窗口句柄
    SMART原则
    SQL配置
    术语百科
    关于SQL锁问题
    第六代OA办公理念(摘录)
    心动机型
    SQL2008R2的索引重建
  • 原文地址:https://www.cnblogs.com/10manongit/p/12802062.html
Copyright © 2011-2022 走看看