Vue3 响应式原理

写在最前，本文转自掘金

前言

先看看下面这段代码

let name = '某某人', age = 23
let myself = `${name}今年${age}`
console.log(myself)   // 某某人今年23

age = 24

console.log(myself)   // 某某人今年23

这里和预期的不一样，因为需要重新给myself在赋值一次才行

effect

上面所说，如果改变其中变量值进而得到新的myself需要再次执行，为了方便，我们封装一个effect函数

let name = '某某人',age = 23
let myselft = ''
const effect = _=> myself = `${name}今年${age}`

effect()  // 先执行一次
console.log(myself)  // 某某今年23
age = 24

efftct()  // 再次执行
console.log(myself)  // 某某今年24

其实这样写还是不够优雅，如果有多个变量，需要写多个函数并且执行多个

track和trigger

针对上面的问题，可以用track函数把所有依赖于age变量的effect函数都收集起来，放在dep里，dep使用Set数据类型，因为可以自动去重。收集起来后，只要age变量改变，就执行track函数通知dep里所有依赖age变量的effect函数执行，实现依赖变量的更新。

let name = '林三心', age = 22, money = 20
let myself = '', ohtherMyself = ''
const effect1 = () => myself = `${name}今年${age}岁，存款${money}元`
const effect2 = () => ohtherMyself = `${age}岁的${name}居然有${money}元`

const dep = new Set()
function track () {
    dep.add(effect1)
    dep.add(effect2)
}
function trigger() {
    dep.forEach(effect => effect())
}
track() //收集依赖
effect1() // 先执行一次
effect2() // 先执行一次
console.log(myself) // 林三心今年22岁，存款20元
console.log(ohtherMyself) // 22岁的林三心居然有20元
money = 300

trigger() // 通知变量myself和otherMyself进行更新

console.log(myself) // 林三心今年22岁，存款300元
console.log(ohtherMyself) // 22岁的林三心居然有300元

watermark14.jpg

上面讲得都是基础数据类型，如果是对象这种引用类型呢？
前面说了dep是使用Set，由于person拥有age和name两个属性，所以拥有两个dep

watermark14.jpg

所以咱们使用ES6的另个一个数据结构Map来储存

const person = { name: '林三心', age: 22 }
let nameStr1 = ''
let nameStr2 = ''
let ageStr1 = ''
let ageStr2 = ''

const effectNameStr1 = () => { nameStr1 = `${person.name}是个大菜鸟` }
const effectNameStr2 = () => { nameStr2 = `${person.name}是个小天才` }
const effectAgeStr1 = () => { ageStr1 = `${person.age}岁已经算很老了` }
const effectAgeStr2 = () => { ageStr2 = `${person.age}岁还算很年轻啊` }

const depsMap = new Map()
function track(key){
  let dep = depsMap.get(key)
  if(!dep){
    depsMap.set(key, dep = new Set())
  }
  // 这里暂时写死
  if (key === 'name') {
        dep.add(effectNameStr1)
        dep.add(effectNameStr2)
    } else {
        dep.add(effectAgeStr1)
        dep.add(effectAgeStr2)
   }
}
function trigger(key){
  const dep = depsMap.get(key)
  dep.forEach((effect)=>effect())
}
track('name')  // 收集person.name的依赖
track('age')  // 收集person.age的依赖
effectNameStr1()
effectNameStr2()
effectAgeStr1()
effectAgeStr2()
console.log(nameStr1, nameStr2, ageStr1, ageStr2)
// 林三心是个大菜鸟 林三心是个小天才 22岁已经算很老了 22岁还算很年轻啊

person.name = 'sunshine_lin'
person.age = 18

trigger('name') // 通知person.name的依赖变量更新
trigger('age') // 通知person.age的依赖变量更新

console.log(nameStr1, nameStr2, ageStr1, ageStr2)
// sunshine_lin是个大菜鸟 sunshine_lin是个小天才 18岁已经算很老了 18岁还算很年轻啊

上面咱们是只有一个person对象，那如果有多个对象呢？我们知道，每个对象都会建立一个Map来存储次对象里属性的dep，如果有多个对象，该怎么存储每个对象呢？

watermark15.jpg

其实ES6还有一个新的数据结构，叫做WeakMap，所有咱们得对track函数和trigger函数进行改造

const depsMap = new Map()
function track(key){
  let dep = depsMap.get(key)
  if(!dep){
    depsMap.set(key, dep = new Set())
  }
  // 这里先暂且写死
    if (key === 'name') {
        dep.add(effectNameStr1)
        dep.add(effectNameStr2)
    } else {
        dep.add(effectAgeStr1)
        dep.add(effectAgeStr2)
    }
}
function trigger (key) {
    const dep = depsMap.get(key)
    if (dep) {
        dep.forEach(effect => effect())
    }
}

之前的代码只做了单个对象的处理方案，但是现在如果有多个对象，那就得使用WeakMap进行改造

const person = {name:'林三心', age:22}
const animal = {type: 'dog', height:50}

const targetMap = new WeakMap()
function track(target, key){
  let depsMap = targetMap.get(target)
  if(!depsMap){
    targetMap.set(target, depsMap = new Map())
  }

  let dep = depsMap.get(key)
  if(!dep){
    depsMap.set(key, dep = new Set())
  }

  // 这里暂且写死
  if(target === person){
    if(key === 'name'){
      dep.add(effectNameStr1)
      dep.add(effectNameStr2)
    } else {
      dep.add(effectAgeStr1)
      dep.add(effectAgeStr2)
    }
  } else if (target === animal) {
    if (key === 'type') {
       dep.add(effectTypeStr1)
       dep.add(effectTypeStr2)
    } else {
      dep.add(effectHeightStr1)
      dep.add(effectHeightStr2)
    }
  }
}
function trigger(target, key){
  let depsMap = targetMap.get(target)
  if(depsMap){
    const dep = depsMap.get(key)
    dep.forEach(effect=>effect())
  }
}

经过上面的改造，咱们终于实现了多对象的依赖收集，咱们来试试

const person = { name: '林三心', age: 22 }
const animal = { type: 'dog', height: 50 }
let nameStr1 = ''
let nameStr2 = ''
let ageStr1 = ''
let ageStr2 = ''
let typeStr1 = ''
let typeStr2 = ''
let heightStr1 = ''
let heightStr2 = ''

const effectNameStr1 = () => { nameStr1 = `${person.name}是个大菜鸟` }
const effectNameStr2 = () => { nameStr2 = `${person.name}是个小天才` }
const effectAgeStr1 = () => { ageStr1 = `${person.age}岁已经算很老了` }
const effectAgeStr2 = () => { ageStr2 = `${person.age}岁还算很年轻啊` }
const effectTypeStr1 = () => { typeStr1 = `${animal.type}是个大菜鸟` }
const effectTypeStr2 = () => { typeStr2 = `${animal.type}是个小天才` }
const effectHeightStr1 = () => { heightStr1 = `${animal.height}已经算很高了` }
const effectHeightStr2 = () => { heightStr2 = `${animal.height}还算很矮啊` }

track(person, 'name') // 收集person.name的依赖
track(person, 'age') // 收集person.age的依赖
track(animal, 'type') // animal.type的依赖
track(animal, 'height') // 收集animal.height的依赖



effectNameStr1()
effectNameStr2()
effectAgeStr1()
effectAgeStr2()
effectTypeStr1()
effectTypeStr2()
effectHeightStr1()
effectHeightStr2()

console.log(nameStr1, nameStr2, ageStr1, ageStr2)
// 林三心是个大菜鸟 林三心是个小天才 22岁已经算很老了 22岁还算很年轻啊

console.log(typeStr1, typeStr2, heightStr1, heightStr2)
// dog是个大菜鸟 dog是个小天才 50已经算很高了 50还算很矮啊

person.name = 'sunshine_lin'
person.age = 18
animal.type = '猫'
animal.height = 20

trigger(person, 'name')
trigger(person, 'age')
trigger(animal, 'type')
trigger(animal, 'height')

console.log(nameStr1, nameStr2, ageStr1, ageStr2)
// sunshine_lin是个大菜鸟 sunshine_lin是个小天才 18岁已经算很老了 18岁还算很年轻啊

console.log(typeStr1, typeStr2, heightStr1, heightStr2)
// 猫是个大菜鸟 猫是个小天才 20已经算很高了 20还算很矮啊

Proxy

基本概念与语法

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须经过这层拦截。
ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例

var proxy = new Proxy(target, handler);

target 参数表示所要拦截的目标对象，
handler 参数也是一个对象，用来定制拦截行为。

下面是拦截读取属性行为的例子

var obj = new Proxy({}, {
  get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});

其中 get 方法提供三个参数，最后一个参数可选

target 目标对象
key 属性名
receiver proxy实例本身（严格地说，是操作行为所针对的对象）

set 方法提供四个参数，最后一个参数可选

target 目标对象
key 属性名
value 属性值
receiver proxy实例本身（严格地说，是操作行为所针对的对象）

具体实现

通过上面的学习，我们已经可以实现当数据更新时，他的依赖变量也跟着改变，但是需要手动去执行track函数进行依赖收集，并且当数据改变时，我们又得手动去执行trigger函数去进行通知更新
Proxy可以为我们提供自动收集依赖，以及自动通知更新。咱们先写个reactive函数，理解好Proxy-track-trigger这三者的关系，后面会讲到为什么这里Proxy需要搭配Reflect

function reactive(target){
  const handler = {
    //目标对象，属性名，proxy实例本身
    get(target, key, receiver){
      track(receiver, key)   // 访问时收集依赖
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver){
      Reflect.set(target, key, value, receiver)
      trigger(receiver, key)   // 设值时自动通知更新
    }
  }
  return new Proxy(target, handler)
}

然后改一改之前的代码，把手动track和手动trigger去掉，发现也能实现之前的效果

const person = reactive({ name: '林三心', age: 22 }) // 传入reactive
const animal = reactive({ type: 'dog', height: 50 }) // 传入reactive

effectNameStr1()
effectNameStr2()
effectAgeStr1()
effectAgeStr2()
effectTypeStr1()
effectTypeStr2()
effectHeightStr1()
effectHeightStr2()

console.log(nameStr1, nameStr2, ageStr1, ageStr2)
// 林三心是个大菜鸟 林三心是个小天才 22岁已经算很老了 22岁还算很年轻啊

console.log(typeStr1, typeStr2, heightStr1, heightStr2)
// dog是个大菜鸟 dog是个小天才 50已经算很高了 50还算很矮啊

person.name = 'sunshine_lin'
person.age = 18
animal.type = '猫'
animal.height = 20

console.log(nameStr1, nameStr2, ageStr1, ageStr2)
// sunshine_lin是个大菜鸟 sunshine_lin是个小天才 18岁已经算很老了 18岁还算很年轻啊

console.log(typeStr1, typeStr2, heightStr1, heightStr2)
// 猫是个大菜鸟 猫是个小天才 20已经算很高了 20还算很矮啊

可能有的同学会有点懵逼，对上面的代码有点疑惑，也可能有点绕，我还以为通过一张图给大家讲解一下流程

watermark16.jpg

解决写死问题

在上面track函数中，收集依赖写死了判断。实际开发中，肯定不止两个对象，所以要如何解决写死依赖属性名的问题呢。Vue3的作者们想出了一个非常巧妙的办法，使用一个全局变量activeEffect来巧妙解决这个问题，就是每一个effect函数一执行，就把自身放到对应dep里，这样就可以不需要写死了。

watermark17.jpg

我们怎么才能实现这个功能呢？我们需要改装一下effect函数，并且要修改track函数

let activeEffect = null
function effect(fn){
  activeEffect = fn
  activeEffect()
  activeEffect = null // 执行之后立马变成Null
}
function track (traget, key){
  // 如果此时activeEffect 为null则不执行下面
  // 这里判断是为了避免如console.log(person.name)而触发track，不是通过effect函数触发
  if(!activeEffect) return
  let depsMap = targetMap.get(target)
  if(!depsMap){
    targetMap.set(target, depsMap = new Map())
  }

  let dep = desMap.get(key)
  if(!dep){
    despMap.set(key, dep = new Set())
  }
  dep.add(activeEffect)   // 此时把avtiveEffect 添加进去
}

// 每个effect函数改成这么执行
effect(effectNameStr1)
effect(effectNameStr2)
effect(effectAgeStr1)
effect(effectAgeStr2)
effect(effectTypeStr1)
effect(effectTypeStr2)
effect(effectHeightStr1)
effect(effectHeightStr2)

实现ref

咱们在Vue3中是这么使用ref的

let num = ref(5)
console.log(num.value)  // 5

然后num就会成为一个响应式的数据，而且需用num.value才可以访问
既然咱们上面已经实现reactive，只需要这么做就可以实现ref

function ref (initValue){
  return reactive({
    value: initValue
  })
}

最终代码汇总

let activeEffect = null // 用来保存赋值函数
    // 创建存储赋值函数容器，作为依赖下次更新数据    
    const targetMap = new WeakMap()
    // 包装后的赋值函数，触发赋值函数，会通知代理，将当前赋值函数收集
    function effect(fn) {
      activeEffect = fn
      activeEffect() // 触发track中的get方法
      activeEffect = null // 执行完后立即变成null
    }

    // 进行赋值函数依赖收集，由赋值函数触发
    function track(target, key) {
      // 如果此时activeEffect 为null则不执行下面
      // 这里判断是为了避免如console.log(person.name)而触发track，不是通过effect函数触发
      if (!activeEffect) return
      let depsMap = targetMap.get(target)
      if (!depsMap) {
        targetMap.set(target, depsMap = new Map())
      }

      let dep = depsMap.get(key)
      if (!dep) {
        depsMap.set(key, dep = new Set())
      }
      dep.add(activeEffect) // 此时收集当前为全局变量的 赋值函数
    }
    // 发生数据赋值时，触发数据代理，进而调用该函数触发 收集好的依赖，进行调用赋值函数
    function trigger(target, key) {
      let depsMap = targetMap.get(target)
      if (depsMap) {
        const dep = depsMap.get(key)
        if (dep) {
          dep.forEach(effect => effect())
        }
      }
    }
    // 代理数据，如果发生赋值操作，及时通知收集依赖函数
    function reactive(target) {
      const handler = {
        get(target, key, receiver) {
          track(target, key)
          return Reflect.get(target, key, receiver)
        },
        set(target, key, value, receiver) {
          Reflect.set(target, key, value, receiver)
          trigger(target, key)
        }
      }
      return new Proxy(target, handler)
    }

    // ref 实现
    function ref(initValue){
      return reactive({
        value: initValue
      })
    }

    // 定义响应式 对象
    const person = reactive({
      name: '林三心',
      age: 22
    })
    const animal = reactive({
      type: 'dog',
      height: 50
    })
    // 定义 ref包装数据
    let num = ref(5)

    // 定义视图数据
    let nameStr1 = ''
    let nameStr2 = ''
    let ageStr1 = ''
    let ageStr2 = ''
    let typeStr1 = ''
    let typeStr2 = ''
    let heightStr1 = ''
    let heightStr2 = ''
    
    // 视图赋值函数
    const effectNameStr1 = () => {
      nameStr1 = `${person.name}是个大菜鸟`
    }
    const effectNameStr2 = () => {
      nameStr2 = `${person.name}是个小天才`
    }
    const effectAgeStr1 = () => {
      ageStr1 = `${person.age}岁已经算很老了`
    }
    const effectAgeStr2 = () => {
      ageStr2 = `${person.age}岁还算很年轻啊`
    }
    const effectTypeStr1 = () => {
      typeStr1 = `${animal.type}是个大菜鸟`
    }
    const effectTypeStr2 = () => {
      typeStr2 = `${animal.type}是个小天才`
    }
    const effectHeightStr1 = () => {
      heightStr1 = `${animal.height}已经算很高了`
    }
    const effectHeightStr2 = () => {
      heightStr2 = `${animal.height}还算很矮啊`
    }

    // 包装后，用于触发 收集视图赋值函数的函数
    effect(effectNameStr1)
    effect(effectNameStr2)
    effect(effectAgeStr1)
    effect(effectAgeStr2)
    effect(effectTypeStr1)
    effect(effectTypeStr2)
    effect(effectHeightStr1)
    effect(effectHeightStr2)
    // ref包装的响应式数据
    effect(_=>{sum = num.value*100})
    // 打印视图数据
    console.log(nameStr1, nameStr2, ageStr1, ageStr2)
    // 林三心是个大菜鸟 林三心是个小天才 22岁已经算很老了 22岁还算很年轻啊

    console.log(typeStr1, typeStr2, heightStr1, heightStr2)
    // dog是个大菜鸟 dog是个小天才 50已经算很高了 50还算很矮啊
    // 打印ref包装数据
    console.log(sum)
    // 基础数据发生改变，通知代理进而更新视图
    person.name = 'sunshine_lin'
    person.age = 18
    animal.type = '猫'
    animal.height = 20
    // 修改ref包装基础数据
    num.value = 10

    // 视图数据发生改变
    console.log(nameStr1, nameStr2, ageStr1, ageStr2)
    // sunshine_lin是个大菜鸟 sunshine_lin是个小天才 18岁已经算很老了 18岁还算很年轻啊

    console.log(typeStr1, typeStr2, heightStr1, heightStr2)
    // 猫是个大菜鸟 猫是个小天才 20已经算很高了 20还算很矮啊

    // 打印ref包装数据发生改变
    console.log(sum)

Reflect

在这列举Reflect的两个方法

get(target, key, receiver)：个人理解就是，访问target的key属性，但是this是指向receiver，所以实际访问的值是receiver的key的值，但是这可不是直接访问receiver[key]属性，大家要区分
set(target, key, value, receiver)：个人理解就是，设置target的key属性为value，但是this是指向receiver，所以实际是是设置receiver的key的值为value，但这可不是直接receiver[key] = value，大家要区分一下

上面咱们强调了，不能直接receiver[key]或者receiver[key] = value，而是要通过Reflect.get和Reflect.set，绕个弯去访问属性或者设置属性，这是为啥呢？下面咱们举个反例

const person = { name: '林三心', age: 22 }

const proxyPerson = new Proxy(person, {
    get(target, key, receiver) {
        return Reflect.get(receiver, key) // 相当于 receiver[key]
    },
    set(target, key, value, receiver) {
        Reflect.set(receiver, key, value) // 相当于 receiver[key] = value
    }
})

console.log(proxyPerson.name)

proxyPerson.name = 'sunshine_lin' 
// 会直接报错，栈内存溢出 Maximum call stack size exceeded

watermark19.jpg

现在知道为什么不能直接receiver[key]或者receiver[key] = value了吧，因为直接这么操作会导致无限循环，最终报错。所以正确做法是

const person = { name: '林三心', age: 22 }

const proxyPerson = new Proxy(person, {
    get(target, key, receiver) {
        return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
        Reflect.set(target, key, value, receiver)
    }
})

console.log(proxyPerson.name) // 林三心

proxyPerson.name = 'sunshine_lin'

console.log(proxyPerson.name) // sunshine_lin

有同学会发现，Proxy不搭配Reflect也是可以实现取值效果

const person = { name: '林三心', age: 22 }

const proxyPerson = new Proxy(person, {
    get(target, key, receiver) {
        return target[key]
    },
    set(target, key, value, receiver) {
        target[key] = value
    }
})

console.log(proxyPerson.name) // 林三心

proxyPerson.name = 'sunshine_lin'

console.log(proxyPerson.name) // sunshine_lin

为什么Proxy需要搭配Reflect取值

那为什么建议Proxy和Reflect一起使用呢？因为Proxy和Reflect的方法都是一一对应的，在Proxy里使用Reflect会提高语义化

Proxy的get对应Reflect.get
Proxy的set对应Reflect.set
还有很多其他方法我就不一一列举，都是一一对应的

还有一个原因就是，尽量把this放在receiver上，而不放在target上
为什么要尽量把this放在代理对象receiver上，而不建议放原对象target上呢？因为原对象target有可能本来也是是另一个代理的代理对象，所以如果this一直放target上的话，出bug的概率会大大提高，所以之前的代码为什么不建议，大家应该知道了吧？

最后编辑于：2022.07.19 09:45:53

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,012评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,628评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,653评论 0赞 350
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,485评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,574评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,590评论 1赞 293
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,596评论 3赞 414
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,340评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,794评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,102评论 2赞 330
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,276评论 1赞 344
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,940评论 5赞 339
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,583评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,201评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,441评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,173评论 2赞 366
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,136评论 2赞 352