Vue3早就发布了,博主一直拖到今天才开始学习,主要还是因为博主
懒学习前端时间不长,前端要学的东西太多了,加上博主买的书还有学习的项目都是Vue2的,所以就一直在研究Vue2了,今天终于准备上手Vue3了!!!来带你一起快速上手
本文是根据B站尚硅谷的视频《尚硅谷Vue2.0+Vue3.0全套教程,全网最新最强vuejs从入门到精通》 Vue3部分形成的笔记
一、简介
2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)
新事物的出现一定会有他的意义,所以我们先来看看Vue3相比Vue2有哪些改进呢?
1.性能的提升
-
打包大小减少41%
-
初次渲染快55%, 更新渲染快133%
-
内存减少54%
以上数据来自官方,看到这,学习Vue3的热情又高涨了一些
2.源码的升级
-
使用
Proxy
代替defineProperty
实现响应式 -
重写虚拟
DOM
的实现和Tree-Shaking
博主之前的源码系列笔记都是Vue2的,这次就来对比学习吧
3.拥抱TypeScript
- Vue3可以更好的支持
TypeScript
不说了,下一个要学的技术栈就是TS!!!
4.新的特性
-
Composition API(组合API)
setup
配置ref
与reactive
watch
与watchEffect
provide
与inject
-
新的内置组件
Fragment
Teleport
Suspense
-
其他改变
- 新的生命周期钩子
data
选项应始终被声明为一个函数- 移除
keyCode
支持作为v-on
的修饰符
这里有很多新名词,别着急,我们
快速慢慢上手!
二、创建一个Vue项目
1. 使用 vue-cli 创建
官方文档:cli.vuejs.org/zh/guide/cr…
## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建Vue项目,选择Vue3
vue create vue_test
## 启动
cd vue_test
npm run serve
复制代码
当然也可以用可视化面板创建
博主认为,作为前端开发工程师,一切的可视化都是好的!!哈哈,我喜欢用可视化面板,包括git的操作,我也喜欢用VScode的可视化面板操作
vue ui
复制代码
创建项目的时候预设选择Vue3即可
2. 使用 vite 创建
官方文档:v3.cn.vuejs.org/guide/insta…
vite官网:vitejs.cn
-
什么是vite?—— 是Vue团队打造的新一代前端构建工具。
-
优势如下:
- 开发环境中,无需打包操作,可快速的冷启动。
- 轻量快速的热重载(HMR)。
- 真正的按需编译,不再等待整个应用编译完成。
-
传统构建 与 vite构建对比图
传统构建模式,是将所有资源都打包好,再上线
而Vite有点按需加载的意思在那里了~
接下来我们就用Vite来创建一个Vue3的项目
## 创建工程
npm init vite-app yk_vue3
## 进入工程目录
cd yk_vue3
## 安装依赖
npm install
## 运行
npm run dev
复制代码
构建速度明显vite快
项目构建完了,我们就来看看Vue3与Vue2在直观上,有哪些区别吧~
三、分析文件目录
main.js
Vue2项目的main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount(‘#app’)
复制代码
看看vm是什么
const vm = new Vue({
render: h => h(App),
})
console.log(vm)
vm.$mount(‘#app’)
复制代码
我们再来看看Vue3项目中的main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount(‘#app’)
复制代码
我们来分析一下吧
// 引入的不再是Vue构造函数了,引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'
// 创建应用实例对象——app(类似于之前Vue2中的vm,但app比vm更“轻”)
const app = createApp(App)
console.log(app)
// 挂载
app.mount(‘#app’)
复制代码
这里的app到底是啥,我们输出到控制台看看
App.vue
我们再来看看组件
在template
标签里可以没有根标签了
<template>
<!-- Vue3组件中的模板结构可以没有根标签 -->
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
复制代码
接下来我们就来正式的学习Vue3的内容了~
四、Composition API
官方翻译的是组合式 API
官方文档: v3.cn.vuejs.org/guide/compo…
在Vue2中,我们使用的是Options API ,配置项式的API,我们要创建一个Vue实例,然后在里面传入一个配置对象,里面要写data、methods、watch等的东西,而Vue3提出了全新的 Composition API,组合式API,我们不用直接创建Vue实例,而是创建一个app,然后按需引入需要的API,来进行使用...
1、2小节内容可以先跳过,看完这一章回来再看这个对比图效果更佳
1.Options API 存在的问题
使用传统Options API(配置式API)中,新增或者修改一个需求,就需要分别在data,methods,computed里修改 。
2.Composition API 的优势
我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序的组织在一起。
看不明白不要慌,学完下面的内容,再回来看你就懂了~
3. 常用的Composition API
① 拉开序幕的setup
- 理解:Vue3.0中一个新的配置项,值为一个函数。
setup
是所有Composition API(组合API)“ 表演的舞台 ”。- 组件中所用到的:数据、方法等等,均要配置在
setup
中。 setup
函数的两种返回值:- 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。(重点关注!)
- 若返回一个渲染函数:则可以自定义渲染内容。(了解) (不常用)
<template>
<h1>博主的信息</h1>
<h2>姓名:{
{name}}</h2>
<h2>年龄:{
{age}}</h2>
<h2>性别:{
{gender}}</h2>
<button @click="sayInfo">显示信息</button>
</template>
<script>
// import {h} from ‘vue’
export default {
name: “App”,
//此处只是测试一下setup,暂时不考虑响应式的问题。
setup(){
// 数据
let name = “YK菌”
let age = 18
let gender = “男”
<span class="hljs-comment">// 方法</span>
<span class="hljs-keyword">function</span> <span class="hljs-title function_">sayInfo</span>(<span class="hljs-params"></span>){
<span class="hljs-title function_">alert</span>(<span class="hljs-string">`你好<span class="hljs-subst">${name}</span>,你太厉害了吧`</span>)
}
<span class="hljs-keyword">return</span> {
name,age, gender,sayInfo
}
<span class="hljs-comment">// return ()=> h('h1','YK菌yyds')</span>
}
};
</script>
复制代码
如果返回的是渲染函数
那你在template
里写的模板都不奏效了,页面渲染的就是你写的h函数中的内容
- 注意点:
- 尽量不要与Vue2.x配置混用
- Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法。
- 但在setup中不能访问到Vue2.x配置(data、methos、computed...)。
- 如果有重名,
setup
优先。
setup
不能是一个async
函数,因为返回值不再是对象, 而是promise
, 模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)
- 尽量不要与Vue2.x配置混用
上面的数据不是响应式的数据,我们修改它,页面不会有更新,如何定义响应式的数据呢?
② ref
函数
- 作用: 定义一个响应式的数据
- 语法:
const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。
- JS中操作数据:
xxx.value
- 模板中读取数据: 不需要
.value
,直接:<div>{ {xxx}}</div>
- 备注:
- 接收的数据可以是:基本类型、也可以是对象类型。
- 基本类型的数据:响应式依靠的是类上的
getter
与setter
完成的(我们等下看下源码你就知道了)。 - 对象类型的数据:内部 “ 求助 ” 了Vue3.0中的一个新函数——
reactive
函数。
<template>
<h1>博主的信息</h1>
<h2>姓名:{
{ name }}</h2>
<h2>年龄:{
{ age }}</h2>
<h2>职业: {
{ job.type }}</h2>
<h2>工资:{
{ job.salary }}</h2>
<button @click="sayInfo">显示信息</button>
<button @click="changeInfo">修改信息</button>
</template>
<script>
import { ref } from “vue”;
export default {
name: “App”,
setup() {
// 数据
let name = ref(“YK菌”);
let age = ref(18);
let job = ref({
type: “前端工程师”,
salary: “30K”,
});
// 方法
function sayInfo() {
alert(你好<span class="hljs-subst">${name.value}</span>,你太厉害了吧,薪水<span class="hljs-subst">${job.value.salary}</span>这么高
);
}
function changeInfo() {
name.value = “三十年后的YK菌”;
age.value = 48;
job.value.