Vue3快速上手
1. Vue3简介
- 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)
- 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者
- github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0
2. Vue3带来了什么
1. 性能的提升
-
打包大小减少41%
-
初次渲染快55%, 更新渲染快133%
-
内存减少54%
…
2. 源码的升级
-
使用Proxy代替defineProperty实现响应式
-
重写虚拟DOM的实现和Tree-Shaking
…
3. 拥抱TypeScript
- Vue3可以更好的支持TypeScript
4. 新的特性
-
Composition API(组合API)
- setup配置
- ref与reactive
- watch与watchEffect
- provide与inject
- …
-
新的内置组件
- Fragment
- Teleport
- Suspense
-
其他改变
- 新的生命周期钩子
- data 选项应始终被声明为一个函数
- 移除keyCode支持作为 v-on 的修饰符
- …
一、创建Vue3.0工程
1. 使用 vue-cli 创建
官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve
2. 使用 vite 创建
官方文档:https://v3.cn.vuejs.org/guide/installation.html#vite
vite官网:https://vitejs.cn
- 什么是vite?—— 新一代前端构建工具。
- 优势如下:
- 开发环境中,无需打包操作,可快速的冷启动。
- 轻量快速的热重载(HMR)。
- 真正的按需编译,不再等待整个应用编译完成。
## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev
二、常用 Composition API
1. 拉开序幕的setup
-
理解:Vue3.0中一个新的配置项,值为一个函数。
-
setup是所有Composition API(组合API)“ 表演的舞台 ”。
-
组件中所用到的:数据、方法等等,均要配置在setup中。
-
setup函数的两种返回值:
- 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。(重点关注!)
- 若返回一个渲染函数:则可以自定义渲染内容。(了解)
-
注意点:
- 尽量不要与Vue2.x配置混用
- Vue2.x配置(data、methos、computed…)中可以访问到setup中的属性、方法。
- 但在setup中不能访问到Vue2.x配置(data、methos、computed…)。
- 如果有重名, setup优先。
- setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)
<template> <h1>一个人的信息</h1> <h2>姓名:{ { name }}</h2> <h2>年龄:{ { age }}</h2> <h2>性别:{ { sex }}</h2> <h2>a的值是:{ { a }}</h2> <button @click="sayHello">说话(Vue3所配置的——sayHello)</button><br /><br /> <button @click="sayWelcome">说话(Vue2所配置的——sayWelcome)</button><br /><br /> <button @click="test1">测试一下在Vue2的配置中去读取Vue3中的数据、方法</button><br /><br /> <button @click="test2">测试一下在Vue3的setup配置中去读取Vue2中的数据、方法</button> </template> <script> // import {h} from 'vue' export default { name: 'App', data() { return { sex: '男', a: 100 } }, methods: { sayWelcome() { alert('欢迎来到尚硅谷学习') }, test1() { console.log(this.sex) console.log(this.name) console.log(this.age) console.log(this.sayHello) } }, //此处只是测试一下setup,暂时不考虑响应式的问题。 async setup() { //数据 let name = '张三' let age = 18 let a = 200 //方法 function sayHello() { alert(`我叫${ name},我${ age}岁了,你好啊!`) } function test2() { console.log(name) console.log(age) console.log(sayHello) console.log(this.sex) console.log(this.sayWelcome) } //返回一个对象(常用) return { name, age, sayHello, test2, a } //返回一个函数(渲染函数) // return ()=> h('h1','尚硅谷') } } </script>
- 尽量不要与Vue2.x配置混用
2. ref函数
-
作用: 定义一个响应式的数据
-
语法:
const xxx = ref(initValue)
-
创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。
-
JS中操作数据:
xxx.value
-
模板中读取数据: 不需要.value,直接:
<div>{ {xxx}}</div>
<template> <h1>一个人的信息</h1> <h2>姓名:{ {name}}</h2> <h2>年龄:{ {age}}</h2> <h3>工作种类:{ {job.type}}</h3> <h3>工作薪水:{ {job.salary}}</h3> <button @click="changeInfo">修改人的信息</button> </template> <script> import { ref} from 'vue' export default { name: 'App', setup(){ //数据 let name = ref('张三') let age = ref(18) let job = ref({ type:'前端工程师', salary:'30K' }) //方法 function changeInfo(){ name.value = '李四' age.value = 48 // console.log(job.value) job.value.type = 'UI设计师' job.value.salary = '60K' // console.log(name,age) } //返回一个对象(常用) return { name, age, job, changeInfo } } } </script>
-
-
备注:
- 接收的数据可以是:基本类型、也可以是对象类型。
- 基本类型的数据:响应式依然是靠
Object.defineProperty()
的get
与set
完成的。 - 对象类型的数据:内部 “ 求助 ” 了Vue3.0中的一个新函数——
reactive
函数。
3. reactive函数
- 作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用
ref
函数) - 语法:
const 代理对象= reactive(源对象)
接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象) - reactive定义的响应式数据是“深层次的”。
- 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。
<template>
<h1>一个人的信息</h1>
<h2>姓名:{
{person.name}}</h2>
<h2>年龄:{
{person.age}}</h2>
<h3>工作种类:{
{person.job.type}}</h3>