vuex:状态管理器，vue存数据的地方，跨组件间通信、vue3、创建vue3项目的两种方式、setup函数、ref和reactive、计算和监听属性、生命周期、hooks、toRefs、后台管理模板
vuex:状态管理器，vue存数据的地方，跨组件间通信
vue2使用版本vuex3
vue3使用版本vuex4
npm install vue@3
三个状态
-state：存数据的地方,对象，定义一些变量，所有组件中都可以用---》this.$store.state.变量
-actions：中转站，在组件中想修改值，this.$store.dispatch('函数名')
-逻辑判断，跟后端交互
-context.commit('mutations中得函数'),
-mutations：真正操作数据的地方，直接操作state，this.$store.commit('mutations中得函数')
-组件可以直接调用mutations中得函数，直接跟mutations交互
vue-router
-vue-router:3版本对应vue2，4版本对应vue3
-单页面应用：index.html,以后都是页面组件间的切换，借助于vue-router
-使用步骤：
-在任意组件中：
-this.$router:路由对象，控制路由的跳转，push，go，back。全局的那一个导出的
-this.$route：当前路由，当前路径对象，query，params
-只需要在router/index.js的routes配置路由对象即可，浏览器地址栏中输入路径就显示某个页面
-路由嵌套：routes内部对象中写： children ---》/goods/list
-路由跳转：
-html中跳转：router-link to属性 可以之间写字符串路径，数据绑定对象{}
-js跳转：this.$router.push('goods')
-跳转携带数据：
-get地址中参数：this.$route.query.参数名
-路由中分割出来的参数：this.$route.params.【router/index.js的routes使用:绑定的】
-路由守卫：
-进入该路径之前，进行一些逻辑判断，允许进还是不允许
-权限的控制
-router.beforeEach()
-router.afterEach()
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 的修饰符
5 组合式API和配置项API
-使用组合式API
-配置项API
-{
name:'xx',
data:function(){},
methods:{}
}
创建vue3项目的两种方式
# vue-cli:创建vue2和vue3
-跟之前一样
# vite：创建vue3，创建最新
npm init vue@latest
# Pinai
# vite创建另一种方式：创建vue3.0.4版本
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev
# 启动的两种方式
# 以后再页面中的this，已经不是vue2中的vc对象了，是一个代理对象
vite：创建vue3
setup函数
vue 新增的setup配置项函数
-在里面可以定义变量
-定义函数
-必须return 变量和函数，在模板中才能使用
<template>
<h2>{{ name }}</h2>
<h3>{{ age }}</h3>
<button @click="handleClick">点我看美女</button>
<br>
<button @click="handleAdd">点我，age+1</button>
</template>
<script>
export default {
name: 'App',
setup() { // setup中没有this了
// 以后所有的变量定义函数编写，都写在这个函数中
// 定义变量 如果这么写，变量渲染没问题，但是没有响应式，页面变了，变量不会变
let age = 19
let name = 'lqz'
// 定义函数
function handleClick() {
alert('美女~~~')
}
let handleAdd = () => {
console.log('我要开始加了')
age=age+1
console.log(age)
}
// 函数必须有返回值
return {
age, name, handleClick, handleAdd
}
}
}
</script>
ref和reactive
# 导入使用：import {ref, reactive} from 'vue'
# 基本数据类型（数字，字符串，布尔）如果要加响应式：使用ref包裹，在模板中之间使用，js中通过对象.value取值
# 对象，数组引用使用reactive,ref可以包对象类型，但是用的时候必须.value
<template>
<h2>{{ name }}</h2>
<h3>{{ age }}</h3>
<br>
<button @click="handleAdd">点我，age+1</button>
<br>
<button @click="handleChangeName">点我name变化</button>
</template>
<script>
import {ref, reactive} from 'vue'
export default {
name: 'App',
setup() {
let age = ref(19) // age 已经不是数字了，是RefImpl的对象
let name = ref('lqz')
let handleAdd = () => {
console.log('我要开始加了,age是', age)
age.value = age.value + 1
console.log('我要开始加了,age是', age.value)
}
function handleChangeName(){
name.value=name.value+'?'
console.log(name)
}
return {
age, name, handleClick, handleAdd,handleChangeName
}
}
}
</script>
计算和监听属性
计算属性
export default {
name: 'App',
// computed:{
// fullName:function (){}
// },
setup() {
// 1 计算属性案例1
// let firstName = ref('刘')
// let lastName = ref('清政')
// // 定义计算属性
// let fullName = computed(() => {
// return firstName.value + lastName.value
// })
// 2 计算属性案例2
let person = reactive({
firstName: '刘',
lastName: '清政',
})
// 定义计算属性
person.fullName = computed({
get() {
return person.firstName + '-' + person.lastName
},
set(value) {
console.log(value)
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
return {
person
}
}
}
监听属性
import {computed, watch, ref, reactive, watchEffect} from 'vue'
export default {
name: 'App',
setup() {
// 1 计算属性案例1
let name = ref('lqz')
// 定义监听属性
watch(name, (newValue, old) => {
console.log('name变了')
// console.log(old)
// console.log(newValue)
})
// vue3 多的watchEffect,只要函数中使用的变量发生变化，它就会触发
watchEffect(() => {
// 只要该函数中使用的变量发生变化，它就会触发
// let a = name.value + '?'
console.log('watchEffect配置的回调执行了')
})
return {
name
}
}
}
生命周期
# Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
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
hooks
什么是hook?
本质是一个函数，把setup函数中使用的Composition API进行了封装。
类似于vue2.x中的mixin。
自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂
hook/usePoint.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
setup函数，return {...toRefs(data)}可以解压复制
export default {
name: 'App',
setup() {
let data = reactive({
name: 'lqz',
age: 19,
isShow: true
})
function handleShow() {
console.log('ssdaf')
data.isShow = !data.isShow
data.age++
}
return {
...toRefs(data),
handleShow
// data
}
}
}
后台管理模板
# vue-admin-template-master
-跑起来
-package.json 第7行加入
"dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
# java版的若依，带权限控制的后台管理模块
# python ：django-vue-admin
# python flask-vue-admin
# go:gin-vue-admin
浙公网安备 33010602011771号