Vue内部原理（一） | 小册免费学

这个系列我们主要说的是Vue的数据绑定原理，其他的过程我们不在本系列中讲解

那么话不多说，我们来直奔主题

先来贴一张官网的响应式原理图，相信大家应该已经看n次了，你应该也知道Object.defineProperty()这个API，为了照顾没有基础的同学，我们来简单的复习一下Object.defineProperty()，你也可以去MDN了解更详细的语法（如果对这一块非常自信可以直接跳到下一节）

Object.defineProperty()接收三个参数，分别是要劫持的对象，要劫持的属性名称，要定义或修改的属性描述

Object.defineProperty(obj, key, descriptor)

前两个很好理解，那么属性描述是什么呢？属性描述是一个描述属性状态的对象，可以设置属性的可枚举、可配置等，如下

{
  // 以下都是默认值
  configurable: false, // 设置属性的可配置性，设置为true时描述符可以改变
  enumerable: false, // 可枚举性，可以被for...in等遍历
  value: undefined, // 属性值
  writable: false, // 设置为true时属性值可以被重写
  get: undefined, // 可以设置读取属性值时触发函数
  set: undefined, // 可以设置重写属性值时触发函数
}

举个🌰

const bar = {}
var val = undefined
Object.defineProperty(bar, 'name', {
  get() {
    console.log('读取name的值')
    return val
  },
  set(newVal) {
    val = newVal
    console.log('设置name的值')
  }
})

可以看到当bar的name属性在读取和重写时都出发现了相应的方法

但是这样对每一个属性去进行劫持有多麻烦，所以一般在使用时要对它进行一层封装，做到可以通用

function defineReactive(obj, key, val) {
  Object.defineProperty(obj,key,{
    get() {
      console.log('读取name的值')
      return val
    },
    set(newVal) {
      val = newVal
      console.log('设置name的值')
    }
  }
}
const bar = {}
defineReactive(bar, 'name', 'king')

现在我们已经作好了准备，开始探秘响应式原理吧😀

本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情