Xiuji957

to全家桶toRef将原始对象中的属性转化为响应式的 123456789101112const obj = { foo: 1, doo: 2}const state = toRef(obj, 'foo')const change = () => { state.value++ console.log('-----原始对象', obj); console.log('-----引用对象', state);} toRefs可以帮我们批量创建ref对象主要是方便我们解构使用 123456789101112const obj = reactive({ foo: 1, doo: 2})let { foo, doo } = toRefs(obj)const change = () => { foo.value++ doo.value++ console.log('-----响应式对象', obj); ...

reactive全家桶用来绑定复杂的数据类型 例如 对象 数组 12345678910let arr = reactive<number[]>([]) // reactive方法需要传入复杂数据类型，[],{}let obj = reactive({ name: '绿色' })obj.name = '蓝色'// 数组赋值setTimeout(() => { let test = [1, 2, 3, 4] arr.push(...test) console.log(...test);}, 1000); shallowReactvie 只修改浅层次对象的属性，不修改深层次对象属性 123456789101112131415161718let msg = shallowReactive({ name: '绿色', nav: { test: { case: '红色'  ...

ref全家桶vue3通过ref将view中的数据绑定为响应式数据 1、Ref,ref被ref包装之后需要.value 来进行赋值 12345678910111213import { ref, Ref } from 'vue'写法1let msg = ref<string>('红色')const change = () => { msg.value = '绿色' console.log(msg);}写法2 Ref范型let msg: Ref<string> = ref('大红色')const change = () => { msg.value = '大绿色' console.log(msg);} 2、isRef判断是不是一个ref对象 1234567let msg: Ref<string | number> = ref('大红色')let num: ...

1、项目创建1pnpm create vite 项目名 选择vue 选择ts 项目创建完成 进入项目文件夹，运行pnpm install安装依赖，通过pnpm run dev运行项目 2、Vscode插件调整 vetur语法提示适配vue2.X，写vue3时应该禁用 推荐使用Volar，完美适配Vue3语法