Vue 探索 02

🔥

请留意：在script标签内一定要加上setup属性
这几个都是响应式对象

主要功能是可以实时修改数值，我想大概原理是innerHTML等一系列的封装

reactive 实时更新

引入
比ref更好用 不用修改.value
而是直接使得数据变化

通常有对象时用reactive
watch
监听数据变化

watch(要监听的数据,(newValue,oldValue)=>{})
// 意思是监听一个数据，会触发一个回调函数，会传入新值和旧值，就可以做到变量变化的监听
watch(() =>
    user.name, (newValue, oldValue) => {
        console.log('newValue', newValue);
        console.log('oldValue', oldValue);
    })
// 我就感觉这种写法好邪恶啊
// 当使用reactive时
watch([msg, () => user.name], (newValue, oldValue) => {
    console.log('newValue', newValue);
    console.log('oldValue', oldValue);
})
// 👆同时监听，感觉更邪恶了

---

@click 引号里不光可以写函数（既可以传参也可以传事件对象：($event:就是你的动作、比如按键盘，点击鼠标)
还可以写表达式
是同步更新~

---

计算属性 computed
将数据缓存起来
当再次使用时会直接使用而不必消耗性能

---

在V-指令里可以放 字符串 对象 数组 表达式 三目运算符 变量等等

---

defineProps组件
定义props数据的类型

---

import { useRoute, useRouter } from "vue-router";

useRoute
用来获取路由的信息

useRouter
执行路由的跳转 一般使用.push跳转

---

vuex 状态管理模式
使用之前务必使用npm安装
不同的组件之间共享 很多 共同的数据
这时候就需要将数据抽离出来 全局的管理

导入
👇
创建
👇
导出
导出之后在main.js里引入 使用

---

import { createStore } from "vuex";
// 创建一个新的 store 实例
const store = createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state, payload) {
      state.count += payload;
    },
  },
  getters: {
    totalPrice(state) {
      return state.count * 98.8;
    },
  },
  actions: {
    asyncAdd(store, payload) {
      setTimeout(() => {
        store.commit("increment", payload);
      }, 1000);
    },
  },
});

export default store;

mutations 是为了修改state里的数值,
getters 是为了计算属性
actions 异步(AJAX)操作mutationsss 和getters

---

导入蚂蚁UI有两种方式
一种是全局

另一种按需导入antUI,不用全局注册
在vite.config.js里