目录
Vue3
关于前端设置页面参考----gitee.com/liuqingzheng/vue_admin
vue3介绍
关于vue项目的版本，新项目使用vue3，有部分老项目使用vue2。
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 的修饰符
# vue2配置项与vue3组合式的区别
vue2 ：配置项API
new Vue({
el:'#app',
data:{}
})
vue3: 组合式API
let name='kiki'
let add=()=>{
}
vue3创建项目
1. 使用vue-cli创建
创建跟之前的vue2一样，只是在选择vue版本的时候选择vue3版本,同样用pycharm打开并运行。
以后再页面中的this，已经不是vue2中的vc对象了，是一个代理对象
2. vite创建vue项目
Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！是新建的前端构架工具，最大的优势就是速度快。
vite使用步骤
# 1. 安装---默认最新版
npm init vue@latest # 安装的时候根据需要选择就可，如vueRouter
# 2. cd到项目中执行cnpm install 安装依赖
cd.....进入
cnpm install
# 3 运行
npm run dev
注意点：
1. vueRouter跟之前一样
2. Pinia:用来替换Vuex的，新一代的状态管理器
3.链式调用（课下了解）
setup函数
简化代码和项目的简洁度，vue新增了setup函数。
1.setup函数
1.在函数里面可以定义变量
2.定义函数
3.必须用return返回，在模板才能使用
let handleAgeAdd =handleAgeAdd(){}
代码展示
<template>
<h1>setup函数</h1>
<h2>{{name}}</h2>
<h2>{{age}}</h2>
<button @click="handleClick">点我看图</button>
<hr>
<button @click="handleAgeAdd">点我age加1</button>
</template>
<script>
export default {
name: 'HomeView',
setup(){
// setup中没有this了
// 以后所有的变量定义函数编写，都写在这个函数中
// 定义变量 如果这么写，变量渲染没问题，但是没有响应式，页面变了，变量不会变
let age=18
let name='kiki'
//定义函数
let handleClick=()=>{
alert('嘿嘿，没有图')
}
// 定义函数--年龄加1
let handleAgeAdd=()=>{
console.log('age开始加1')
age=age+1
console.log(age)
}
//必须要有返回值
return {name,age,handleClick,handleAgeAdd}
}
}
</script>
2.vue2的创建vue实例和vue3创建vue实例的区别
# Vue2
1.new Vew()--->是Vue的实例，里面有$store,$refs....
# Vue3
1.createApp(App)--->是个对象，对象里有东西，没有$store,$refs....等对象，当需要使用直接导入使用
2.vue3的<template>，不需要写一个标签了
3.定义变量/函数，都写在setup函数中，都要return函数，在<template>才能使用
4.但是失去了响应式
总结：
1.在setup中定义的变量和函数，在之前配置项api中可以直接使用this.变量，函数调用即可
2.但是在原来配置项中定义的变量，函数，在setup中无法使用
ref和reactive
响应式：定义的变量，如果想要有响应式就用ref包裹起来，再修改变量需要要变量名.value修改。
1.导入使用：import {ref, reactive} from 'vue'
2.基本数据类型（数字，字符串，布尔）如果要加响应式
使用ref包裹，在模板中直接读取定义量
js中通过对象.value取值
3.对象，数组引用使用reactive,ref可以包对象类型，但是用的时候必须.value。
操作数据与读取数据：均不需要.value
ref
<template>
<h1>setup函数</h1>
<h2>{{name}}</h2>
<h2>{{age}}</h2>
<button @click="handleClick">点我看图</button>
<hr>
<button @click="handleAgeAdd">点我name+ ?</button>
</template>
<script>
import {ref,reactive} from 'vue'
export default {
name: 'HomeView',
setup(){
let age=ref(18) // age 已经不是数字了，是RefImpl的对象
let name=ref('kiki')
let handleClick=()=>{
alert('嘿嘿，没有图')
}
let handleAgeAdd=()=>{
console.log('name开始加?')
name.value=name.value+'?'
console.log(name)
}
return {name,age,handleClick,handleAgeAdd}
}
}
</script>
reactive
computed计算属性
通过绑定ref和rective来编写计算（computed）
<template>
<h1>计算属性</h1>
姓：<input type="text" v-model="person.firstName">
<br>
名：<input type="text" v-model="person.lastName">
<br>
全名：{{ fullName }}
<p>全名：<input type="text" v-model="fullName"></p>
</template>
<script>
import {ref, reactive, computed} from 'vue'
export default {
name: 'HomeView',
//vue2计算属性的写法
// computed:{
// fullName(){}
// },
//vue3计算属性的写法
setup(){
// 案列1------ref
//定义变量
// let firstName = ref('成')
// let lastName = ref('和花')
//定义计算属性
// let fullName = computed(()=>{
// return firstName.value+lastName.value
// })
// return {firstName,lastName,fullName}
//案例2---根据修改fullName来改动前面的姓名---reactive
let person = reactive({
firstName :'',
lastName :''
})
//定义计算属性
let fullName= computed({
get(){ //获取 触发它的执行
return person.firstName +person.lastName
},
set(value){ //修改 触发它，传入修改后的值
console.log(value)
person.firstName = value.slice(0,1)
person.lastName = value.slice(1)
}
})
return { person,fullName}
}
}
</script>
watchEffect监听属性
watchEffect 是vue3 提供的，它也做监听属性，只要这个里面用的变量发生变化，它就会执行；vue2的watch只要name发生变化，就触发某个东西的执行
<template>
<h1>监听属性</h1>
{{ name }}----{{ age }}
<br>
<button @click="nameAdd">点我name+?</button>
<button @click="ageAdd">点我age+</button>
</template>
<script>
import {ref, reactive, computed, watch, watchEffect} from 'vue'
export default {
name: 'HomeView',
setup(){
let name = ref('kiki')
let age = ref('10')
let nameAdd =()=>{
name.value=name.value+'?'
}
let ageAdd=()=>{
age.value++
}
//定义监听属性---vue2,只要name发生变化，就触发某个东西的执行
watch(name,(newName,oldName)=>{
console.log('name值变了')
console.log(newName,oldName)
})
//watchEffect vue3 提供的,只要函数中使用的变量发送变化，他就会触发
watchEffect(()=>{
// 只要该函数中使用的变量发生变化，它就会触发
console.log('watchEffect配置的回调执行了')
console.log(age.value)
})
return{name,ageAdd,nameAdd,age}
}
}
</script>
生命周期
vue3官方生命周期图
# Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
vue2 和 vue3比较
beforeCreate===>beforeCreate
created=======>created
beforeMount ===>beforeMount
mounted=======>mounted
beforeUpdate===>beforeUpdate
updated =======>updated
beforeDestroy ==>beforeUnmount
destroyed =====>unmounted
# Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted
# 不推荐用这种写法了，配置项写法，统统写在setup中
# 以前写在created中的代码，现在直接写在setup开始即可
let show = ref(false)
axios.get().then(res=>{
show.value=res.data.show
})
自定义hook---了解
本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。
自定义hook的优势
复用代码, 让setup中的逻辑更清楚易懂
hook/userPoint.js
import {onMounted, onUnmounted, reactive} from "vue";
export default function () {
let p = reactive({
x: 0,
y: 0
})
function getPoint(event) {
console.log(event)
p.x = event.pageX
p.y = event.pageY
}
// 声明周期钩子的onMounted，当页面挂载就会执行
onMounted(() => {
// 给数鼠标点击增加监听，当点击鼠标，就会执行这个函数
window.addEventListener('click', getPoint)
})
// 组件被销毁时，把功能去掉
onUnmounted(() => {
window.removeEventListener('click', getPoint)
})
return p
想使用的组件中引入使用即可
<template>
<h2>x坐标是：{{ p.x }},y坐标是:{{ p.y }}</h2>
</template>
<script>
import {reactive, onMounted, onUnmounted} from 'vue'
import usePoint from '../hook/uesPoint.js'
export default {
name: "Point",
setup() {
let p = usePoint()
return {p}
}
}
</script>
<style scoped>
</style>
toRefs
1.引入import {toRefs} from 'vue'
2.setup直接返回...toRefs(data)
3.模板直接用name和age等
<template>
<h1>toRefs属性</h1>
<p>{{name}}</p>
<p>{{age}}</p>
</template>
<script>
import { reactive, computed, watch, watchEffect} from 'vue'
import {toRefs} from 'vue'
export default {
name: 'HomeView',
setup(){
let data = reactive({
name:'kiki',
age:18,
isShow:true
})
return {...toRefs(data)}
}
}
</script>
script setup的作用和lang=ts
用vite创建的vue项目打开操作，直接定义变量或者函数，会自动把变量装到setup函数里面，在模板里面直接用，不用return返回
<script setup>
import {ref} from 'vue'
let name = ref('kiki')
let handleClick = () => {
alert('图片')
}
</script>
# 以后 这个script中的代码直接放到 setup函数中，不用return了
#lang=ts
里面代码使用ts写，而ts完全兼容js，继续写js代码没问题
注意：如果遇到问题不能运行的情况如下，使用vite创建vue3.0项目的时候，vite不会自动帮助install相关的依赖，需要我们手动去安装,直接执行cnpm install命令即可
vue后台管理模板
公司内部项目----会写后台管理-----网上有很多vue开源的后台管理的框架，只需要在上面做二次开发。
# vue-admin-template-master
-跑起来
-package.json 第7行加入
"dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
# python ：django-vue-admin ----D2Admin
# 若依：vue前端---vue-element-admin
# elamin前端---drf----写了基于rbac权限管理的框架
# go:gin-vue-admin https://gitee.com/liuqingzheng/vue_admin
组件式API和配置项API
Options API 存在的问题
使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。
# 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')