【vue3】 二、优点

优点：

• composition api 易维护
  composition api解释：组合式api。
  将同一个数据的data、methods、computed、onMounted等放在一起，也可以放在一个单独文件里;

• 按需引用，buil更快

---

vue 2 中通过option方式使用组件

// vue2
// 创建Vue实例
new Vue({render(){}}).$mount('#app')
// 组件option配置方式使用，难维护，
// data、methods见用this互相引用，但this是黑盒，上面挂载了无数看不见的东西，容易出意想不到的报错
export default {
	data(){return {
		name:'cq'
	}},
	methods:{},
	onMounted(){}
}

vue 3 按需引用，通过composition api方式使用组件

// vue3 
// 创建Vue实例
import {createApp, ref, reactive, computed, onMounted} from 'vue'
createApp(App).mount('#app')

组件使用composition api
将count相关的数据和方法放在useCount.js中

// useCount.js
import {ref} from 'vue'

export default function useCount() {
	let count = ref(0)
	function addCount() {
		count.value++
	}
	return {count, addCount}
}

在组件中引用useCount.js

<template>
    <div>
        <button @click="addCount">count is {{count}}</button>
    </div>

</template>

<script>
	import useCount from "./useCount";
	export default {
        setup() {
			let {count, addCount} = useCount();
			return {
				count, addCount,
			}
		}
	}
</script>