Vue响应式原理

Vue中文文档深入响应式原理

文档里面讲解的很清楚，这里不在赘述，下面记录一下自己遇到的问题和对文档的理解。

问题：
在页面上拖拽DOM元素，并对数据根据某个值（如，lesson_sort）进行排序得时候，发现并没有效果。

原因：
由于在拖拽结束后重新赋值 lesson_sort ，并且按照 lesson_sort 排序的时候，在循环中显示的是 lesson_name 的值，代码如下

<template v-for="(item,n) in lesson">
  <span v-html="item.lesson_name"></span>  // 也可以写为 <span>{{ item.lesson_name }}</span>
</template>

仔细阅读文档找到了原因：

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

针对我遇到的问题可以这样解释，在按照 n 重新赋值 lesson_sort 的时候，调用了 lesson_sort
的 setter 并重新渲染页面。但是在 HTML 部分 lesson_name 没有变化，并且在 v-html 指令中 更没有使lesson_name 的 setter 变化，所以页面的 DOM 元素也不会改变。

解决办法：

代码如下，

<template v-for="(item,n) in lesson">
  <span style="display:none">{{ item.lesson_name }}</span>
  <span>{{ item.lesson_name }}</span>
</template>

这个解决办法比较笨拙，但是起到效果了😀。