Nekoaimer

# 1.JS 闭包的定义 这里先来看一下闭包的定义，分成两个：在计算机科学中和在 JavaScript 中。 在计算机科学中对闭包的定义（维基百科）： 闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures）； 是在支持 头等函数 的编程语言中，实现词法绑定的一种技术； 闭包在实现上是一个结构体，它存储了一个函数和一个关联的环境（相当于一个符号查找表）； 闭包跟函数最大的区别在于，当捕捉闭包的时候，它的 自由变量 会在补充时被确定，这样即使脱离了捕捉时的上下文，它也能照常运行； 闭包的概念出现于 60...

# 全局代码执行过程 # 变量 var name = "nekoaimer"foo(233)function foo(num) { console.log(m) var m = 10 var n = 20 console.log(name)}参考： # 函数 var name = 'nekoaimer'foo(233)function foo(num) { console.log(m) // undefined var m = 10 var n = 20 var name = 'foo'...

# 认识 JavaScript 引擎 为什么需要 JavaScript 引擎？ 我们说过，高级的编程语言都是需要转成最终的机器指令来执行的； 事实上我们编写的 JavaScript 无论你交给浏览器或者 Node 执行，最后都是需要被 CPU 执行的； 但是 CPU 只认识自己的指令集，实际上是机器语言，才能被 CPU 执行； 我们需要 JavaScript 引擎帮助我们将 JavaScript 代码翻译成 CPU 指令来执行； 比较常见的 JavaScript 引擎： SpiderMonkey：第一款 JavaScript 引擎，由 Brendan Eich 开发（JavaScript...

# Mini-Vue 实现思路 渲染系统，改模块主要包含三个功能： 功能一：h 函数，用于返回一个 VNode 对象； 功能二：mount 函数，用于将 VNode 挂载到 DOM 上； 功能三：patch 函数，用于对比两个 VNode 进行对比，决定如何处理新的 VNode； 响应式系统： 通知依赖 notify () 数据劫持 reactive () 数据结构 getDep () 添加方法 depend () 方法依赖 watchEffect () Vue2 的 defineProperty 实现 Vue3 的 Proxy 实现 # 渲染器实现 # h 函数与 mount...

# teleport 基本使用 # App vue<template> <div class="app"> <teleport to="#neko"> <h2>当前计数</h2> <button>+1</button> <HelloWorld></HelloWorld> </teleport>...

# 1.directives 局部指令 vue<template> <div> <input type="text" v-focus /> </div></template><script>export default { // 局部指令 directives: { focus: { mounted(el, bindings, vnode, preVnode) {...

# 1.render 基本使用 vue<script> import { h } from 'vue'; export default { data() { return { counter: 0 } }, render() { return h("div", {class: "app"}, [ h("h2", null,...

.countdown { color: darkgoldenrod; text-size: 24px; } setInterval(() => { const countdown = document.querySelector(".countdown"); const times = (Date.now() - +new Date( "2021-08-03 16:49:33")) / 1000; let d = parseInt(times / 60 / 60 / 24); let h = parseInt(times / 60 %...

# 1. 目录结构 # 2. 封装案例 # useCounter vue// hooks/useCounter.jsimport { ref, computed } from "vue"export default function () { const counter = ref(0) const doubleCounter = computed(() => counter.value * 2); const increment = ()=>counter.value++ const decrement...

# 1.provide & inject 基本使用 vue// App<template> <div> <h2>-------------App--------------</h2> <h2>App name: {{ name }}</h2> <h2>App age: {{ age...