vue3初体验

vue官网已经默认vue3版本了，再不学习vue3就out了~

🍇vue3开发应用搭建

npm init vue@latest

这一指令将会安装并执行 create-vue，并且需要保证在使用该命令前将node升级到16.0版本以上。
创建项目完成后：

cd <your-project-name>
npm install
npm run dev

就可以运行起来一个vue3项目了~vue3提供了两种api风格，选项式和组合式。
生成的项目中的示例组件是使用组合式 API 和 < script setup > 编写的，而非选项式 API。

打开main.ts文件，发现vue的实例发生了一些变化，由之前的new关键词实例化，转变为createApp方法的调用形式。

	// vue2.x
	new Vue({
	  el: '#app',
	  render: h => h(App)
	})
	
	// vue3.x
	import { createApp } from 'vue'
	import App from './App.vue'
	const app = createApp(App)
	app.mount('#app')

并且打开app.vue发现vue3.0的单文件组件中不再强制要求必须有唯一根元素

<template>
  <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

  <div class="wrapper">
    <HelloWorld msg="You did it!" />
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </div>

  <RouterView />
</template>

🍉什么是组合式API

组合式api（Composition API）算是vue3对开发者来说非常有价值的一个api更新，先不关注具体语法，先对它有一个基本的感知：

options API开发出来的vue应用如下图所示，它的特点是理解容易，因为各个选项都有固定的书写位置，比如响应式数据就写到data选择中，操作方法就写到methods配置项中等，应用大了之后，相信大家都遇到过来回上下找代码的困境

composition API开发的vue应用如下图所示，它的特点是特定功能相关的所有东西都放到一起维护，比如功能A相关的响应式数据，操作数据的方法等放到一起，这样不管应用多大，都可以快读定位到某个功能的所有相关代码，维护方便，设置如果功能复杂，代码量大，还可以进行逻辑拆分处理


需要注意的是：

1. 选项式api和组合式api俩种风格是并存的关系 并不是非此即彼
2. 需要大量的逻辑组合的场景，可以使用compition API进行增强

🌰例子

需求：实现两个独立的功能：1. 通过点击按钮来控制div的显示和隐藏
2. 通过点击按钮控制div内字体颜色的变化

vue2.x option 版本

<template>
  <div>
    <!-- 功能一模板 -->
    <button @click="show">显示</button>
    <button @click="hide">隐藏</button>
    <div v-if="showDiv">一个被控制显隐的div</div>
  </div>
  <div>
    <!-- 功能二模板 -->
    <button @click="changeRed">红色</button>
    <button @click="changeYellow">蓝色</button>
    <div :style="`color:${fontColor}`">一个被控制字体颜色的的div</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      showDiv: true, // 功能一数据
      fontColor: '' // 功能二数据
    }
  },
  methods: {
    // 功能一方法
    show() {
      this.showDiv = true
    },
    hide() {
      this.showDiv = false
    },
    // 功能二方法
    changeRed() {
      this.fontColor = 'red'
    },
    changeYellow() {
      this.fontColor = 'blue'
    }
  }
}
</script>

vue3.0 composition 版本

<template>
  <div>
    <!-- 功能一模板 -->
    <button @click="show">显示</button>
    <button @click="hide">隐藏</button>
    <div v-if="showDivFlag">一个被控制显隐的div</div>
  </div>
  <div>
    <!-- 功能二模板 -->
    <button @click="changeRed">红色</button>
    <button @click="changeBlue">蓝色</button>
    <div :style="`color:${fontColor}`">一个被控制字体颜色的的div</div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    // 功能一
    const showDivFlag = ref(true)
    function show() {
      showDivFlag.value = true
    }
    function hide() {
      showDivFlag.value = false
    }
    // 功能二

    const fontColor = ref('')
    function changeRed() {
      fontColor.value = 'red'
    }
    function changeBlue() {
      fontColor.value = 'blue'
    }
    return { showDivFlag, show, hide, fontColor, changeRed, changeBlue }
  }
}
</script>

composition api版本优化

<script>
import { ref } from 'vue'
function useShow() {
  const showDivFlag = ref(true)
  function show() {
    showDivFlag.value = true
  }
  function hide() {
    showDivFlag.value = false
  }
  return { showDivFlag, show, hide }
}

function useColor() {
  const fontColor = ref('')
  function changeRed() {
    fontColor.value = 'red'
  }
  function changeBlue() {
    fontColor.value = 'blue'
  }
  return { fontColor, changeRed, changeBlue }
}
export default {
  name: 'App',
  setup() {
    // 功能一
    const { showDivFlag, show, hide } = useShow()
    // 功能二
    const { fontColor, changeRed, changeBlue } = useColor()
    return { showDivFlag, show, hide, fontColor, changeRed, changeBlue }
  }
}
</script>

通过定义功能函数，把两个功能相关的代码各自抽离到一个独立的小函数中，然后通过在setup函数中再把俩个小功能函数组合起来，这样既可以把setup函数变得清爽，又可以方便维护快速定位功能位置。