Vue3 | 初体验

项目搭建：
1.安装/升级vue-cli (要求 version > 4)
npm install -g @vue/cli
2.创建项目
vue create vue-next-test （ vue-cli3 项目，创建时可选择ts）
3.添加vue3依赖 (可在vue2项目中无破坏性的引入)
vue add vue-next

API参考文档 ：vue-composition-api-rfc

代码设计

逻辑复用

在项目中我们经常需要复用一些逻辑，官方给出了一个经典**「鼠标追踪」的案例。这个组合函数仅依赖它的「参数」**和 「Vue 全局导出的 API」，而不是依赖于this。

import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => {
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })

  return { x, y }
}

使用时代码非常精简

import { useMousePosition } from './mouse'

export default {
  setup() {
    const { x, y } = useMousePosition()
	// ...
    return { x, y }
  },
}

这种设计方式的优点非常明确：

• 暴露给模板的 property 来源十分清晰，因为它们都是被组合逻辑函数返回的值。
• 不存在命名空间冲突，可以通过解构任意命名
• 不再需要仅为逻辑复用而创建的组件实例。

代码组织

在现在的vue2项目中，我们经常能看到几百上千行的组件。当我们刚接手一个如此庞大的组件时，通常第一反应会去找这个组件处理了什么东西，比如Mounted里干了什么。然而过多的state和methods往往让人不得不上下跳转，查看state是如何变化的，尤其是当我们需要在一个庞大的组件中新增&修改某个特性时。
在Composition API中，我们可以将相同逻辑关注点的代码并列在一起。例如一个后台管理页面，上面是表单搜索部分，下面是表格展示和操作部分。
我们可以这样组织代码：

export default {
  setup() {
      const tableData = ref([])
	  // 表单部分
      const formSearch = useFormSearch(tableData)
	  // 表格操作部分
      const tableOperate = useTableOperate(tableData)
	  // 初始化数据
      onMounted(()=>{
	  	  fetch(url).then(data=>{
		  	tableData.value = data
		  })
      })
      return {
          tableData,
          ...formSearch,
          ...tableOperate
      }
  },
};

我们用use*来定义组合函数名，看起来就跟Hook一样。在useFormSearch和useTableOperate中，我们实现相应的state和methods。

function useFormSearch(tableData){

    const formState = reactive({
        id:'',
        name:''
    })

    const searchByID = () => {
        tableData.value = tableData.value.filter(item=>{
            return item.id == formState.id
        })
    }

    const searchByName = () => {
        tableData.value = tableData.value.filter(item=>{
            return item.name == formState.name
        })
    }

    return {
        ...toRefs(formState),searchByID,searchByName
    }
}

// 表格相关state和操作
function useTableOperate(tableData){

    const checkRow = (id) => {
        console.log(`check row ${id}`)
    }
    const editRow = (id) => {
        console.log(`edit row ${id}`)
    }
	const delRow = (id) => {
		// .....
	}

    return {
        delRow,checkRow,editRow
    }
}

这样一来，在setup中我们可以清晰看到到这个组件的特性，这样在我们在阅读或修改代码的时候，可以很方便的跳转的相应模块。

---

总的来说，Vue3相较于旧版本，让开发变得更加灵活，相较于React Hook，Vue3内部做了很多优化，能降低开发者的心智负担和使用成本。