如何快速上手Vue3
这篇文章主要讲解了"如何快速上手Vue3"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"如何快速上手Vue3"吧！
Vue2 与 Vue3 的对比
对 TypeScript 支持不友好(所有属性都放在了 this 对象上，难以推倒组件的数据类型)
大量的 API 挂载在 Vue 对象的原型上，难以实现 TreeShaking。
架构层面对跨平台 dom 渲染开发支持不友好
CompositionAPI。爱 ReactHook 启发
更方便的支持了 jsx
Vue 3 的 Template 支持多个根标签，Vue 2 不支持
对虚拟 DOM 进行了重写、对模板的编译进行了优化操作...
一、setup 函数
setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口, setup 函数会在 beforeCreate 之后、created 之前执行, vue3 也是取消了这两个钩子，统一用 setup 代替, 该函数相当于一个生命周期函数，vue 中过去的 data，methods，watch 等全部都用对应的新增 api 写在 setup()函数中
setup(props, context) { context.attrs context.slots context.parent context.root context.emit context.refs return { } }props: 用来接收 props 数据
context 用来定义上下文, 上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到, 在 setup() 函数中无法访问到 this，是个 undefined
返回值: return {}, 返回响应式数据, 模版中需要使用的函数
二、reactive 函数
reactive() 函数接收一个普通对象，返回一个响应式的数据对象, 想要使用创建的响应式数据也很简单，创建出来之后，在 setup 中 return 出去，直接在 template 中调用即可
{{name}} // test 三、ref() 函数
ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 value 属性, 只在 setup 函数内部访问 ref 函数需要加.value
{{count}} // 10
在 reactive 对象中访问 ref 创建的响应式数据
{{count}} -{{t}} // 10 -100
四、isRef() 函数
isRef() 用来判断某个值是否为 ref() 创建出来的对象
五、toRefs() 函数
toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据
{{name}} // test {{age}} // 18
六、computed()
该函数用来创造计算属性，和过去一样，它返回的值是一个 ref 对象。里面可以传方法，或者一个对象，对象中包含 set()、get()方法
6.1 创建只读的计算属性
import { computed, defineComponent, ref } from 'vue'; export default defineComponent({ setup(props, context) { const age = ref(18) // 根据 age 的值，创建一个响应式的计算属性 readOnlyAge,它会根据依赖的 ref 自动计算并返回一个新的 ref const readOnlyAge = computed(() => age.value++) // 19 return { age, readOnlyAge } } }); 6.2 通过 set()、get()方法创建一个可读可写的计算属性
七、 watch() 函数
watch 函数用来侦听特定的数据源，并在回调函数中执行副作用。默认情况是懒执行的，也就是说仅在侦听的源数据变更时才执行回调。
7.1 监听用 reactive 声明的数据源
7.2 监听用 ref 声明的数据源
7.3 同时监听多个值
7.4 stop 停止监听
在 setup() 函数内创建的 watch 监视，会在当前组件被销毁的时候自动停止。如果想要明确地停止某个监视，可以调用 watch() 函数的返回值即可，语法如下：
八、LifeCycle Hooks(新的生命后期)
新版的生命周期函数，可以按需导入到组件中，且只能在 setup() 函数中使用, 但是也可以在 setup 自定义, 在 setup 中使用
九、Template refs
通过 refs 来回去真实 dom 元素, 这个和 react 的用法一样,为了获得对模板内元素或组件实例的引用，我们可以像往常一样在 setup()中声明一个 ref 并返回它
还是跟往常一样，在 html 中写入 ref 的名称
在steup 中定义一个 ref
steup 中返回 ref的实例
onMounted 中可以得到 ref的RefImpl的对象, 通过.value 获取真实dom
1111
十、vue 的全局配置
通过 vue 实例上 config 的配置,包含 Vue 应用程序全局配置的对象。您可以在挂载应用程序之前修改下面列出的属性:
const app = Vue.createApp({}) app.config = {...}为组件渲染功能和观察程序期间的未捕获错误分配处理程序。错误和应用程序实例将调用处理程序
app.config.errorHandler = (err, vm, info) => {}可以在应用程序内的任何组件实例中访问的全局属性，组件的属性将具有优先权。这可以代替 Vue 2.xVue.prototype 扩展：
const app = Vue.createApp({}) app.config.globalProperties.$http = 'xxxxxxxxs'可以在组件用通过 getCurrentInstance() 来获取全局 globalProperties 中配置的信息,getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 属性获得当前上下文，这样我们就能在 setup 中使用 router 和 vuex, 通过这个属性我们就可以操作变量、全局属性、组件属性等等
setup( ) { const { ctx } = getCurrentInstance(); ctx.$http }十一、Suspense 组件
在开始介绍 Vue 的 Suspense 组件之前，我们有必要先了解一下 React 的 Suspense 组件，因为他们的功能类似。
React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。
import React, { Suspense } from 'react'; const myComponent = React.lazy(() => import('./Component')); function MyComponent() { return ( Loading... }> Vue3 也新增了 React.lazy 类似功能的 defineAsyncComponent 函数，处理动态引入(的组件)。defineAsyncComponent 可以接受返回承诺的工厂函数。当您从服务器检索到组件定义时，应该调用 Promise 的解析回调。您还可以调用 reject(reason)来指示负载已经失败
import { defineAsyncComponent } from 'vue' const AsyncComp = defineAsyncComponent(() => import('./components/AsyncComponent.vue') ) app.component('async-component', AsyncComp)Vue3 也新增了 Suspense 组件:
Loading ...
十二、vue 3.x 完整组件模版结构
一个完成的 vue 3.x 完整组件模版结构包含了:组件名称、 props、components、setup(hooks、computed、watch、methods 等)
{{name}}
{{count}}
- {{item.name}}
{{name}}
{{count}}
- {{item.name}}
感谢各位的阅读，以上就是"如何快速上手Vue3"的内容了，经过本文的学习后，相信大家对如何快速上手Vue3这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！
