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会自动判断依赖关系