zoukankan      html  css  js  c++  java
  • Vue原理笔记2

    Vue 模板编译原理

    Vue 中式如何将 template 转换成 render 函数?

    虚拟 DOM:用 对象来描述 DOM 元素
    ast 树:用 对象来描述 JS 语法

    1. 将模板转换成 ast 树(即:用对象来描述真实的 JS 语法)
    2. 优化树
    3. 通过 ast 树再生成 render 函数
    4. render 函数内部调用 _c 方法,产生虚拟 DOM

    v-if 和 v-show 的区别

    v-if 如果条件不成立就不会渲染当前 DOM
    v-show 是切换当前 dom 的显示或隐藏

    为什么 v-if 和 v-for 不能用在一起

    因为 v-for 比 v-if 优先级高,连用的话会给 v-for 生成的每个元素都添加 v-if,影响性能


    Diff 算法时间复杂度

    完全时间复杂度为 O(n3),由于在前端中,很少会跨越层级地移动 DOM 元素,所以 Vue 对其进行了优化,让其虚拟 DOM 只会同层级比较

    Vue 中的 Diff 简单原理

    1. 先同级比较,再比较子节点
    2. 先判断一方是否有子节点
    3. 再判断都有子节点的情况
    4. 递归比较子节点

    Vue 为什么要:key?

    在没 key 的情况下,Vue 对两个树会进行暴力比对,只要标签一样,就复用,所以会造成一些差错
    【注】如果会改变数组的情况,那么 key 最好不要是 index


    组件中 data 为什么是一个函数?

    同一个组件如果被复用多次,会创建多个实例,这些实例用的是同一个构造函数,如果 data 是一个对象的话,那么所有组件都共享了同一个对象,为避免组件之间数据互相影响,所以组件中的 data 要作为一个函数返回对象,以保证数据的独立。

  • 相关阅读:
    Windows API—CreateEvent—创建事件
    C++的注册和回调
    Python内置模块-logging
    使用 C++ 处理 JSON 数据交换格式
    Python生成器
    5.Spring-Boot缓存数据之Redis
    6.Spring-Boot项目发布到独立的tomcat中
    7.Spring-Boot自定义Banner
    8.Spring-Boot之SpringJdbcTemplate整合Freemarker
    9.Spring-Boot之Mybatis-LogBack-Freemarker
  • 原文地址:https://www.cnblogs.com/pengnima/p/13060154.html
Copyright © 2011-2022 走看看