《Vue3 十》Vue 的底层原理

命令式编程和声明式编程：

以计时器为例：

// 原生 JavaScript 实现计数器，是命令式编程
<div>
    <h1>当前数字：<span class="count"></span></h1>
    <button class="add" @click="handleAdd">+1</button>
    <button class="sub" @click="handleDelete">-1</button>
</div>

const countEl = document.querySelector('.count')
const addEl = document.querySelector('.add')
const subEl = document.querySelector('.sub')

let count  = 0
countEl.textContent = count

addEl.onclick =function () {
    count++;
    countEl.textContent = count
}
subEl.onclick =function () {
    count--;
    countEl.textContent = count
}

// Vue 实现计时器，是声明式编程
<div id="app">
    <h1>当前数字：{
  
  {count}}</h1>
    <button @click="handleAdd">+1</button>
    <button @click="handleSub">-1</button>
</div>

const app = Vue.createApp({
    data() {
        return {
            count: 0,
        }
    },
    methods: {
        handleAdd: function() {
            this.count++;
        },
        handleSub: function() {
            this.count--;
        },
    }
})
app.mount('#app')

1. 命令式编程：需要将要做的每一个步骤都编写一条代码，转化成一个个的命令告知浏览器。关注的是 how to do，自己完成整个 how 的过程。

   原生 JavaScript、jQuery 都是命令式编程。

2. 声明式编程：需要哪些东西就声明哪些东西，具体如何实现不需要管，框架会帮助完成。关注的是 what to do，由框架完成 how 的过程。

   目前，Vue、React、Angular、小程序等都是声明式编程。

MVC 模型和 MVVM 模型：

MVC：

MVC，即 Model- View - Controller。

1. Model：数据模型。负责保存应用数据，与后端数据进行同步。
2. View：UI 视图。负责视图展示，将 Model 中的数据可视化出来。
3. Controller：控制器。负责业务逻辑，根据用户行为对 Model 数据进行更改。

MVC 中所有的通信都是单向的。View 传送指令到 Controller；Controller 完成业务逻辑后，要求 Model 改变状态；Model 将新的数据发送到 View，用户得到反馈。

MVVM：

MVVM ，即 Model - View - ViewModel 。

1. Model：数据模型。
2. View：UI 视图。
3. ViewModel：View 和 Model 的连接器。View 和 Model 通过 ViewModel 实现双向绑定，ViewModel 在底层做了大量的事情来实现数据变化更新视图，视图变化更新数据。

React、Vue、Angular 都是 MVVM 框架。

双向数据绑定的原理：

双向数据绑定：通过 Object.defineProperty()/Proxy 即数据变化更新视图，视图变化更新数据。Vue 的双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的。通过 Object.defineProperty()/Proxy 劫持数据，在数据变化时发布消息给订阅者，通知所有的订阅者进行更新。

Vue2 的响应式原理：

Vue2 的响应式原理基于 Object.defineProperty() 实现，利用 Object.defineProperty() 中的 set() 方法对对象的属性进行劫持，监听到对象属性的改变，就自动执行依赖的代码。

手动实现 Vue2 的响应式：

// 1. 定义一个 watchFn 函数，接收一个回调函数，当其内部依赖到的数据发生变化时，自动执行该回调函数
let reactiveFn