Vue3.0-beta composition API note_综合

介绍

基于option的Vue2.x当代码量足够多时很难区分不同的逻辑，混作一团，基于composition的组织型结构能够很好的区分不同的处理逻辑，并且能够很好的达到复用的目的，类似React Hook（useHandle），composition API 不存在this，省去了很多麻烦。

Vue3.0在语法上与Vue2.x相比没有改变，改变的是API，准确的说就是引入Composition API

增加Tree shaking，按需引入，包更加的小
连续的静态节点，直接使用字符串拼接，innerHTML的形式进行渲染，性能更好

setup

setup可以用作所有组合函数的入口点，setup只会被调用一次，这点与React Hook不同

ref和reactive

ref等同于reactive，引入ref是为了是JavaScript中参数的传递是值的传递而不是引用的传递（计算的返回值可能是基本类型，所以不可避免的需要引入ref），如果直接返回基本变量，则返回后将失去对其的追踪。ref实际是一个对象，value值为值，这样就可以保存对变量的引用，从而可以拦截对.value属性的getter和setter等，从而执行依赖追踪和更改操作。

Vue对渲染ref时对渲染上下文做了特殊处理，以至于在模板语法中不需要使用ref.value的形式获取值，在实际生产中可以将ref变量命名约定使用xxxRef的形式，与普通对象进行区分

reactive的缺陷在于，你始终需要始终保持对返回对象的引用，如下

// 这种情况下将会失去reactive，这不是返回对象
return {
    ...usePosition()}
// 保持reactive的唯一方法是继续使用pos，引用pos.x,pos.y，useMousePosition()是真正的返回对象
return {
    pos: useMousePosition()}

<template><img src="./logo.png"><h1>Hello Vue 3!</h1><h1>pageX:{
    {
    pos.x}}</h1><h1>pageY:{
    {
    pos.y}}</h1>
</template><script>
import {
     ref, onMounted, onUnmounted, reactive } from 'vue'export default{
    setup(){
    // const {x,y} = usePosition();return {
    pos:usePosition()};}
}function usePosition(){
    const pos = reactive({
    x:0,y:0})onMounted(()=>window.addEventListener('mousemove',update));onUnmounted(()=>window.removeEventListener('mousemove',update));function update(e){
    pos.x = e.pageX;pos.y = e.pageY;}return pos;
}</script><style scoped>
img {
    width: 200px;
}
h1 {
    font-family: Arial, Helvetica, sans-serif;
}
</style>

或者将其转化为ref，使用toRefsAPI，将对象上的每个属性转化到对应的ref上

<template><img src="./logo.png"><h1>Hello Vue 3!</h1><h1>pageX:{
    {
    x}}</h1><h1>pageY:{
    {
    y}}</h1>
</template><script>
import {
     ref, onMounted, onUnmounted, reactive, toRefs } from 'vue'export default{
    setup(){
    const {
    x,y} = usePosition();return {
    x,y};}
}function usePosition(){
    const pos = reactive({
    x:0,y:0})onMounted(()=>window.addEventListener('mousemove',update));onUnmounted(()=>window.removeEventListener('mousemove',update));function update(e){
    pos.x = e.pageX;pos.y = e.pageY;}return toRefs(pos);
}</script>

与React Hooks的比较

对顺序没有要求，可以条件性的执行hook，React中hook的执行机制是顺序执行的，当其中一环丢失时可能造成后边的hook失效
每次渲染不重复调用，React在每次渲染都会调用
不需要考虑hook中的useCallback导致的子组件重复渲染问题
不存在useMemo、useEffect没有正确传递依赖数组的问题，Vue会自动判断依赖关系