目录
- 一、vue3 介绍
- 二、vue3 创建项目
- 三、setup函数
- 四、ref和reactive
- 五、计算属性和监听属性
- 六、生命周期
- 七、toRefs
- 八、script setup的作用和lang=ts
- 九、vue后台管理模板
- 十、作业
一、vue3 介绍
关于vue项目的版本，新项目使用vue3，有部分老项目使用vue2
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 的修饰符
5 组合式API和配置项API
5.1 Options API 存在的问题
使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。
5.2 Composition API 的优势
我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。
5.3组合式API和配置项API代码对比
# 组合式API和配置项API
vue2 ：配置项API
new Vue({
el:'#app',
data:{}
})
vue3: 组合式API
let name='lqz'
let add=()=>{
}
6 项目分析
分析文件目录
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 创建项目
2.1 使用vue-cli创建项目
创建流程
创建跟之前vue2 一样，只是选择vue版本的时候，选择vue3
因此具体讲解看昨天的博客，这里就简单说一下流程
昨天的博客：https://www.cnblogs.com/zhihuanzzh/p/17137995.html#方式一
步骤一：在cmd中选择项目创建的位置
步骤二：输入命令创建项目
vue create vue3_project1
步骤三：选择自定义模式创建项目
步骤四：选择第三方插件
步骤五：选择vue版本
步骤六：是否开启历史模式
步骤七：选择项目依赖存储位置
步骤八：是否保存当前配置
步骤九：为当前配置命名
创建完成，使用pycharm打开，并运行
注意事项
1.我们会发现vue3的项目中代码有所变化，但是变化不大，都处于看得懂的范畴
2.我们打开项目的src/main.js，会发现组件的注册方式变了，这种注册方式叫链式调用
2.2 使用vite创建项目
新一代前端构建工具，最大的优势就是速度快
官方文档：https://cn.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding
创建项目步骤
步骤一：打开cmd，选择项目创建的位置
步骤二：输入命令创建项目
npm init vue@latest
ps：这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：
步骤三：如果之前没有安装create-vue会自动安装，输入y继续安装
步骤四：配置项目
我们会发现，当我们配置好，几秒之后项目就创好了，这是因为项目依赖并没有一并安装，我们打开项目后还需要手动安装，命令：
cnpm install
启动项目
这里我们也可以去项目中的package.json中查看
{
"name": "vue3_vite_project2",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.45",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"vite": "^4.0.0"
}
}
我们可以看到vite创建的项目中，scripts中的dev键值对，这里就是项目运行时的名称
npm run dev
vite优势
- 优势如下：
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载（HMR）。
- 真正的按需编译，不再等待整个应用编译完成。
- 传统构建 与 vite构建对比图
ps：所谓的热更新就是按需编译，当我们访问某个页面的时候，就编译出那个页面，别的页面如果没有被访问就不会被编译
三、setup函数
# 把项目做成最简洁的
# vue2的创建vue实例和vue3创建vue实例的区别
-new Vew()---->是Vue的实例，里面有$store,$refs...
-createApp(App)--->是个对象，对象里有东西，没有$store,$refs...，以后有用，都是导入使用
# 以后vue3 的<template>，不需要写一个标签了
# 以后都写在setup函数中，定义变量，定义函数，一定要return，在templage中才能使用
# 但是失去了响应式
四、ref和reactive
# 有响应式
-以后定义变量，如果想有响应式就用 ref包裹起来，再修改变量，需要用 变量名.value 修改
# 配置项api和组合式api可以混写，不建议
-在前在data中定义的变量
-在setup中定义的变量
-总结：
在setup中定义的变量和函数，在之前配置项api中可以直接使用this.变量，函数调用即可
但是在原来配置项中定义的变量，函数，在setup中无法使用
# 不同类型做响应式
ref通常用来包裹，数字，字符串类型，以后使用 xx.value
reactive用来包裹数组和对象类型 以后使用 直接用即可
# 总结
ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
reactive定义的数据：操作数据与读取数据：均不需要.value
五、计算属性和监听属性
5.1 计算属性
# computed 的配置项中的写法，不建议用了
computed:{
fullName(){
return this.firstName+this.lastName
}
},
# vue3 新写法
let person = reactive({
firstName: '',
lastName: '',
})
let fullName = computed(() => {
return person.firstName + person.lastName
})
# 计算属性取值和修改值
let fullName = computed({
get() {
return person.firstName + person.lastName
},
set(value) {
person.firstName = value.slice(0, 1)
person.lastName = value.slice(1)
},
})
5.2 监听属性
# 组合式api写法，只要name发生变化，就会触发匿名函数执行
let name = ref('lqz')
watch(name, (newName, oldName) => {
console.log('name变了')
console.log('老的', oldName)
console.log('新的', newName)
})
# watchEffect 用法，只要age变化，就会执行，age不变化，就不会执行
watchEffect(() => {
console.log(age.value)
})
六、生命周期
# vue3的变化，不推荐了
-vue2 和 vue3比较
beforeCreate===>beforeCreate
created=======>created
beforeMount ===>beforeMount
mounted=======>mounted
beforeUpdate===>beforeUpdate
updated =======>updated
beforeDestroy ==>beforeUnmount
destroyed =====>unmounted
# 不推荐用这种写法了，配置项写法，统统写在setup中
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted
# 以前写在created中的代码，现在直接写在setup开始即可
let show = ref(false)
axios.get().then(res=>{
show.value=res.data.show
})
七、toRefs
# 以后setup的返回值可以直接使用
setup() {
let data = reactive({
name: 'lqz',
age: 19,
gender: '男'
})
return {...toRefs(data)}
}
# 以后在模板中直接用 {{name}}
八、script setup的作用和lang=ts
<script setup>
import {ref} from 'vue'
let name = ref('lqz')
let handleClick = () => {
alert('美女')
}
</script>
# 以后 这个script中的代码直接放到 setup函数中，不用return了
#lang=ts
里面代码使用ts写，而ts完全兼容js，继续写js代码没问题
九、vue后台管理模板
# 公司内部项目，会写后台管理，往上有很多vue开源的后台管理的框架，咱们只需要在上面做二次开发
# django-vue-admin 前端---》D2Admin
# 若依：vue前端 用来 vue-element-admin
# elamin前端 drf 写了基于rbac权限管理的框架
# https://gitee.com/liuqingzheng/vue_admin
十、作业
# 创建vue3项目，在setup中写看美女案例
# 练习监听属性和计算顺序
# 从后端接口拿数据展示在页面上
# app