wytccc的博客

【代码】vite中配置了proxy代理，如何查看代理之后的真实接口地址？

创建emitter模块（@/utils/emitter.ts）在组件A中监听事件（@/components/A.vue）在组件B中触发事件（@/components/B.vue）

【代码】vue3的pinia基本用法。

【代码】vue3中ts的基本用法。

【代码】Vue3的provide、inject。

【代码】Vue3的customRef。

1. **readonly()和shallowReadonly()** ① readonly()是将属性全部变为只读的，依然存在响应式 ② shallowReadonly()只是将第一层变为只读的（浅层次的） 2. **toRaw()和markRaw()** ① toRaw()是可以将一个由reactive生成的响应式数据转为普通数据 ② markRaw()是将一个数据标记为源数据。应用场景：已经初始化了一个对象，之后手动给这个对象添加属性的时候，vue默认将其转为响应式数据，通过mar

【代码】Vue3的toRef和toRefs。

【代码】Vue3的hook函数。

④ 监听ref/reactive对象中的某个引用类型数据时，不写箭头函数，监听的是内部所有属性变化；写成箭头函数监听的是地址，需开启深度监视才既能监听地址变化，又能监听内部所有属性变化。② watch必须指定需要监听哪个对象，而watchEffect无需指定，函数内部用到了哪个属性，等这个属性变化时，watchEffect会自动调用。① 监听ref定义的对象类型，监听的是对象地址变化，开启深度监视之后才可以监听到内部任意属性变化。② 监听reactive定义的对象类型，强制开启了深度监视（不可关掉）

【代码】Vue3的computed。

setup函数执行时机在beforeCreate之前。在setup中定义的属性、方法…

① 利用reactive定义的属性，底层是通过Proxy实现的，所以，修改对象中的任何一个值的时候，vue可以监听到，并及时的更新页面。① 利用ref定义的属性，底层是通过Object.defineProperty()实现的响应式，返回的是一个RefImpl引用实现。② 在template和script中直接访问对象中的属性名即可。② 在template模板中直接访问属性名即可。③ 在script标签中需要通过。

1、Vue3中不再引入Vue构造函数，而是引入一个工厂函数createApp，减小了项目体积。说明：Vue2直接引入Vue构造函数，并利用render函数将App组件挂载到页面上。2、调用mount函数，将App组件挂载到页面上。

⑤ next：是个函数，只有调用next()，路由器才可继续跳转，不调用直接拦截。⑥ routes中的meta配置项，可配置一些自定义的参数。③ 独享路由守卫与全局路由守卫可一起搭配使用。② 独享路由守卫只有前置没有后置。// 通过路由，进入组件之前调用。// 通过路由，离开组件之前调用。④ from: 出发地路由信息。③ to：目的地路由信息。

activated()、deactivated()

① 不设置include属性，默认缓存所有在此处渲染的组件 ② 设置include属性，可缓存指定的组件，值为组件名 ③ 缓存一个组件直接传入组件名即可 ④ 缓存多个组件需要利用v-bind方式传入数组

VueRouter编程式路由导航。

Vue中router-link标签的replace属性。

Vue Router 命名路由，利用name属性为路由命名

【方式二：传递一个对象，路径是path属性，拼接的参数是query属性，推荐】【方式一：通过查询字符串直接拼接在路径后面】【直接在$route.query中获取】

Vue Router嵌套路由。

Vue Router路由基础

/ 设置了namespaced=true，才能在这里使用sumOptions获取到sum值。// state中分了两个模块，需要多加一层获取到sum。// 普通方式调用dispatch。// mapMutations方式。// 普通方式获取getters。// mapGetters方式。// mapActions方式。// 普通方式调用commit。// 普通方式获取state。// mapState方式。

/ 对象写法，适合key、value不一样的情况。// 对象写法，适合key、value不一样的情况。// 对象写法，适合key、value不一样的情况。// 对象写法，适合key、value不一样的情况。// 数组写法，适合key、value一样的情况。// 数组写法，适合key、value一样的情况。// 数组写法，适合key、value一样的情况。// 数组写法，适合key、value一样的情况。【自动调用dispatch方法】【自动调用commit方法】// 引入mapState。

② actions中不能直接修改state的值，一般是做一些判断，如果不需要做判断可省略actions，直接调用commit触发mutations中的方法修改state值即可。③ mutations中配置的方法可直接修改state中的值，在vue-devtools中可观察到。⑥ getters配置项类似于组件中的computed，也具有返回值。① 默认安装vuex4版本：执行命令。② 指定安装vuex3版本：执行命令。触发mutations中配置的方法。触发actions中配置的方法。

【有多个不具名的插槽，默认将子组件间的内容在所有不具名的插槽上都放置一份】【只有一个插槽的情况，默认将子组件间的内容插入到该插槽中】【在子组件标签间可以访问到子组件中的数据，子传父】【将子组件间的内容插入到指定名字的插槽中】'子组件中的属性，在父组件中拿到了'

/ 文本框显示时，获取焦点，此时应该等到DOM被重新解析之后，拿到文本框节点进行聚焦操作。// 如果直接进行聚焦操作，此时还未拿到文本框节点，会报错。

全局事件总线原理：利用自定义事件实现。'接收到的数据为:'

原理：将自定义事件绑定在子组件上，在子组件中调用$emit方法，并携带参数，触发该自定义事件，从而获取参数。 < template > < div > < Child @zidingyiEvent = " getValue " >

【新建一个plugins.js文件，Vue会自动调用install方法，第一个参数为Vue构造函数，第二个参数之后可以自定义传入参数】【在main.js中引入插件即可】

【在main.js中全局混入之后，所有的组件都拥有混入的配置项】① 组件自身的data、methods…优先级比混入过来的高。② 组件自身的生命周期钩子和混入过来的不冲突，两者都会被执行。

利用属性赋值的方式发送，利用props配置项接收。③ 接收数据的同时，增加类型、默认值、必填限制。① 数组形式，直接接收传过来的数据。② 接收数据的同时，增加类型限制。

③ $refs.news【new-list的组件实例对象】① $refs【所有定义ref的元素都在这里】④ $refs.btn【button元素节点】② $refs.title【H1元素节点】

vue的render函数。

1、安装node.js 2、npm install -g @vue/cli全局安装vue脚手架 3、vue create 项目名称 创建vue项目 4、npm run serve 启动vue服务 5、通过本地的8080端口访问页面

Vue的单文件组件和非单文件组件。

**生命周期：vue系统内置好的一些在不同阶段被调用的钩子函数****Vue2** 1. **beforeCreate()** 【还没完成数据代理、数据监测，不能获取data中定义的属性】 2. **created()** 【已完成数据代理、数据监测，可以获取到data中定义的属性】 3. **beforeMount()** 【生成了虚拟DOM存入内容中，但未转成真实DOM】 4. **mounted()** 【转成了真实DOM，并插入到了页面中，初始化完成！！！】 5. **

过滤器：将指定的数据，按照一套流程过滤加工，最后返回一个过滤之后的值注册局部过滤器将过滤器写在filters配置项中的是局部过滤器，只供该vue匹配的容器使用注册全局过滤器利用Vue.filter()声明的过滤器是全局过滤器，为所有vue实例共享，必须写在vue实例声明之前使用场景一般在插值表达式、v-bind中使用多个过滤器可串联使用

vue利用v-model获取文本框、单选框、复选框、下拉框、多行文本框值的方式