跟着小洪学Object响应式原理，从入门到吊打面试官

2024-02-03 08:18:31

响应式原理概述

响应式原理，又称数据绑定原理，是一种将数据状态与UI视图绑定在一起的技术。当数据状态发生变化时，UI视图也会随之更新。响应式原理是前端开发中非常重要的知识点，也是面试官非常喜欢问到的问题之一。

Object响应式原理

Object响应式原理是响应式原理最基础的一种实现方式。Object响应式原理的核心思想是，在Object对象上添加一个getter和一个setter方法，当对象的属性被访问时，会触发getter方法，当对象的属性被修改时，会触发setter方法。在setter方法中，我们可以做一些额外的操作，比如通知UI视图更新。

const obj = {
  name: '小明',
  age: 18
}

Object.defineProperty(obj, 'name', {
  get() {
    return this._name
  },
  set(newValue) {
    this._name = newValue
    // 通知UI视图更新
  }
})

obj.name = '小红'

console.log(obj.name) // '小红'

Vue2响应式原理

Vue2的响应式原理是基于Object响应式原理的。Vue2在Object响应式原理的基础上，添加了依赖收集和更新机制。依赖收集是指，当一个组件的模板中使用了某个数据，那么这个组件就会被收集为该数据的依赖。当数据的变化时，会通知依赖该数据的组件更新。

const app = new Vue({
  data() {
    return {
      name: '小明',
      age: 18
    }
  },
  template: `
    <div>
      <p>{{ name }}</p>
      <p>{{ age }}</p>
    </div>
  `
})

app.$mount('#app')

app.name = '小红'

console.log(app.name) // '小红'