随笔分类 - 3.前端框架
摘要：import { ref, computed } from 'vue'; import { defineStore } from 'pinia'; import { useRoute } from 'vue-router'; /** * 一、和vuex区别： * 1.不需要有mutations，在组
阅读全文
摘要：零、 场景（Scene）：一个容器，用于保存和跟踪要渲染的物体，如相机、灯光、物体等。 相机（Camera）：决定了哪部分场景会被渲染。最常用的是透视相机（PerspectiveCamera），它模拟人眼所看到的视角。 渲染器（Renderer）：基于场景和相机的设置，计算并渲染最终图像。WebGL
阅读全文
摘要：有时候你希望两个组件的状态始终同步更改。要实现这一点，可以将相关状态从这两个组件上移除，并把这些状态移到最近的父级组件，然后通过 props 将状态传递给这两个组件。 这被称为“状态提升”，这是编写 React 代码时常做的事。 事件一般以onXXX开头，比如内置元素div的click事件可以叫on
阅读全文
摘要：vue的重新渲染： 是通过修改data、computed、watch等添加到响应式系统的变量，然后vue会自动重新渲染； react的重新渲染： 通过setXXX的hook进行重新渲染，因为设置状态会请求一个新的重新渲染。 不清楚排队机制所造成的bug： react的重新渲染也是要排队进行的，不是设
阅读全文
摘要：不要在渲染dom的时候修改数据，否则可能会触发重新渲染。 React 提供了 “严格模式”，在严格模式下开发时，它将会调用每个组件函数两次。通过重复调用组件函数，严格模式有助于找到违反这些规则的组件。 我们注意到，原始示例显示的是 “Guest #2”、“Guest #4” 和 “Guest #6”
阅读全文
摘要：React 组件是返回标签的 JavaScript 函数： 哪个组件是通过改变 state 实现可响应的，或者哪个组件拥有 这个 state。 然后我们需要确定吧这个state是放在这个组件，还是放在父组件（如何多个子组件都会受到相同state影响，那么需要放到父组件里统一管理）。 如何安装一个re
阅读全文
摘要：项目搭建规范 一. 代码规范 1.1. 集成editorconfig配置 EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。 即配置了这个文件后，不管你用的啥编译器啥操作系统，编译器都会自动读取这个文件，并按照这个文件的配置来给你配置。所以，所有人
阅读全文
摘要：一、axios 详见老师的课项目三和项目四（前半小时） 二、ts.config.js文件 主要是ts语言编译成js时的一些配置选项 { "compilerOptions": { //目标代码；将我们的ts代码编译转化成es5还是es6/es7...，esnext是es6的意思 //为什么我们转化成e
阅读全文
摘要：一、类 只读属性可以在构造器里赋值，但是赋值之后就不可以修改了； 可以使用访问器来访问私有private的属性；这个比java语言要自己写setNmae（）和getName（）方法要方便一些，但是都差不多； 二、接口 接口和type都可以实现对象类型的定义， 但是interface可以对同一个名字重
阅读全文
摘要：一、ts介绍 注意类型注释和类型推导的区别： 类型注释就是我们给js的变量名加类型检测的写法，它的固定写法就是这样； 类型推导是ts会默认推导然后加一个类型检测； 二、js和ts都有的数据类型 js和ts都有的数据类型： 1.number类型 2.boolean类型 3.string类型 4.arr
阅读全文
摘要：具体如何做到的看课程老师介绍吧，涉及到微任务队列和宏任务队列的事； 页面刷新之后，浏览器重新请求的这个url可能是找不到资源的（因为以前的这个url是经过很多操作才生成的），就会返回404的错误，这个时候需要使用historyApiFallback返回一个index.html，让页面不至于跳到404
阅读全文
摘要：一、vuex就是状态管理 vuex五大核心： state getters mutations actions modules state即状态，其实我们的数据就是一种状态； 二、vuex的使用 三、单一状态树和获取vuex的状态 使用单一状态树，即创建一个state实例，不要创建多个state； 三
阅读全文
摘要：一、路由是什么 使用步骤:1.配置路由映射表route 2.配置路由对象router，里面包括了route和history模式 3.vue加载插件 4.使用《route-link》标签或编程式路由this.$router.push()5.配置《router-view》占位 路由主要做数据转发的工作；
阅读全文
摘要：一、vue架构简介 我们创造的vnode，本质上是一个js对象，所以操作vnode比操作真实dom的lelement元素，要简单很多很多； 通过render函数将template转化为vnode（本质是一个js对象），然后通过渲染器将将vnode转化为真实元素 二、三大系统 第一部分是compile
阅读全文
摘要：一、生命周期钩子 hooks： hooks的出现也就解释了为什么要从optionApi转向composiApi，因为项目到了我们的组件逻辑太多了 ，可能组件模板还是那个模板已经很完善了，但是组件逻辑太长太复杂，而且每个组件选项松散的过于厉害，某一个功能点我们需要在不同组件选项中来回加工，对代码的可读
阅读全文
摘要：一、CompositionAPI介绍 一个setup就是本组件的一个功能点； 一个组件可能也是一大堆功能的集合体；组件的作用在于功能的分割性和可复用性； 但是功能分割到这个组件后，可能这个功能还是有很多小功能，这个时候每个小功能都是一个setup； setup 二、响应式问题 我们现在使用compA
阅读全文
摘要：一、动画的介绍 vue3内置了一些动画的库，所以我们需要进行cdn或npm instal安装了； 可以使用组件《transition》直接使用； 1，transition实现效果 2.animation效果 3.过度的模式 使用《triansition》包裹的两个组件，如果要实现切换效果（比如v-i
阅读全文
摘要：一、动态组件 所谓的动态组件应该和keeplive一样，都是vue的内置组件； component标签的is属性可以写哪些东西？ 第一，全局组件，比如通过vue.createApp().component（）函数注册过的全局组件； 第二，在本组件实例中注册的局部组件，即在本组件实例的componen
阅读全文
摘要：一、插槽用来干什么？ 可以用props来转递数据， 但是传递html标签这种结构怎么做？使用插槽slot； slot可以让父组件来决定，这一块到底放什么标签、内容、元素； 如果有多个插槽，并且灭有具名插槽和动态插槽名，如下图所以，那么每个插槽都会被插入父组件的内容，所以下图会有九个内容； 2.具名插
阅读全文