yunbabac的博客

vue3.5

Nuxt跨页面、跨组件全局状态共享可使用 useState（支持Server和Client ）TT。

这些函数只能用在 setup or Lifecycle Hooks 中。

布局是围绕包含多个页面的公共用户界面的页面的包装器，例如页眉和页脚显示。布局是使用slot 组件显示页面内容的Vue文件。默认情况下使用layouts/default.vue文件。自定义布局可以设置为页面元数据的一部分。layouts/default.vueapp.vue方式二：自定义布局（Custom Layout）继续在layouts文件夹下新建 Layout 布局组件，比如: layouts/custom-layout.vue然后在app.vue中给内置组件 指定name属性 的值为

nuxt3新建页面 内置组件 assets 路由

Nuxt3 是基于 Vue3 + Vue Router + Vite 等技术栈，全程 Vue3+Vite 开发体验（Fast）。自动导包：Nuxt 会自动导入辅助函数、组合 API和 Vue API ，无需手动导入。基于规范的目录结构，Nuxt 还可以对自己的组件、 插件使用自动导入约定式路由（目录结构即路由）：Nuxt 路由基于vue-router，在 pages/ 目录中创建的每个页面，都会根据目录结构和文件名来自动生成路由。

pinia

store是响应式的store必须通过mutations使用。

箭头函数不绑定this源码部分。

前端路由是如何做到URL和内容进行映射呢？监听URL的改变前端路由原理URL的hashhtml5的historyhistory接口是HTML5新增的, 它有l六种模式改变URL而不刷新页面replaceState：替换原来的路径；//浏览器不可回退pushState：使用新的路径；//相当于压栈的操作，浏览器可回退popState：路径的回退；go：向前或向后改变路径；forward：向前改变路径；back：向后改变路径vue-router的使用np.

vue3 自定义指令 teleport 插件

vue3 composition API 学习

动态组件 keep-alive 异步组件 Suspense $refs 生命周期 mixin extends

vue动画

vue3插槽使用

父子组件之间的通讯比较简单，props,emit就行了项目中我们一般用vuex管理全局状态，今天记录下祖孙通讯，以及事件总线eventbusprovide，inject简单使用这样使用，可以达到跨组件祖孙通讯，但provide中的数据不能使用data中数据，也不是响应式的provide使用data中数据provide数据实现响应式以上写法不是响应式的，当数组数据增加时，子孙获得的长度不变全局事件总线mitt库vue3移除了 $on $0ff $once..

v-once指令当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过，可用于性能优化v-text指令用于更新元素的 textContent， <span v-text ="xxx"></span>v-html指令与v-text类似 可以解析htmlv-pre指令用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签v-cloak指令和 CSS 规则如 [v-cloak] { display: none } 一起用时，这

computed对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性；计算属性将被混入到组件实例中。所有 getter 和 setter 的 this 上下文自动地绑定为组件实例有缓存响应式函数式写法：fullName: function(){} 相当于对象写法的getter方法对象写法：watch当数据变化时，template会自动进行更新来显示最新的数据； 但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用侦听器watch来完成了选项