vue3选项式API
绝大多数和vue2相同
vue3十大新特性
* setup ---- 组合式API * ref ---- 组合式API * reactive ---- 组合式API * 计算属性computed ---- 组合式API 以及 选项式API * 侦听属性watch ---- 组合式API 以及 选项式API * watchEffect函数 ---- 组合式API * 生命周期钩子 ---- 组合式API 以及 选项式API * 自定义hook函数 ---- 组合式API * toRef和toRefs ---- 组合式API 以及 选项式API * 其他新特性 * shallowReactive 与 shallowRef ---- 组合式API * readonly 与 shallowReadonly ---- 组合式API * toRaw 与 markRaw ---- 组合式API * customRef ---- 组合式API * provide 与 inject ---- 组合式API 以及 选项式API * 响应式数据的判断 ---- 组合式API 以及 选项式API * 新的组件 ----- 类似于新增的HTML标签 * Fragment * Teleport * Suspense * 其他变化 * data选项应始终被声明为一个函数 * 过渡类名的更改 * 移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes --- 事件处理 * 移除v-on.native修饰符 --- 事件处理 * 移除过滤器（filter） --- 单独讲解vue2和vue3差异化
创建第一个vue3应用
每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例：
<div id="app"></div> import { createApp } from 'vue' const app = createApp({ /* 根组件选项 */ }) app.mount('#app')
简单计数器案例：01_base/04_counter.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计数器案例</title> </head> <body> <div id="app"> 点击了{{ count }}次 <!-- vue绑定事件 v-on:click="add" --> <!-- vue绑定事件 @click="add" --> <!-- add 即为添加的自定义的函数 --> <button @click="add">加1</button> </div> </body> <script src="../lib/vue.global.js"></script> <script> const { createApp } = Vue const app = createApp({ data () { return { count: 0 } }, // 所有vue自定义的事件都在 methods 选项中 methods: { add () { // 可以直接通过 this.params 赋值 从而修改状态 // 像 data methods 等选项 只是标识而已 // this.count = this.count + 1 this.count++ } } }) app.mount('#app') </script> </html>
1.我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。
应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：
API风格
参考链接
目标：选项式API以及组合式API如何选择
01_base/05_composition.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计数器案例 - 组合式API</title> </head> <body> <div id="app"> 点击了{{ count }}次 <button @click="add">加1</button> </div> </body> <script src="../lib/vue.global.js"></script> <script> const { createApp, ref } = Vue const app = createApp({ // setup 即为组合式API的标识 setup () { const count = ref(100) console.log(count) console.log(count.value) // 自定义的函数 const add = () => { count.value = count.value + 1 } return { // 返回view层需要的数据以及方法 count, add } } }) app.mount('#app') </script> </html>
使用组合式API可以
- 更好的逻辑复用
- 更灵活的代码组织
- 更好的类型推导
- 更小的生产包体积
选项式 API 确实允许你在编写组件代码时“少思考”，这是许多用户喜欢它的原因。然而，在减少费神思考的同时，它也将你锁定在规定的代码组织模式中，没有摆脱的余地，这会导致在更大规模的项目中难以进行重构或提高代码质量。在这方面，组合式 API 提供了更好的长期可维护性。
组合式 API 能够覆盖所有状态逻辑方面的需求
一个项目可以同时使用两种API
选项式API不会被抛弃
Vue.createApp({
data () {
return {
msg: ‘hello msg’
}
},
components: {
FancyButton: {
template: ‘#fancyButton’
}
}
}).mount(‘#app’)
```
