Hillyee-blog

Vuex的状态管理 vuex介绍 什么是状态管理？ 应用程序的各种数据保存到某个位置进行管理 ​ state：数据 view：最终模块渲染成DOM actions：修改state的行为事件 复杂的状态管理 多个组件共享状态 Vuex的状态管理 将组件的内部状态抽离出来 Vuex使用单一状态树 SSOT：Single Source of Truth，单一数据源 每个应用仅仅包含一个store实例 安装 npm install vuex@next 使用vuex4.x，需要添加next指定版本 使用 创建store（仓库） Vuex和单纯的全局对象有什么区别呢？ Vuex的状态存储是响应式的 不能直接改变store中的状态 改变store中的状态的唯一途径就是提交(commit) mutation 这样方便我们跟踪每一个状态的变化，从而让我们能够通过一些工具帮助我们更好的管理应用的状态 具体步骤： store/index import { createStore } from 'vuex'// 创建一个新的 ...

学习资料 [前端算法与数据结构面试：底层逻辑解读与大厂真题训练] 链接：https://juejin.cn/book/6844733800300150797 大纲：

VueRouter路由使用 简单的介绍😏 这一部分了解、理解一下，知道有就行 后端路由阶段： 服务器渲染好整个页面，并且将页面返回给客户端 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化 不利于维护 前后端分离阶段： 后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过JavaScript将数据渲染到页面中 前后端责任清晰，后端专注于数据上，前端专注于交互和可视化上 前端路由是如何做到URL和内容进行映射呢？监听URL的改变 URL的hash URL的hash也就是锚点(#), 本质上是改变window.location的href属性 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新 (页面一旦刷新，又会向服务器发请求) <div id="app"> <a href="#/home">home</a> <a href="#/about">about</a> ...

待完善…

JS 数据类型转换 类型转换可以分为两种：隐式类型转换 和 显式类型转换 显式：比如 Number(value) String(value) … 隐式：对不同类型的值使用运算符时，值可以自动转换，比如 1 == null 我们需要知道：在 JS 中只有3中类型的转换：转换为 Number，String，Boolean类型 所以我们只需要弄清楚在什么场景下应该转成哪种类型就可以了 转换为boolean 显式：Boolean() 方法可以直接用来将值转换成布尔型 Boolean(2) // true 隐式：通常在逻辑判断或者有逻辑运算符时被触发 if(2) {} // 逻辑判断!!2 // 逻辑运算2 || 'hello' // 逻辑运算let x = 'hello' && 123 // x === 123// 逻辑运算符（比如 || 和 &&）是在内部做了 boolean 类型转换，但实际上返回的是原始操作数的值 boolean类型转换只有 true，false两种结果。 除了 0、NaN、空字符 ...

深入JS面向对象 面向对象初识 创建对象的方式 // 方式一：通过new Object()创建var obj = new Object()obj.name = "hill"obj.age = 18obj.running = function() { console.log(this.name + " is running");}// 方式二：字面量形式var info = { name: 'hill', age: 18, eating: function() { console.log(this.name + 'is' + this.age); }} 对属性的操作 var obj = { name: "yuzi", age: 18}// 1.获取属性console.log(obj.name); // yuzi// 2.给属性赋值obj.name = "jackson"c ...

严格模式 如何开启严格模式？ 在文件或者函数开头使用 “use strict” 严格模式常见的限制 "use strict""use strict"// 1.禁止意外创建全局变量// 在全局中不使用关键字直接定义变量message = "hello"message is not defined// 2. 不允许函数有相同的参数名称function foo(x, y, x) {}// Duplicate parameter name not allowed in this context// 3.使静默错误(不报错但也没有任何效果)的赋值操作抛出异常true.name = "abc"NaN = 123var obj = {}Object.defineProperty(obj, "name", { configurable: false, writable: false, // 不可写 value: "hillyee" ...

纯函数 - 柯里化 - 组合 纯函数 什么是纯函数？ 确定的输入，一定会产生确定的输出 函数在执行过程中，不能产生副作用 什么是副作用？ 在执行一个函数时，除了返回值函数之外，还对调用函数产生了附加的影响，比如说修改了全局变量，修改参数或者改变外部的存储 纯函数例子 var names = ["abc", "cba", "nba", "dna"]// slice只要给它传入一个start/end, 那么对于同一个数组来说, 它会给我们返回确定的值// slice函数本身它是不会修改原来的数组// 所以slice函数本身就是一个纯函数var newNames1 = names.slice(0, 3)console.log(newNames1)// splice不是一个纯函数var newNames2 = names.splice(2)console.log(newNames2)console.log(names) // [ 'abc', 'cba&#x ...

认识 arguments 什么是 arguments arguments 是一个对应于传递给函数的参数的类数组对象。(MDN) 类数组对象，就说明它本质上是一个对象类型 类数组表示它长得像数组，并且拥有数组的一些特性，比如说 length，可以通过 index 访问 但是却没有数组的一些方法，比如说 forEach，map 等 function foo() { // 会帮你接收所有传递给函数的参数 console.log(arguments); // [Arguments] { '0': 10, '1': 20, '2': 30 } // 获取参数的长度 console.log(arguments.length); // 3 // 根据索引值获取某一个参数 console.log(arguments[1]); // 20 // 获取当前 arguments 所在的函数 console.log(arguments.callee); // [Function: foo] ...

Vue3源码学习 第一次这样学习源码还是挺有难度的，希望后面可以慢慢提升，有自己阅读源码的能力叭 1. 真实的DOM渲染 传统的前端开发中，我们是编写自己的HTML，最终被渲染到浏览器上的，这个过程大概是： 解析 html 转化成 DOM 树，然后渲染到页面 2. 虚拟DOM 2.1 渲染过程 3. Vue 源码的三大核心系统 Complier模块：编译模板系统 Runtime模块：也可以称之为 Renderer模块，真正渲染的模块 Reactivity模块：响应式系统 三大系统协同工作 4. 实现 Mini-Vue mini-vue的实现也是，后面有时间得回来重新看看 包括三部分： 渲染系统模块 可响应式系统模块 应用程序入口模块 4.1 渲染系统实现 包含三个功能： h 函数，返回一个 VNode 对象 mount 函数，用于将 VNode 挂载到 DOM 上 patch 函数，用于对比两个 VNode，决定如何处理新的VNode（diff） h函数生成 VNode // 生成 VNode// 直接返回一个 VNode对象即可const ...