Vue3_Vue3原理

# Vue3 原理

认识 h 渲染函数

认识 h 函数

• Vue 推荐在绝大数情况下使用模板来创建你的 HTML，然后一些特殊的场景，你真的需要 JavaScript 的完全编程的能力，这个时候你可以使用渲染函数 ，它比模板更接近编译器；
• 前面我们讲解过 VNode 和 VDOM 的概念：
  • Vue 在生成真实的 DOM 之前，会将我们的节点转换成 VNode，而 VNode 组合在一起形成一颗树结构，就是虚拟 DOM（VDOM）；
  • 事实上，我们之前编写的 template 中的 HTML 最终也是使用渲染函数生成对应的 VNode；
  • 那么，如果你想充分的利用 JavaScript 的编程能力，我们可以自己来编写 createVNode 函数，生成对应的 VNode；
• 那么我们应该怎么来做呢？使用 h() 函数：
  • h() 函数是一个用于创建 vnode 的一个函数；
  • 其实更准确的命名是 createVNode() 函数，但是为了简便在 Vue 将之简化为 h() 函数；

h 函数的使用

• h 函数可以在两个地方使用：
  • render 函数选项中；
  • setup 函数选项中（ setup 本身需要是一个函数类型，函数再返回 h 函数创建的 VNode ）；

App.vue

<script>
  import { h } from 'vue'

  export default {
    name: 'App',
    render() {
      return h('div', { className: 'app' }, [h('h2', { className: 'title' }, '我是标题'), h('p', { className: 'content' }, '我是段落')])
    },
  }
</script>

h 函数的计数器案例

在 options API 中使用

App.vue

<script>
import { h } from 'vue'
import HelloWorldVue from './components/HelloWorld.vue'

export default {
  name: 'App',
  data() {
    return {
      counter: 0,
    }
  },
  methods: {
    increment() {
      this.counter++
    },
    decrement() {
      this.counter--
    },
  },

  render() {
    return h('div', { className: 'app' }, [h('h2', null, `当前计数:${this.counter}`), h('button', { onClick: this.increment }, '+1'), h('button', { onClick: this.decrement }, '-1'), h(HelloWorldVue)])
  },
}
</script>

在 setup 中使用

<script>
import { h, ref } from 'vue'
import HelloWorldVue from './components/HelloWorld.vue'

export default {
  setup() {
    const counter = ref(0)
    const increment = () => {
      counter.value++
    }
    const decrement = () => {
      counter.value--
    }
    return () => h('div', { className: 'app' }, [h('h2', null, `当前计数:${counter.value}`), h('button', { onClick: increment }, '+1'), h('button', { onClick: decrement }, '-1'), h(HelloWorldVue)])
  },
}
</script>

<template>
  <div>
    <render />
  </div>
</template>

<script setup>
import { h, ref } from 'vue'
import HelloWorldVue from './components/HelloWorld.vue'

const counter = ref(0)
const increment = () => {
  counter.value++
}
const decrement = () => {
  counter.value--
}

const render = () => h('div', { className: 'app' }, [h('h2', null, `当前计数:${counter.value}`), h('button', { onClick: increment }, '+1'), h('button', { onClick: decrement }, '-1'), h(HelloWorldVue)])
</script>

jsx 的 babel 配置

• 如果我们希望在项目中使用 jsx，那么我们需要添加对 jsx 的支持：

  • jsx 我们通常会通过 Babel 来进行转换（ React 编写的 jsx 就是通过 babel 转换的）；
  • 对于 Vue 来说，我们只需要在 Babel 中配置对应的插件即可；

• 安装 Babel 支持 Vue 的 jsx 插件：npm install @vue/babel-plugin-jsx -D

  • 如果是 Vite 环境，需要安装插件：npm install @vitejs/plugin-vue-jsx -D

• 在 babel.config.js 配置文件中配置插件：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: ['@vue/babel-plugin-jsx'],
}

jsx 计数器案例

<script lang="jsx">
  import HelloWorldVue from './components/HelloWorld.vue'
  export default {
    data() {
      return {
        counter: 0,
      }
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      },
    },

    render() {
      return (
        <div class="app">
          <h2>当前计数:{this.counter}</h2>
          <button onClick={this.increment}>+1</button>
          <button onClick={this.decrement}>-1</button>
          <HelloWorldVue />
        </div>
      )
    },
  }
</script>

响应式原理

什么是响应式

• 我们先来看一下响应式意味着什么？我们来看一段代码：
  • m 有一个初始化的值，有一段代码使用了这个值；
  • 那么在 m 有一个新的值时，怎么能让这段代码可以自动重新执行?

let m = 20
console.log(m)
console.log(m * 2)
m = 40

• 上面的这样一种可以自动响应数据变量的代码机制，我们就称之为是响应式的。
  • 那么我们再来看一下对象的响应式：

响应式函数的设计

• 首先，执行的代码中可能不止一行代码，所以我们可以将这些代码放到一个函数中：
  • 那么我们的问题就变成了，当数据发生变化时，自动去执行某一个函数；

• 但是有一个问题：在开发中我们是有很多的函数的，我们如何区分一个函数需要响应式，还是不需要响应式呢？
  • 很明显，下面的函数中 foo 需要在 obj 的 name 发生变化时，重新执行，做出相应；
  • bar 函数是一个完全独立于 obj 的函数，它不需要执行任何响应式的操作；

响应式函数的实现

• 但是我们怎么区分呢？
  • 这个时候我们封装一个新的函数 watchFn；
  • 凡是传入到 watchFn 的函数，就是需要响应式的；
  • 其他默认定义的函数都是不需要响应式的；

// 定义一个对象
const obj = {
  name: 'why',
  age: 18,
}

// 设计一个专门执行响应式的函数
const reactiveFns = []
function watchFn(fn) {
  reactiveFns.push(fn)
  fn()
}

// 定义一个函数,并传递给 watchFn 函数
watchFn(function foo() {
  console.log('foo', obj.name)
  console.log('foo', obj.age)
  console.log('foo function')
})

// 定义一个函数,并传递给 watchFn 函数
watchFn(function bar() {
  console.log('bar', obj.name)
  console.log('bar', obj.age)
  console.log('bar function')
})

// 修改 obj 的属性
console.log('..........修改了 obj..........')
obj.name = 'kobe'

// 执行定义的函数
reactiveFns.forEach((fn) => {
  fn()
})

响应式依赖的收集

• 目前我们收集的依赖是放到一个数组中来保存的，但是这里会存在数据管理的问题：
  • 我们在实际开发中需要监听很多对象的响应式；
  • 这些对象需要监听的不只是一个属性，它们很多属性的变化，都会有对应的响应式函数；
  • 我们不可能在全局维护一大堆的数组来保存这些响应函数；
• 所以我们要设计一个类，这个类用于管理某一个对象的某一个属性的所有响应式函数：
  • 相当于替代了原来的简单 reactiveFns 的数组；

// 定义一个类
class Depend {
  constructor() {
    this.reactiveFns = []
  }
  addDepend(fn) {
    if (fn) {
      this.reactiveFns.push(fn)
    }
  }
  notify() {
    this.reactiveFns.forEach((fn) => {
      fn()
    })
  }
}

// 定义一个对象
const obj = {
  name: 'why',
  age: 18,
}

// 设计一个专门执行响应式的函数
const dep = new Depend()
function watchFn(fn) {
  dep.addDepend(fn)
  fn()
}

// 定义一个函数,并传递给 watchFn 函数
watchFn(function foo() {
  console.log('foo', obj.name)
  console.log('foo', obj.age)
  console.log('foo function')
})

// 定义一个函数,并传递给 watchFn 函数
watchFn(function bar() {
  console.log('bar', obj.name)
  console.log('bar', obj.age)
  console.log('bar function')
})

// 修改 obj 的属性
console.log('..........修改了 obj..........')
obj.name = 'kobe'
dep.notify()

监听对象的变化

• 那么我们接下来就可以通过之前学习的方式来监听对象的变量：
  • 方式一：通过 Object.defineProperty 的方式（ vue2 采用的方式）；
  • 方式二：通过 new Proxy 的方式（ vue3 采用的方式）；
• 我们这里先以 Object.defineProperty 的方式来监听：

// 定义一个类
class Depend {
  constructor() {
    this.reactiveFns = []
  }
  addDepend(fn) {
    if (fn) {
      this.reactiveFns.push(fn)
    }
  }
  notify() {
    this.reactiveFns.forEach((fn) => {
      fn()
    })
  }
}

// 定义一个对象
const obj = {
  name: 'why',
  age: 18,
}

// 设计一个专门执行响应式的函数
const dep = new Depend()
function watchFn(fn) {
  dep.addDepend(fn)
  fn()
}

// 方案一 : Object.defineProperty() =>  vue2响应式
Object.keys(obj).forEach((key) => {
  let value = obj[key]
  Object.defineProperty(obj, key, {
    set: function (newValue) {
      value = newValue
      dep.notify()
    },
    get: function () {
      return value
    },
  })
})

// 方案二 : new Proxy() =>  vue3响应式

// 定义一个函数,并传递给 watchFn 函数
watchFn(function foo() {
  console.log('foo', obj.name)
  console.log('foo', obj.age)
  console.log('foo function')
})

// 定义一个函数,并传递给 watchFn 函数
watchFn(function bar() {
  console.log('bar', obj.name)
  console.log('bar', obj.age)
  console.log('bar function')
})

// 修改 obj 的属性
console.log('..........修改了 obj 的 name ..........')
obj.name = 'kobe'
console.log('..........修改了 obj 的 age ..........')
obj.age = 20

对象的依赖管理

• 我们目前是创建了一个 Depend 对象，用来管理对于 name 变化需要监听的响应函数：
  • 但是实际开发中我们会有不同的对象，另外会有不同的属性需要管理；
  • 我们如何可以使用一种数据结构来管理不同对象的不同依赖关系呢？
• 在前面我们刚刚学习过 WeakMap，并且在学习 WeakMap 的时候我讲到了后面通过 WeakMap 如何管理这种响应式的数据依赖：

对象依赖管理的实现

正确的依赖收集

• 我们之前收集依赖的地方是在 watchFn 中：
  • 但是这种收集依赖的方式我们根本不知道是哪一个 key 的哪一个 depend 需要收集依赖；
  • 你只能针对一个单独的 depend 对象来添加你的依赖对象；
• 那么正确的应该是在哪里收集呢？应该在我们调用了 Proxy 的 get 捕获器时
  • 因为如果一个函数中使用了某个对象的 key，那么它应该被收集依赖；

对 Depend 重构

• 但是这里有两个问题：
  • 问题一：如果函数中有用到两次 key，比如 name，那么这个函数会被收集两次；
  • 问题二：我们并不希望将添加 reactiveFn 放到 get 中，以为它是属于 Dep 的行为；
• 所以我们需要对 Depend 类进行重构：
  • 解决问题一的方法：不使用数组，而是使用 Set；
  • 解决问题二的方法：添加一个新的方法，用于收集依赖；

创建响应式对象

vue2 响应式原理

• 我们前面所实现的响应式的代码，其实就是 Vue3 中的响应式原理：
  • Vue3 主要是通过 Proxy 来监听数据的变化以及收集相关的依赖的；
  • Vue2 中通过我们前面学习过的 Object.defineProerty 的方式来实现对象属性的监听；
• 我们可以将 reactive 函数进行如下的重构：
  • 在传入对象时，我们可以遍历所有的 key，并且通过属性存储描述符来监听属性的获取和修改；
  • 在 setter 和 getter 方法中的逻辑和前面的 Proxy 是一致的；