一文让你30分钟快速掌握Vue3
共 2024字，需浏览 5分钟
·
2020-10-29 11:51
作者：撒点料儿
经过了漫长的迭代，Vue 3.0 终于在上 2020-09-18 发布了，带了翻天覆地的变化，使用了 Typescript 进行了大规模的重构，带来了 Composition API RFC 版本，类似 React Hook 一样的写 Vue，可以自定义自己的 hook ，让使用者更加的灵活，接下来总结一下 vue 3.0 带来的部分新特性。
setup() ref() reactive() isRef() toRefs() computed() watch() LifeCycle Hooks(新的生命周期) Template refs globalProperties Suspense
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
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
setup(props, context) {
let state = reactive({
name: 'test'
});
return state
}
});
script>
三、ref() 函数
ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 value 属性, 只在 setup 函数内部访问 ref 函数需要加.value
<div class="mine">
{{count}} // 10
div>
</template>
十二、vue 3.x 完整组件模版结构
一个完成的 vue 3.x 完整组件模版结构包含了:组件名称、 props、components、setup(hooks、computed、watch、methods 等)
<div class="mine" ref="elmRefs">
<span>{{name}}span>
<br>
<span>{{count}}span>
<div>
<button @click="handleClick">测试按钮button>
div>
<ul>
<li v-for="item in list" :key="item.id">{{item.name}}li>
ul>
div>
template>
vue 3 的生态
官网 源码 vite 构建器 脚手架:https://cli.vuejs.org/ vue-router-next vuex4.0
UI 组件库
vant2.x
Ant Design of Vue 2.x
element-plus
专注分享当下最实用的前端技术。关注前端达人，与达人一起学习进步！
长按关注"前端达人"
