创建项目
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)