小马Ti的博客

reactive函数作用定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数） 语法const 代理对象=reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称Proxy对象） PSreactive定义的响应式数据是深层次的 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

provide与inject作用实现祖孙组件间通信（祖provide，后代均可inject，只是一般用于祖孙间通信） 使用方法父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据 父组件 12345678910setup(){ let car=reactive({ name:'奔驰', price:'40w' }) provide('car',car) return {...toRefs(car)}} 孙子们: 1234setup(){ let car=inject('car') return {...toRefs(car)}}

provide与inject作用实现祖孙组件间通信（祖provide，后代均可inject，只是一般用于祖孙间通信） 使用方法父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据 父组件:12345678910setup(){ let car=reactive({ name:'奔驰', price:'40w' }) provide('car',car) return {...toRefs(car)}} 孙子们:1234setup(){ let car=inject('car') return {...toRefs(car)}}

Fragment组件在Vue2中根组件必须有一个根标签 在Vue3中根组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中 好处减少标签层级，减小内存占用

自定义Ref作用创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制 实现防抖效果页面防抖就是在事件触发的时候，并没有马上急着去做处理，而是在等待一段时间后再去执行。在该时间范围内只发起一次请求，以最后一次为准 示例1234567891011121314151617181920212223242526272829303132333435363738394041<template> <input type="text" v-model="keyword"> <h3>{{keyword}}</h3></template><script>import {ref,customRef} from 'vue'export default { name: 'App', setup(){ function...

computed计算属性

CompositionAPI的优势

history模式与hash模式一.history模式1.前端打包①vue中配置mode属性123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293import VueRouter from 'vue-router'import About from "@/pages/About.vue";import Home from "@/pages/Home.vue";import News from "@/pages/News.vue";import Message from "@/pages/Message.vue";import Detail from...

element-ui基本使用直接看官方文档就好了 不要将整个库全部引入,按需引入就好了

路由的query参数作用：跳转的时候传递参数 使用方法1.传递query参数①第一种:to的正常写法 <!-- 跳转路由并携带query参数，to的字符串写法 --> <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> {{m.title}} </router-link> ②第二种:to的对象写法 12345678910<!-- 跳转路由并携带query参数，to的对象写法 --><router-link :to="{ path:'/home/message/detail', query:{ id:m.id, ...