vue3基础知识剖析_vue.js_

前言

前段时间，由新东方出品直播带货品牌东方甄选火爆全网，其中最受大家关注的主播董宇辉，用网友的调侃来说“长着一个颗粒无收的脸，却拥有五谷丰登的灵魂”。他在直播中推荐五常大米时说：“厨房里充满了饭香，就是人间浪漫。”，介绍水蜜桃：“这个水蜜桃，美好的像穿越大峡谷的风，像仲夏夜的梦”。卖牛排，告诉观众这是“Original Cutting”。让网友赞叹不绝，大家都说这买的不是吃的，买的是知识付费，买的是灵魂洗礼。最重要的是，他尽然还是一个英语老师。很多人感叹，好好读书太重要了，因为知识能给人带来力量，带来高贵的灵魂。相比那些快节奏、声嘶力竭、充满商业诱导的的直播模式，简直就是降维打击。

从笔者的角度来看，董宇辉的成功并非偶然，能够饱读诗书，一定源于自己多年不断的思考跟总结，不断的追求学习的本质才能让自己在无意之间沉淀的像个诗人，像个哲学家。这背后的付出，常人肯定无法想象。作家周岭说过“所谓的学习，不是努力，努力，在努力。而是反馈，反馈，再反馈。光靠一味的输入，而不输出，这种学习大概率是低效率的”。就像咱们前端技术圈一样，框架层出不穷，版本迭代快的让人无法喘息。很多小伙伴都焦虑的呐喊，学不动了。笔者认为，真正高效的学习一定是需要在输入的同时，要有很好的输出，让自己积累更多的正向反馈，就像我们平时学习某一种技术栈一样，光是一味的学习不行，还要做出高质量的实践跟输出才行！

笔者这篇文章会从vue3基础的知识点开始剖析，特别是在将composition API的时候，在代码示例中不会一上来就使用setup语法糖，而是用早期的setup函数，这样方便于初学的小伙伴们理解跟学习。文章篇幅较大，接下来，请您花个10分钟耐心的看完，或许会有不一样的收货。

声明

• 本文中下边所有的示例代码都可以直接访问这个网站点击这里查看效果需要源代码的小伙伴可以在评论区下留言，或者私信我。
• 本文章的讲解的所有实例面向对vue3的初学者，如有讲解不到位，或者有偏差的地方，欢迎大家留言指出。

vue3.0有哪些新特性

• Composition Api （最重要的新特性）
• 组件通信
• 生命周期
• 自定义Hook
• 插槽
• v-model的更改
• 更加纯粹的Tree-shaking
• 配合状态管理的Pinia
• 配合升级的vue-router 4.x
• 配合升级的打包工具vite
• 配合TS在项目中自由使用

vue3.0的优缺点

优点

• 使用vue3最大的优势个人认为倒不是它的Api，而是配合使用的vite打包工具，特别是大型项目本地启动要比当前的webpack5要快至少2倍以上（项目中测试过）
• 比起vue 2.x，Composition Api的优势要明显的多，如果习惯了setup语法糖的写法，你会发现爽的飞起，很多之前在vue 2.x中大量重复逻辑不存在了
• 底层通过Proxy来实现双向绑定，性能上提升了很多
• 对TypeScript支持度更好，可以很愉快的在项目中使用TypeScript

缺点

• 如果还有IE情节的公司，那vue3确实不太适合，因为vue3已经抛弃了对IE11的支持，再说了 微软人家自己都不打算维护IE了，兄弟们，放弃IE拥抱chrome吧！
• Composition Api的写法需要花一点点时间来适应，毕竟学习新语法还是需要成本的

如何解锁vue3.0

体验vue3.0的4中姿势

• 通过CDN

• npm

# 最新稳定版 npm install vue@next npm install -D @vue/compiler-sfc 

如果你是从Vue 2.x升级的，请注意 @vue/compiler-sfc 替换掉了 vue-template-compiler

• vue-cli

npm install -g @vue/cli vue upgrade --next 

• vite

npm init vite@latest  -- --template vue cd  npm install npm run dev

推荐使用第4种方式，直接使用官方推荐最新的vite打包工具，直接初始化项目。

核心的composition API

setup

• setup是vue3提出的一个非常重要的选项，也是Composition Api最为核心的语法之一。
• setup执行时机是在beforeCreate之前执行的。
• setup返回的是一个对象，对象中的所有属性都是可以在template中使用
• setup中不能使用this
• setup中注册生命周期onMounted、watch、computed等，我们会在下边详细讲解

setup参数

• props
• context

setup语法糖

既然上边提到了setup语法，那就有必要把setup语法糖介绍一下，我们在实际的项目开发中在熟悉了setup语法的本质后，也推荐大家使用setup语法糖来编写，这样也可以大大提升开发效率。

• 不需要像上述一样return，只需要在