个人博客导航页(点击右侧链接即可打开个人博客):大牛带你入门技术栈
"别再更新了,实在是学不动了"这句话道出了多少前端开发者的心声,"不幸"的是 Vue 的作者在国庆区间发布了 Vue3.0 的 pre-Aplha 版本,这意味着 Vue3.0 快要和我们见面了。既来之则安之,扶我起来我要开始讲了。Vue3.0 为了达到更快、更小、更易于维护、更贴近原生、对开发者更友好的目的,在很多方面进行了重构:
- 使用 Typescript
- 放弃 class 采用 function-based API
- 重构 complier
- 重构 virtual DOM
- 新的响应式机制
今天咱就聊聊重构后的响应式数据。
尝鲜
重构后的 Vue3.0 和之前在写法上有很大的差别,早前在网络上对于 Vue3.0 这种激进式的重构方式发起了一场讨论,见仁见智。不多说先看看 Vue3.0 在写法上激进到什么程度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const { reactive, computed, effect, createApp } = Vue
const App = {
template: `
<div id="box">
<button @click="add">{
{ state.count }}</button>
</div>
`,
setup() {
const state = reactive({
count: 0
})
function add() {
state.count++
}
effect(() => {
console.log('count改变', state.count);
})
return {
state,
add
}
}
}
createApp().mount(App, '#app')
</script>
</body>
</html>
确实写法上和 Vue2.x 差别有点大,还整出了个 setup。不过我的第一感觉倒不是写法上的差异,毕竟写过 React,这种写法也没啥特别的。关键是这种响应式数据的写法好像在哪里见过有没有?写过 React 项目的人可能一眼就能看出来,没错就是它 mobx,一种 React 的响应式状态管理插件
import {observable,computed,autorun} from "mobx"
var numbers = observable([1,2,3]);
var sum = computed(() => numbers.reduce((a, b) => a + b, 0));
var disposer = autorun(() => console.log(sum.get()));
// 输出 '6'
numbers.push(4);
// 输出 '10'
numbers.push(5);
再看看 Vue3.0 暴露的这几个和响应式数据相关的方法:
- reactive(value)
创建可观察的变量,参数可以是 JS 原始类型、引用、纯对象、类实例、数组、集合(Map|Set)。
- effect(fn)
effect 意思是副作用,此方法默认会先执行一次。如果 fn 中有依赖的可观察属性变化时,会再次触发此回调函数
- computed(()=>expression)
创建一个计算值,
compu