一点 Vue.observable 想法
2015 年 3 月 17 日
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 分页支持,就用最简单的例子来演示,以便于理解。
直接看下实例吧。