组合式API与配置项式API混合使用注意事项
混合使用的话，
setup(props, context) {}应作为一个配置项API的一个配置项，然后将它视为Vue 2的beforeCreate周期，在注册components和props之后、在其他配置项加载之前执行。有人说
setup(props, context) {}也可以视为created周期，你最好别这么视为，这会引起很多误解。setup(props, context) {}所return的数据和方法如果与其他配置项的数据和方法重名，以setup() {}为准。无论书写顺序，其他配置项都无法覆盖setup(props, context) {}的数据和方法。混合使用的话，不可以使用ref语法糖。
import { reactive, ref, watch } from "vue"里面的这些方法可以在配置项API里使用，但是通常意义不大，因为配置项API基本沿用Vue 2的写法（有些区别，见官方文档迁移办法）。
setup(props, context) {}里为何不可用this关键字？
官方说的很清楚：
在setup(props, context) {}内部，this不会是该活跃实例的引用，因为setup()是在解析其它组件选项之前被调用的，所以setup()内部的this的行为与其它选项中的this完全不同。
setup(props, context) {}的this指向window，composition的文档中也没有提到怎么获取组件实例，其实方法是：咱们可以通过getCurrentInstance()这个接口获取Vue实例。
如何取得Vue实例？
用getCurrentInstance API，使用方法分2步：
- 赋值在顶层：必须在setup顶层执行赋值：
const instance = getCurrentInstance();
- 使用在周期钩子里：必须在周期钩子里使用，不得在setup里使用：
虽然const instance = getCurrentInstance()必须在顶层，但是此时获取不到上下文，必须写到onBeforeMount(() => {})或其他周期函数里才能获取上下文。
setup(props, context) {
const instance = getCurrentInstance();
onBeforeMount(() => {
console.log(instance.data);
});
}
如何访问this、配置项的data和methods
访问组件实例this、配置项data、配置项methods的办法：
使用组件实例this，就用
instance.proxy。访问配置项的data，就用
instance.data，它具备响应式。执行配置项的methods，就用
instance.ctx.foo()。
向父组件派发事件
-
setup(props, context) {}常规写法的话，setup的第二个参数就是干这个的：
setup(props, context) {
context.emit('ooxx')
}
或者解构：
setup(props, { emit }) {
emit('ooxx')
}
- 语法糖写法的话，先
const instance = getCurrentInstance();，然后在生命周期钩子或者用户触发事件里写上instance.emit("xxx");即可。
如何导出解构的Proxy
如果要解构Proxy，分2种情况讨论：
如果property是基本类型数据，会丢失响应，这时候应当先
const ref = toRefs(Proxy)，然后在return里解构ref变量。如果你确定Proxy所有一级property的值都是引用类型，可以放心解构Proxy。
生命周期钩子可以写到函数里
函数里可以写生命周期钩子，只要函数比周期执行的早就可以：
function fun1() {
// 这里可以用onMounted执行代码
onMounted(() => {})
}
Ref语法糖
实现的前提是：首先给script标签加上setup标记，也就是<script setup>，然后，不允许再使用配置项式API。
不再需要写export default{}
这很棒。
原本是：
<script>
import {onBeforeMount, onMounted} from 'vue'
export default {
name: 'App',
setup() {
onBeforeMount(() => {
// 在挂载前执行某些代码
});
onMounted(() => {
// 在挂载后执行某些代码
});
return {};
}
}
</script>
现在是：
<script setup>
import { reactive, onBeforeMount, onMounted } from "vue";
const a = reactive({ x: 1 });
onBeforeMount(() => {
a.x = 2;
});
onMounted(() => {
a.x = 3;
});
</script>
直接向<template>暴露顶层变量
编译器会自动收集顶层变量，然后return，所以你不需要写return，如果写了反而报错。这很棒。
有些变量在template里用不到，此时的最佳实践：
尽量避免定义这种变量
给这种变量的变量名前面写上下划线，表明是私有变量
<template>
<div>
<button @click="r.b.c++">count is: {{ r.b.c }}</button>
</div>
</template>
<script setup>
import { reactive } from "vue";
let r = reactive({ a: 1, b: { c: 2 } });
</script>
ref标签
ref: t = 10;约等价于let t = ref(10)，依然有些区别，先看例子：
ref: t = 10;
console.log(t); // 10
console.log(t + 1); // 11
console.log(t.value); // undefined
console.log($t); // ref对象
console.log($t + 1); // [object Object]1
console.log($t.value + 1); // 11
也就是说，声明ref: t = 10之后：
- t返回ref对象的内部值，而不是ref对象本身
- t.value返回undefined
- t前加$符号返回ref对象
- $t.value返回内部值
- t对于template来讲是ref对象
这个ref:标签是社区最大的争议点，它的好处是你可以在js里把t当做内部值来随意运算，而template也自动把它当做ref对象。当你需要在js里调用ref对象的时候，你可以用$t，虽然加$也是一种心智负担，但是这种需求概率太低了，因为你极少需要获取ref对象。这就是Vue创始人推荐使用ref:标签的理由。
我建议尽量使用ref:标签，除非你真的很讨厌这种语法糖。
使用<script setup>标签，如何获取props和context？
没使用<script setup>标签的时候，setup(props, context) {}自带参数用来获取props和context，现在setup(props, context) {}已经省略了，如何获取props和context呢？
1. 使用useContext获取context
useContext()返回的内容跟不用<script setup>标签时候setup(props, context) {}的context的返回内容完全一致。
console.log(useContext());
2. 使用defineProps接收props
defineProps({
msg: String
})
或：
defineProps({
msg: {
type: String,
default: ''
})
3. 借助useContext使用props
const ctx = useContext();
console.log(ctx.props);
4. 允许直接修改props
Vue 2中不允许直接修改props，得用this.$emit，但是Vue 3允许直接修改，只不过修改的是组件内props的值，并不会影响父组件的传入值。
有时候直接修改props很有用，比如父组件将ajax的结果数据给子组件，子组件修改数据并不需要通知父组件，父组件也没兴趣知道修改成什么，这时候子组件直接修改数据即可。
5. 不要解构props
最好不要解构props，也就是说最好分开传入props，如果props的property是基本类型数据，会导致响应式丢失，对它的修改会反映不到DOM上。
在setup中调用store
在Vue2中使用 Vuex，我们都是通过this.$store来与获取到Vuex实例，但上一部分说了原本Vue2中的this的获取方式不一样了，并且我们在Vue3的getCurrentInstance().proxy中也没有发现$store这个属性，那么如何获取到Vuex实例呢？这就要通过vuex中的一个方法了，即useStore。
// store 文件夹下的 index.js
import Vuex from 'vuex'
const store = Vuex.createStore({
state: {
name: '王XX',
age: 18
},
mutations: {
// ……
},
// ……
})
// example.vue
<script>
// 从 vuex 中导入 useStore 方法
import {useStore} from 'vuex'
export default {
setup() {
// 获取 vuex 实例
const store = useStore()
console.log(store)
}
}
</script>
然后接下来就可以像之前一样正常使用vuex了。
如何避免用配置项思维编写组合式代码？
有人说，很多人编写组合式API依然习惯用配置项思维，最终还是会形成data区域、computed区域、周期钩子区域、methods区域等。如果赶上“随缘”性格的程序员，他会连区域都不分，只会东一榔头西一棒槌式的随意编写，使用组合式API反而更乱。
其实，这不是组合式API的锅，因为任何编程方式都有最佳实践一说：
- data方面
忘记古老的var时代的最佳实践。在古代，var声明的变量存在变量提升现象，为了防止愚蠢的程序员出了bug还搞不清为什么出bug，所以最佳实践建议var声明变量永远写在作用域最顶部。现在是let时代，并不需要这种最佳实践，所以应该就近声明变量。这样也就不会有所谓“data区域”了。
计算变量也是同样道理。
- 周期钩子方面
因为现在可以叠加设置周期钩子，相信很少有蠢人会只定义一个钩子。
钩子应紧随业务，不要在本业务的钩子里写其他业务的内容。
- methods方面
methods的本质就是函数，函数声明也应做到就近声明，就近使用，千万不要把函数故意提升到作用域顶部。
- 公用代码方面
应当放在顶部，这是起码的最佳实践。
- 拆分组件
你一个组件5千行，你还不拆分，你要作死啊？
- 多用混入等其他手段
就不多说了。
