一点 Vue.observable 想法

时间: 2020-03-02阅读: 286标签: vue

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

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8026

简单理解vue中的$nextTick

Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM(dom的改变是发生在nextTick()之后),这个方法作用是当数据被修改后使用这个方法

Vue 的 .sync 修饰符

.sync 修饰符算是 Vue 的所有修饰符中较难理解的一个,本篇文章就带你走近 .sync 的世界,深入理解后会发现,其实也就那么回事。修饰符和指令息息相关,下面从 指令 -> 修饰符 -> .sync 修饰符 由浅入深地来讲解 .sync 的含义及用法。

vue中is的作用和用法

总所周知,ul里面嵌套li的写法是html语法的固定写法(还有如table,select等)。my-component是我们自己写的组件,但是html在渲染dom的时候,my-component对ul来说并不是有效的dom,甚至会报错。

Vue中props知识点

如果你一直在阅读有关\\\"props\\\"内容,你会发现我们可能也一直在使用它们(即使没有意识到),但也许你并不完全确定它们是什么。或者如何正确使用它们,并充分利用它们。

12种使用Vue的最佳做法

随着 VueJS 的使用越来越广泛,出现了几种最佳实践并逐渐成为标准。在本文中,主要分享在平时开发中一些有用资源和技巧,废话少说,我们开始吧。

如何理解vue中的v-bind?

若不是动态属性,首先为其增加驼峰化后的监听,然后再为其增加一个连字符的监听,例如v-bind:foo-bar.sync,首先v-on:update:fooBar,然后v-on:update:foo-bar。v-on监听是通过addHandler加上的。

Vue.use到底是什么?

我们在使用Vue做项目开发的时候,看到不少轮子都是通过Vue.use来进行使用,感觉甚是高大上。不过Vue.use到底是什么鬼?不妨来看个究竟。

Vue.js最佳实践:五招让你成为Vue.js大师

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站

vue介绍

库是一种插件,是一种封装好的特定方法的集合。提供给开发者使用,控制器在使用者手里。框架是一套架构,会基于自身特定向用户提供一套相当完整的解决方案,控制权在框架本身

vue有时候你不需要 $emit & $on

在此之前,子组件到父组件的传递事件我一般还是使用 $emit 和 $on,因为这个操作理解起来并不难,代码一般也挺清晰。不过今天遇到这么个情况 ——

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广