巾帼枭雄之义海豪情2,清河天气,cater gootaer
最近 vue 官方公布了 vue 3.0 最重要的rfc：function-based component api，并发布了兼容 vue 2.0 版本的 plugin：，可用于提前体验 vue 3.0 版本的 function-based component api。笔者出于学习的目的，提前在项目中尝试了。
笔者计划写两篇文章，本文为笔者计划的第一篇，主要为笔者在体验 vue function api 的学习心得。第二篇计划写阅读vue-function-api的核心部分代码原理，包括setup、observable、lifecycle。
本文阅读时间约为15~20分钟。
概述
vue 2.x 及以前的高阶组件的组织形式或多或少都会面临一些问题，特别是在需要处理重复逻辑的项目中，一旦开发者组织项目结构组织得不好，组件代码极有可能被人诟病为“胶水代码”。而在 vue 2.x 及之前的版本，解决此类问题的办法大致是下面的方案：
笔者维护的项目也需要处理大量复用逻辑，在这之前，笔者一直尝试使用mixin的方式来实现组件的复用。有些问题也一直会对开发者和维护者造成困惑，如一个组件同时mixin多个组件，很难分清对应的属性或方法写在哪个mixin里。其次，mixin的命名空间冲突也可能造成问题。难以保证不同的mixin不用到同一个属性名。为此，官方团队提出函数式写法的意见征求稿，也就是rfc：function-based component api。使用函数式的写法，可以做到更灵活地复用组件，开发者在组织高阶组件时，不必在组件组织上考虑复用，可以更好地把精力集中在功能本身的开发上。
注：本文只是笔者使用提前体验 vue function api ，而这个 api 只是 vue 3.0 的 rfc，而并非与最终 vue 3.x api 一致。发布后可能有不一致的地方。
在 vue 2.x 中使用
要想提前在vue 2.x中体验 vue function api ，需要引入，基本引入方式如下：
我要评论
import vue from 'vue';
import { plugin as vuefunctionapiplugin } from 'vue-function-api';
vue.use(vuefunctionapiplugin);
基本组件示例
先来看一个基本的例子：
<template>
<div>
<span>count is {{ count }}</span>
<span>plusone is {{ plusone }}</span>
<button @click="increment">count++</button>
</div>
</template>
<script>
import vue from 'vue';
import { value, computed, watch, onmounted } from 'vue-function-api';
export default {
setup(props, context) {
// reactive state
const count = value(0);
// computed state
const plusone = computed(() => count.value + 1);
// method
const increment = () => {
count.value++;
};
// watch
watch(
() => count.value * 2,
val => {
console.log(`count * 2 is ${val}`);
}
);
// lifecycle
onmounted(() => {
console.log(`mounted`);
});
// expose bindings on render context
return {
count,
plusone,
increment,
};
},
};
</script>
详解
setup
setup函数是vue function api 构建的函数式写法的主逻辑，当组件被创建时，就会被调用，函数接受两个参数，分别是父级组件传入的props和当前组件的上下文context。看下面这个例子，可以知道在context中可以获取到下列属性值：
const mycomponent = {
props: {
name: string
},
setup(props, context) {
console.log(props.name);
// context.attrs
// context.slots
// context.refs
// context.emit
// context.parent
// context.root
}
}
value & state
value函数创建一个包装对象，它包含一个响应式属性value：
那么为何要使用value呢，因为在javascript中，基本类型并没有引用，为了保证属性是响应式的，只能借助包装对象来实现，这样做的好处是组件状态会以引用的方式保存下来，从而可以被在setup中调用的不同的模块的函数以参数的形式传递，既能复用逻辑，又能方便地实现响应式。
直接获取包装对象的值必须使用.value，但是，如果包装对象作为另一个响应式对象的属性，vue内部会通过proxy来自动展开包装对象。同时，在模板渲染的上下文中，也会被自动展开。
import { state, value } from 'vue-function-api';
const mycomponent = {
setup() {
const count = value(0);
const obj = state({
count,
});
console.log(obj.count) // 作为另一个响应式对象的属性，会被自动展开
obj.count++ // 作为另一个响应式对象的属性，会被自动展开
count.value++ // 直接获取响应式对象，必须使用.value
return {
count,
};
},
template: `<button @click="count++">{{ count }}</button>`,
};
如果某一个状态不需要在不同函数中被响应式修改，可以通过state创建响应式对象，这个state创建的响应式对象并不是包装对象，不需要使用.value来取值。
watch & computed
watch和computed的基本概念与 vue 2.x 的watch和computed一致，watch可以用于追踪状态变化来执行一些后续操作，computed用于计算属性，用于依赖属性发生变化进行重新计算。
computed返回一个只读的包装对象，和普通包装对象一样可以被setup函数返回，这样就可以在模板上下文中使用computed属性。可以接受两个参数，第一个参数返回当前的计算属性值，当传递第二个参数时，computed是可写的。
import { value, computed } from 'vue-function-api';
const count = value(0);
const countplusone = computed(() => count.value + 1);
console.log(countplusone.value); // 1
count.value++;
console.log(countplusone.value); // 2
// 可写的计算属性值
const writablecomputed = computed(
// read
() => count.value + 1,
// write
val => {
count.value = val - 1;
},
);
watch第一个参数和computed类似，返回被监听的包装对象属性值，不过另外需要传递两个参数：第二个参数是回调函数，当数据源发生变化时触发回调函数，第三个参数是options。其默认行为与 vue 2.x 有所不同：
// double 是一个计算包装对象
const double = computed(() => count.value * 2);
watch(double, value => {
console.log('double the count is: ', value);
}); // -> double the count is: 0
count.value++; // -> double the count is: 2
当watch多个被包装对象属性时，参数均可以通过数组的方式进行传递，同时，与 vue 2.x 的vm.$watch一样，watch返回取消监听的函数：
const stop = watch(
[valuea, () => valueb.value],
([a, b], [preva, prevb]) => {
console.log(`a is: ${a}`);
console.log(`b is: ${b}`);
}
);
stop();
注意：在rfc：function-based component api初稿中，有提到，是用于清理一些特殊情况的副作用的，目前已经在提案中被取消了。
生命周期
所有现有的生命周期都有对应的钩子函数，通过onxxx的形式创建，但有一点不同的是，destoryed钩子函数需要使用unmounted代替：
import { onmounted, onupdated, onunmounted } from 'vue-function-api';
const mycomponent = {
setup() {
onmounted(() => {
console.log('mounted!');
});
onupdated(() => {
console.log('updated!');
});
// destroyed 调整为 unmounted
onunmounted(() => {
console.log('unmounted!');
});
},
};
一些思考
上面的详解部分，主要抽取的是 vue function api 的常见部分，并非rfc：function-based component api的全部，例如其中的依赖注入，typescript类型推导等优势，在这里，由于篇幅有限，想要了解更多的朋友，可以点开rfc：function-based component api查看。个人也在function-based component api讨论区看到了更多地一些意见：
setup() {
const state = reactive({
count: 0,
});
const double = computed(() => state.count * 2);
function increment() {
state.count++;
}
return {
...tobindings(state), // retains reactivity on mutations made to `state`
double,
increment,
};
}
下一篇文章中，笔者将阅读的核心部分代码原理，包括setup、observable、lifecycle等，从内部探索 vue function api 可能带给我们的改变。
当然，目前 vue function api 还处在讨论阶段，vue 3.0 还处在开发阶段，还是期待下半年 vue 3.0 的初版问世吧，希望能给我们带来更多的惊喜。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论