「这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战」。
前言
上一篇我们回顾了vue2中重要的知识点。
vue3更新了什么
主要变动有：
- 组合式 API新特
- 全局 Vue API 已更改为使用应用程序实例
- 全局和内部 API 已经被重构为支持 tree-shake
- 只能使用普通函数来创建组件
- 过滤器 (filter)的移除
- 其他完整改动点击查看官方链接
组合API-Setup
1.Setup接收两个参数 props context
2.组件中用到的数组、方法等都配置在setup里面。
3.如果 setup 返回一个对象，那么该对象的 property 以及传递给 setup 的 props 参数中的 property 就都可以在模板中访问到。
例如：
export default {
props: {
collectionName: String
},
setup(props) {
const readersNumber = ref(0)
const book = reactive({ title: 'Vue 3 Guide' })
// 暴露给 template
return {
readersNumber,
book
}
}
}
也就是说代码中readersNumber和book就是可访问的,当然之前data的写法也是可以用，但是最好不要在一起使用了。
4.setup 还可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态：
import { h } from 'vue'
export default {
setup() {
return () => h('div', '你好！')
}
}
代码什么意思呢，很简单就是渲染一个<div>你好</div>，并且作用域中的dom会直接无效。
组合式API-生命周期钩子
因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，在这些钩子中编写的任何代码都应该直接在 setup 函数中通过“on-钩子函数名”的方式编写。
比如：Mounted
// MyBook.vue
export default {
setup() {
// mounted
onMounted(() => {
console.log('Component is mounted!')
})
}
}
需要注意的是：beforeCreate和beforeCreate 是Not needed - Hook inside setup。
组合式API-Provide / Inject
Provide：提供者。 Inject：投入者。 Provide / Inject主要用于多级组件的通信
举个例子，我们先通过Provide提供。
<!-- src/components/MyMap.vue -->
<template>
<MyMarker />
</template>
<script>
import { provide } from 'vue'
import MyMarker from './MyMarker.vue'
export default {
components: {
MyMarker
},
setup() {
provide('zhangsan', {
age: 21,
sex: 1
})
}
}
</script>
使用 inject:
inject 函数有两个参数：
- 要 inject 的 property 的 name
- 默认值 (可选) 然后咱们通过Inject接收
<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'
export default {
setup() {
const zhangsan = inject('zhangsan')
return {
zhangsan
}
}
}
</script>
就是这么简单
