vue3出来已经很长一段时间，项目已经用起来了。本篇是使用过程的中的一些零零散散的笔记的。
vue3基础教程：https://www.runoob.com/vue3/vue3-intro.html
在看：不要再用Vue 2的思维写Vue 3了 https://mp.weixin.qq.com/s/W_2Yb7QkcgOdewVqtaEQQQ
vue3的Compostion API时，如果还是用Vue2的形式组织代码，这不但不会提升代码质量，反而因为缺乏约束而降低可读性。 《架构整洁之道》书中提到：对于大多数应用，可维护性比可重用性更加重要。
vue3 借鉴了react hook实现了更自由的编程方式，提出了Composition API，Composition API不需要通过指定一长串选项来定义组件，而是允许用户像编写函数一样自由地表达、组合和重用有状态的组件逻辑，同时提供出色的TypeScript支持。
特别注意事项列表：
$children 实例 property 已从 Vue 3.0 中移除，不再支持。
生命周期的变化
Vue2.x | Vue3 |
|---|---|
beforeCreate | 使用 setup() |
created | 使用 setup() |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestroy | onBeforeUnmount |
destroyed | onUnmounted |
errorCaptured | onErrorCaptured |
Setup(props,context)
https://v3.cn.vuejs.org/guide/composition-api-setup.html
setup替代了以前的 beforeCreate 和 created ，类似于初始化的功能
代码语言：javascript复制import { toRefs } from 'vue'
export default {
props: {
title: String },
setup(props,context) {
console.log(props.title)
const { title } = toRefs(props)
// Attribute (非响应式对象，等同于 $attrs)
console.log(context.attrs)
// 插槽 (非响应式对象，等同于 $slots)
console.log(context.slots)
// 触发事件 (方法，等同于 $emit)
console.log(context.emit)
// 暴露公共 property (函数)
console.log(context.expose)
}}
export default {
setup(props, { attrs, slots, emit, expose }) {
...
}}- setup 函数中只能使用 toRefs 函数来解构 prop，因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性。
- context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。
- attrs 和 slots 是有状态的对象，它们总是会随组件本身的更新而更新。这意味着你应该避免对它们进行解构，并始终以 attrs.x 或 slots.x 的方式引用 property。请注意，与 props 不同，attrs 和 slots 的 property 是非响应式的。如果你打算根据 attrs 或 slots 的更改应用副作用，那么应该在 onBeforeUpdate 生命周期钩子中执行此操作。
执行 setup 时，组件实例尚未被创建。因此，你只能访问以下 property：
- props
- attrs
- slots
- emit
无法访问以下组件选项：
- data
- computed
- methods
getCurrentInstance
getCurrentInstance 支持访问内部组件实例。
getCurrentInstance 只暴露给高阶使用场景，典型的比如在库中。强烈反对在应用的代码中使用 getCurrentInstance。请不要把它当作在组合式 API 中获取 this 的替代方案来使用。
getCurrentInstance 只能在 setup 或生命周期钩子中调用。
代码语言：javascript复制如需在 setup 或生命周期钩子外使用，请先在 setup 中调用 getCurrentInstance() 获取该实例然后再使用。
const MyComponent = {
setup() {
const internalInstance = getCurrentInstance() // 有效
const id = useComponentId() // 有效
const handleClick = () => {
getCurrentInstance() // 无效
useComponentId() // 无效
internalInstance // 有效
}
onMounted(() => {
getCurrentInstance() // 有效
})
return () =>
h(
'button',
{
onClick: handleClick
},
`uid: ${id}`
)
}
}
// 在组合式函数中调用也可以正常执行
function useComponentId() {
return getCurrentInstance().uid
}指令相关
Vue 3 把大多数全局 API 和 内部 helper 移到了 ES 模块中导出(譬如 v-model、transition、teleport)，从而使得 Vue 3 在增加了很多新特性之后，基线的体积反而小了。
具体查看：
Vue3时jsx组件绑定自定义的事件、v-model、sync修饰符
同行文章：
vue3最全的jsx教学，保证业务上手无问题！手敲代码，有知识点，附带和temp https://www.dht.red/blog/blog_content?article_id=54
转载本站文章《踩坑笔记：组合式 API之Setup(props,context)—Vue2.x到Vue3注意》, 请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8682.html
