内容简介:Vue3.0的预告已经快一年了,本月的Vue Conf大会上尤雨溪放出了Vue 3.0最重要的RFC,即Function-based API,有不少的小伙伴对此提出质疑。对此,我也想知道这样的一个升级究竟能带来怎样的改变。正好VueJs的开发团队放出了基于Vue2.0的vue-function-api插件,可以在Vue2.0上进行function-api的尝鲜,作为新技术的狂热追求者,必须要试一试的。上面是一个基于function-api简单的显示当前时间的实例代码,关于为什么在外部改变变量的时候能够触发视
Vue3.0的预告已经快一年了,本月的Vue Conf大会上尤雨溪放出了Vue 3.0最重要的RFC,即Function-based API,有不少的小伙伴对此提出质疑。对此,我也想知道这样的一个升级究竟能带来怎样的改变。
正好VueJs的开发团队放出了基于Vue2.0的vue-function-api插件,可以在Vue2.0上进行function-api的尝鲜,作为新技术的狂热追求者,必须要试一试的。
Talk is less, show me the code.
示例
<template> <div id="app"> {{time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds()}} </div> </template> <script lang="ts"> import {interval} from 'rxjs/observable/interval'; import {value as Wrapper} from 'vue-function-api'; const time = Wrapper(new Date()); interval(100).pipe().subscribe(() => { time.value = new Date(); }); export default { setup() { return {time}; } }; </script> 复制代码
解析
上面是一个基于function-api简单的显示当前时间的实例代码,关于为什么在外部改变变量的时候能够触发视图变化,这个问题我相信关注function-api的伙伴们应该都清除了,就不再多说。
可以看到,定义变量和修改变量的代码都是在组件属性对象的外部声明的,这里为了直观放在了同一个文件,其实可以把这部分代码提取出来:
新建一个time.ts文件
import {value as Wrapper} from 'vue-function-api'; import {interval} from 'rxjs/observable/interval'; const time = Wrapper(new Date()); interval(100).pipe().subscribe(() => { time.value = new Date(); }); export default time; 复制代码
这时候Vue文件就只剩下:
<template> <div id="app"> {{time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds()}} </div> </template> <script lang="ts"> import time from './time'; export default { setup() { return {time}; } }; </script> 复制代码
运行完全没问题
这样我们可以在需要显示当前时间的不同组件中引入time这个对象,把它展示出来就OK了。
相信看到这里不少的小伙伴心中已经有些想法了,这不就是vuex的功能吗?没错,这就是一个全局共享数据的实现,和使用vuex完全是一样的,但是比vuex更灵活,并且我们不需要额外的状态管理插件就能实现状态管理了。
watch
看完上面的部分,相信大家已经对function-api的设计方式有了一定的理解,那么我们再来看看watch。
关于Vue2.0的watch有一个诟病的地方,就是被watch的路径是一个字符串,在维护上非常麻烦(比如说重构),如果使用对象引用的方式,就不存在这样的问题了。
const api = require('vue-function-api'); const Vue = require('vue'); const { interval } = require('rxjs/observable/interval'); Vue.use(api.plugin); const value = api.value(new Date()); api.watch(() => value.value, (val, old) => { if (old && val.getSeconds() !== old.getSeconds()) { console.log(`seconds changed from ${old.getSeconds()} to ${val.getSeconds()}`); } }); interval(100) .pipe() .subscribe(() => { value.value = new Date(); }); 复制代码
上面的代码可以直接在js中运行, 也是可以和组件剥离的。
今天主要讲的是一个简单的尝试,至于function-api的使用场景,仍然要在实践中去探索。并且Vue2.0的function-api插件也不建议在生产环境中使用,一切等3.0正式发布再说。
以上所述就是小编给大家介绍的《提前使用Vue 3.0新特性,vue-function-api尝鲜》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Webpack 5 新特性尝鲜
- JDK 16 正式发布,新特性实践尝鲜来啦
- 挑战Kafka!Redis5.0重量级特性Stream尝鲜
- Go 泛型尝鲜
- Vue 2.6 尝鲜
- React Suspense 尝鲜
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入浅出Rust
范长春 / 机械工业出版社 / 2018-8-21 / 89.00元
本书详细描述了Rust语言的基本语法,穿插讲解一部分高级使用技巧,并以更容易理解的方式解释其背后的设计思想。全书总共分五个部分。 第一部分介绍Rust基本语法,因为对任何程序设计语言来说,语法都是基础,学习这部分是理解其他部分的前提。 第二部分介绍属于Rust独一无二的内存管理方式。它设计了一组全新的机制,既保证了安全性,又保持了强大的内存布局控制力,而且没有额外性能损失。这部分是本书......一起来看看 《深入浅出Rust》 这本书的介绍吧!