创建vue3项目命令 : npm create vite
vue3的响应式原理
vue3中的响应式原理为proxy 做到数据影响视图 视图影响数据 叫做响应式(双向数据绑定)
<script>
<p id="op"> </p>
<input type="text" id="oInput">
// 当我们定一个对象数据
const data:{
name:'张三'
}
// 通过proxy 进行代理 生成一个代理对象 对这个代理对象的操作会影响到data
const proxyData =new Proxy(data,{
get(target,attr){
// 从proxyDate中获取数据会走这里
console.log(target) // data
conlole.log(attr) //'name'
return target[attr] //做到了对获取事件操作时的拦截
},
set(target,attr,value){
// 数据影响视图试听过 data binding
// 数据影响视图
op.innerHTML=value
target[attr]=value // 做到了对修改数据操作时的拦截
}
})
// 视图影响数据 是通过event handle来实现
// DOM监听
// 对input进行修改 将name给value
oInput.oninput=function(e){
proxyData.name=e.target.value
}
</script>总结:
通过proxy 代理整个对象,视图到数据的变化是通过 event handle 操作事件 (DOM监听)
数据影响视图是通过 event binding 数据劫持来实现的
vue-router集成
安装vue-router yarn add vue-router@4 | npm install vue-router@4;
创建并配置路由
2.1 创建文件router/index.js
2.3 在index.js中创建并配置路由const mainRouter = createRouter({history:‘路由模式’,路由规则表})
常见路由模式 createWebHashHistory() url带# ,createWebHistory（）url不带#，需要 服务器支持
2.4 导出路由 export default routers;
注意： 在使用createRouter、createWebHistory 、createWebHashHistory时候要先从vue-router中导包。
在main.js 中使用路由 const app = createApp(根组件).use(路由).mount(容器)
3.1 导入配置好的路由router；
3.2 创建app, const app = createApp(根组件).;
3.3使用router, app.use(router);
3.4 将app挂载到容器中app.mount(‘#app’)
在根组件App中添加路由出口,匹配到的路由将会渲染在这里
以在根组件App中添加路由导航 (可选项
useRoute()和useRouter()
useRoute是用来获取参数的 useRouter是用来做路由跳转的
（1）通过useRoute()可以获取route信息
<script setup>
import { useRoute, useRouter } from "vue-router"
const route = useRoute();
const router = useRouter();
const getParams = ()=>{
console.log('getParams fullPath',route.fullPath);
console.log('getParams params',route.params);
console.log('getParams path',route.path);
console.log('getParmas query',route.query);
}
</script>
<template>
Home
<button @click="getParams">获取url参数</button>
</template>
（2）通过useRouter()可以获取router信息
<script>
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
const login = () => {
router.push('/home')
}
return {
login,
}
},
}
</script>
在vue3中使用 vuex4
无法直接在setup中使用数据 要想拿到数据具体操作如下
1.新建store文件夹建index.js文件 通过createStore 创建store 在store中定义state,mutations actions getters 导出store实例
2.在main.js中 导入store 并挂载实例到项目中 import store from './store' app.use(store)
3.在组件中通过useStore 拿到store实例来使用store数据
<script setup>
import { useStore } from 'vuex'
// #3 通过 useStore 拿到 store 实例
const store = useStore()
</script>
<template>
<div>
// 在模板中可以通过$store.state.money 获取数据
<!-- <p>money: {
{ $store.state.money }}</p> -->
<p>money: {
{ store.state.money }}</p>
// 通过getters触发getters
<p>double: {
{ store.getters.double }}</p>
<div>
// 通过commit 触发mutation
<button @click="store.commit('changeMoney', 8)">change money</button>
<button @click="store.dispatch('changeMoneyAsync', 3)">change money async</button>
</div>
</div>
</template>Pinia的使用
https://pinia.web3doc.top/core-concepts/#%E4%BD%BF%E7%94%A8-store- store 模块，
store/store.js。 - 在main.js中配置Pinia 使和项目产生关系
- 在组件 APP.vue中使用
下载插件 yarn add pina 或者 npm i pina
-
state: 状态。
-
actions: 修改状态（包括同步和异步，Pinia 中没有 mutations）。
-
getters: 计算属性。
state的使用
// 创建 store，命名规则：useXxxxStore // 参数 1：store 的唯一表示
通过defineStore创建命名空间 定义store 实例 并导出
在组建中 导入store实例 通过store实例名.属性名 和方法名来使用
actions的使用
在 Pinia 中没有 mutations，只有 actions，不管是同步还是异步的代码，都可以在 actions 中完成
总结
- 在actions 中可以定义同步异步方法
- actions中的方法直接修改数据this.数据名
- 在template中使用方法 （store的变量名.方法名）
getters的使用
pinia中的getters和vuex中的基本是一样的，计算state的状态值。
可以通过 this来获取结果 并return
也可以通过参数的方式来获取结果
总结
- 在getters中定义计算方法，
- 方法中操作数据并返回
- 在视图中使用计算值
storeToRefs
直接结构store实例会 使数据丢失响应式
通过storeToRefs包裹 store实例可以解决这一问题
storeToRefs只能把state里面的数据变为单独的响应式 的 ref 但是不能结构 actions中的方法
对于actions中的方法的结构可以直接从 store实例中解构出来
pinia的分离和合并
当组建中 需要导出的store实例过多时可以 在store文件夹中新建文件js文件来封装store实例并导出
在组件中按需导入(解构出来)
思维导图笔记
复制粘贴到浏览器
https://gitee.com/link?target=https%3A%2F%2Fwww.processon.com%2Fview%2Flink%2F62d4a9631efad4037a10a059