Vue 2.6.0 新增了 Vue.observable api，但最近才去尝试使用它。
这东西说新也不新，因为他就是 vue 本身的功能，只是暴露出来，成为新 api 了。
在老版本中，直接用 new Vue({ data: {} }) 也一样。
API 本身
官方文档原文描述是: 让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
然后百度一下这个，几乎全是 使用Vue.observable()进行状态管理 这种文章。
谷歌一下也一样，然后你会发现，国内的文章都是翻译过来的。
所以我想试试能不能做点其他东西。
尝试
我创建了一个可响应对象， const state = Vue.observable({ count: 1 }); ，然后尝试挂载到 data 和 computed 下，发现都可以用，然后我在 state 上加了个方法。
const state = Vue.observable({ count: 1 });
state.add = () => state.count++;
const app = new Vue({
data: {
state,
},
});
当挂载到 data 下，我发现 add 没被代理，所以推测 vue 直接挂载 Vue.observable 创建的对象。
尝试分页封装
我之前做分页，都需要 data 下挂个对象，然后需要计算属性计算当前显示列表。
现在我们可以尝试使用 Vue.observable 封装一个分页方法。
/**
* 生成分页
* @param {any[]} list 数据列表
* @param {number} size 每页条数
*/
const pagination = (list, size = 10) => {
const res = Vue.observable({
/** 当前页码 */
page: 1,
/** 每页条数 */
size,
/** 总页数 */
total: Math.ceil(list.length / size),
/** 当前页显示数据 */
list: [],
});
/** 原数组 */
res.orgList = list;
/** 分页方法 */
res.setPage = (num) => {
res.page += num
const { page, size } = res;
const pos = (page - 1) * size;
res.list = res.orgList.slice(pos, pos + size);
}
// 初始化
res.setPage(0);
return res;
};
代码比较简化，没写 ajax 分页支持，就用最简单的例子来演示，以便于理解。
小总
这个例子中 Vue.observable 将分页功能封装到一个函数中确实简化了不少。
也许还有更多场景可以使用它来优化，那就等待大家去挖掘吧，别再一味翻译国外的文章。
原文：https://www.52cik.com/2020/02/29/vue-observable.html
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！