04 2024 档案
发表于 2024-04-28 23:11阅读：0评论：0推荐：0
摘要：PostCss类似于一个编译器，可以将样式源码编译成最终的CSS代码 PostCss和LESS、SASS的思路不同，它其实只做一些代码分析之类的事情，将分析的结果交给插件，具体的代码转换操作是插件去完成的。 官方的一张图更能说明postcss的处理流程： 这一点有点像webpack，webpack本
阅读全文 »
发表于 2024-04-28 23:05阅读：0评论：0推荐：0
摘要：官网：https://babeljs.io/ 民间中文网：https://www.babeljs.cn/ babel简介 而今天的JS世界缺少一座巴别塔，不同版本的浏览器能识别的ES标准并不相同，就导致了开发者面对不同版本的浏览器要使用不同的语言，和古巴比伦一样，前端开发也面临着这样的困境。 bab
阅读全文 »
发表于 2024-04-28 22:53阅读：0评论：0推荐：0
摘要：Hooks 基本介绍 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hooks 的出现，首先能解决如下的一些问题： 告别令人疑惑的生命周期 例如下面的例子，相同的代码在不同的生命周期中存在了两份 import
阅读全文 »
发表于 2024-04-28 22:26阅读：0评论：0推荐：0
摘要：安装 Pinia npm install pinia 在 Vue 应用中挂载 Pinia import { createPinia } from "pinia"; // 创建 pinia 实例 const pinia = createPinia(); createApp(App).use(route
阅读全文 »
发表于 2024-04-28 22:24阅读：0评论：0推荐：0
摘要：Pinia 的基本介绍 Pinia 是一个西班牙语的单词，表示“菠萝”的意思。因为菠萝是由一小块一小块组成的，这个和 Pinia 的思想就非常的吻合，在 Pinia 中，每个 Store 仓库都是单独的扁平化的存在的。 Pinia 是由 Vue 官方团队中的一个成员开发的，最早是在 2019 年 1
阅读全文 »
发表于 2024-04-28 22:19阅读：0评论：0推荐：0
摘要：setup // component export default { setup(props, context){ // 该函数在组件属性被赋值后立即执行，早于所有生命周期钩子函数 // props 是一个对象，包含了所有的组件属性值 // context 是一个对象，提供了组件所需的上下文信息
阅读全文 »
发表于 2024-04-28 22:17阅读：0评论：0推荐：0
摘要：reactivity api: https://v3.vuejs.org/api/reactivity-api 获取响应式数据 API 传入 返回 备注 reactive plain-object 对象代理 深度代理对象中的所有成员 readonly plain-object or proxy 对象
阅读全文 »
发表于 2024-04-28 22:15阅读：0评论：0推荐：0
摘要：使用key 对于通过循环生成的列表，应给每个列表项一个稳定且唯一的key，这有利于在列表变动时，尽量少的删除、新增、改动元素 使用冻结的对象 冻结的对象不会被响应化 使用函数式组件 参见函数式组件 使用计算属性 如果模板中某个数据会使用多次，并且该数据是通过计算得到的，使用计算属性以缓存它们 非实时
阅读全文 »
发表于 2024-04-28 22:12阅读：0评论：0推荐：0
摘要：内置组件Transition 官网详细文档：https://cn.vuejs.org/v2/guide/transitions.html 时机 Transition组件会监控slot中唯一根元素的出现和消失，并会在其出现和消失时应用过渡效果 具体的监听内容是： 它会对新旧两个虚拟节点进行对比，如果旧
阅读全文 »
发表于 2024-04-28 22:01阅读：0评论：0推荐：0
摘要：创建vue实例和创建组件的流程基本一致 首先做一些初始化的操作，主要是设置一些私有属性到实例中 运行生命周期钩子函数****beforeCreate 进入注入流程：处理属性、computed、methods、data、provide、inject，最后使用代理模式将它们挂载到实例中 运行生命周期钩子
阅读全文 »
发表于 2024-04-28 21:57阅读：0评论：0推荐：0
摘要：diff的时机 当组件创建时，以及依赖的属性或数据变化时，会运行一个函数，该函数会做两件事： 运行_render生成一棵新的虚拟dom树（vnode tree） 运行_update，传入虚拟dom树的根节点，对新旧两棵树进行对比，最终完成对真实dom的更新 核心代码如下： // vue构造函数 fu
阅读全文 »
发表于 2024-04-28 21:55阅读：0评论：0推荐：0
摘要：vue官方阐述：https://cn.vuejs.org/v2/guide/reactivity.html 响应式数据的最终目标，是当对象本身或对象属性发生变化时，将会运行一些函数，最常见的就是render函数。 在具体实现上，vue用到了几个核心部件： Observer Dep Watcher S
阅读全文 »
发表于 2024-04-28 21:51阅读：0评论：0推荐：0
摘要：v-model即可以作用于表单元素，又可作用于自定义组件，无论是哪一种情况，它都是一个语法糖，最终会生成一个属性和一个事件 当其作用于表单元素时，vue会根据作用的表单元素类型而生成合适的属性和事件。例如，作用于普通文本框的时候，它会生成value属性和input事件，而当其作用于单选框或多选框时，
阅读全文 »
发表于 2024-04-28 21:49阅读：0评论：0推荐：0
摘要：什么是虚拟dom？ 虚拟dom本质上就是一个普通的JS对象，用于描述视图的界面结构 在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟dom树，这也就意味着每个组件都对应一棵虚拟DOM树 为什么需要虚拟dom？ 在vue中，渲染视图会调用render函数，这种渲染不仅
阅读全文 »
发表于 2024-04-28 21:44阅读：0评论：0推荐：0
摘要：prop 最常见的组件通信方式之一，由父组件传递到子组件 event 最常见的组件通信方式之一，当子组件发生了某些事，可以通过event通知父组件 style和class 父组件可以向子组件传递style和class，它们会合并到子组件的根元素中 示例 父组件 <template> <div id=
阅读全文 »
