B、B+树和vue部分知识

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、B、B+树
二、vue
总结

前言

一、B、B+树

B和B+树都是多叉搜索树，B树的非叶子节点有key也有值，B+树的非叶子节点只有key没有值，这样他就能放下更多索引值，从而减小树的高度。树的高度是由阶决定的，阶是一个数的分支个数：

索引1 key1 索引2 key2 索引3 key3 索引4 key4 索引n-1 keyn-1 索引n

节点里key的个数等于他的孩子节点数减1，即key=m-1；

每个节点最小孩子数 $m/2$ 向上取整，最大m个孩子，key等于孩子数减一。

B+树是通过双向链表将叶子节点串起来，这样范围查找就比较方便。

在比较好的情况下，B树可以一次查询就返回（因为非叶子节点有data，可以提前命中），但是B+树要走到底；在比较差的情况下，双方都是走到底，但是B+树因为放了更多的索引，索引范围更大，树相对矮，所以IO更少。

二、vue

vue是尤雨溪用javascript写的前端组件。

vue2是选项式组件，vue3是响应式组件，vue主要是管理doc，比如i++后视图层会立即变化，不用手动写doc.get；vue3是vue在vue2的改动上进行的，因为vue2如果增加了新的property则需要$set，并且vue2也不能感知数组索引的变化。他们的实现原理是javascript的"对象元编程"，vue2来自于ES5，vue3来自于ES6，vue2的核心是Object.defineProperty，它会将data里的属性包起来，通过拦截数据的变化动态渲染（控制get和set），vue3的核心是Proxy，他不直接操作对象，而是包裹后拦截所有操作，在vue3中，为了兼容大型项目和TypeScript还改了格式，将相关逻辑写到一起而不是按固定格式分开。

typescript 复制代码

// Vue 3 组合式 (Composition API)
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    // 逻辑块 1：计数器
    const count = ref(0)
    const double = computed(() => count.value * 2)
    function increment() { count.value++ }

    // 逻辑块 2：用户状态
    const user = ref(null)
    function fetchUser() { /* ... */ }

    onMounted(() => { console.log('挂载了') })

    // 返回给模板使用
    return { count, double, increment, user }
  }
}

typescript 复制代码

// Vue 2 选项式 (Options API)
export default {
  data() {          // 放数据
    return { count: 0 }
  },
  methods: {        // 放方法
    increment() { this.count++ }
  },
  computed: {       // 放计算属性
    double() { return this.count * 2 }
  },
  mounted() {       // 放生命周期
    console.log('挂载了')
  }
}

总结

以前一直很苦恼于响应式和选项式，并且觉得vue就是html+css+javascript没有自己的语法，现在大概明白了他做了什么事。