vue3基础学习总结

创建项目

vite 前端构建工具（相当于webpack）
vite是下一代前端开发与构建工具。 [1] Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

yarn create vite
npm init vite@latest

vue3基本用法

1.ref
ref 函数 使任何变量响应式

const number = ref(0);

shallowRef() 只会将传入的对象的第一层属性转换为响应式数据
isRef() 判断是不是一个ref对象

2.reactive
reactive函数 使任何对象响应式
reactive 用于为对象添加响应式状态。接收一个js对象作为参数，返回一个具有响应式状态的副本

const user = reactive({
	name: '天天',
	age: '30'
});

3.to
toRef是将对象中的某个值转化为响应式数据 toRef(obj,key)
可以理解为可以 解构赋值 的toRef

toRefs 是 也就是对对象解构时，解构出来的值为非响应式数据，但使用 toRefs 定义后 这些被解构出来的值 为响应式数据

toRaw 将响应式对象转化为普通对象

总结：ref支持所有类型 reactive支持引用类型 Array Object Map Set
ref取值都需要加.value reactive不需要

子父传值
1.父传子

//父组件引入:
<Child :title="'子组件接受的标题'" :data='list'></Child> 
import { reactive } from 'vue';
import Child from '../components/Child.vue'
const list = reactive<number[]>([1,2,3]) //number[]类型的数组
//子组件接受定义类型
type Props = {
  title:String
  data:number[] //number[]类型的数组
}
defineProps<Props>() 

2.子传父

//父组件派发
<button @click="clickTap">派发</button>
const list = reactive<number[]>([6, 6, 6])
const emit = defineEmits(['on-click'])
const clickTap = () => {
  emit('on-click', list)
}
//子组件接收
<Child :title="'子组件接受的标题'" :data='arr' @on-click="getList"></Child>
const getList = (list: number[]) => {
  console.log(list, '子组件传来的list')
}

插件：

1.Pinia vue新一代状态管理插件(相当于vuex)

import { defineStore } from "pinia";
export const userTestStore = defineStore('name', {
  state: () => {
    return {
      current: 1,
      name: "名字111",
    };
  },
  // 类似comuted
  getters: {},
  // 类似methods 提交state
  actions: {},
});

获取state值：

const pinia = userTestStore()
pinia.current

修改state值：

import { userTestStore } from '../store'
const pinia = userTestStore()
1.pinia.current = 50
2.pinia.$patch({
    current:99,
    name:'娃娃'
  })
3.pinia.$patch((state)=>{  //推荐使用
    console.log(state)
    state.name = '哈登'
  })
4.actions: { //写action方法 调用
    setCurrent() {
      this.current = 999;
    },
  },  
pinia.setCurrent()  
//也可以传参
actions: {
    setCurrent(num:number) {
      this.current = num;
    },
  },  
pinia.setCurrent(567)