JS 原理面试-this、继承、fetch、generator
JavaScript 中的 this在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this 不能在执行期间被赋值，并且在每次函数被 调用时 this 的值也可能会不同。
确定 this 的值在非严格模式下，总是指向一个对象。但是在严格模式下，可以指定任意值。
开启严格模式的两种方法：
在整个脚本顶部开启
在函数顶部开启
123456// 为全局开启严格模式'use strict'function func() { // 为局部开启严格模式 'use strict'}
然后就可以根据不同的模式来确认this指向啦，
全局执行环境中，指向全局对象（非严格模式、严格模式）
函数内部,取决于函数被调用的方式
直接调用的this值:
非严格模式:全局对象(window)
严格模式:undefined
对象方法调用的this值:
调用者
123456789101112131415161718192021222324252627282930// 1.全局执行环境// 非严格模式: 不 ...
Vue3-Pinia工具
Pinia 简介Pinia 是 Vue 专属的最新状态管理库 ，是 Vuex 状态管理工具的替代品
Vue Pinia官方库
提供更加简单的API （去掉了 mutation ）
提供符合，组合式风格的API （和 Vue3 新语法统一）
去掉了 modules 的概念，每一个 store 都是一个独立的模块
配合 TypeScript 更加友好，提供可靠的类型推断
Pinia 使用手动添加
用你喜欢的包管理器安装 pinia：
12npm install piniayarn add pinia
创建一个 pinia 实例 (根 store) 并将其传递给应用：
12345678import { createApp } from 'vue'import { createPinia } from 'pinia'import App from './App.vue' const pinia = createPinia()const app = createApp(App) ...
Vue3-基本用法
create-vue 创建项目create-vue 是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应
需要安装 16.0 或更高版本的 Node.js
使用指令创建一个 Vue3 项目（居然是中文提示）
1npm init vue@latest
安装依赖，运行项目
123在项目目录下npm installnpm run dev
项目目录
关键文件：
vite.config.js ：项目的配置文件，基于 vite 的配置
package.json ：项目包文件，核心依赖项变成了 Vue3.x 和 vite
main.js ：入口文件，createApp 函数创建应用实例
123456import './assets/main.css' import { createApp } from 'vue'import App from './App.vue' createApp(App).mount('#app')
ap ...
Vue-Vuex 基本用法
Vuex 简介Vuex 是一个 Vue 的状态管理工具，状态就是数据。
大白话：Vuex 是一个插件，可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如：购物车数据 个人信息数
使用场景：
某个状态 在 很多个组件 来使用 (个人信息)
多个组件 共同维护 一份数据 (购物车)
优势：
共同维护一份数据，数据集中化管理
响应式变化
操作简洁（ Vuex 提供了一些辅助函数）
创建 Vuex 空仓库
在终端使用指令 yarn add vuex@3或者npm i vuex@3
12yarn add vuex@3npm i vuex@3
新建 store/index.js 文件放置 vuex
创建仓库 store/index.js
123456789101112// 导入 vueimport Vue from 'vue'// 导入 vueximport Vuex from 'vuex'// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化Vue.use(Vuex)// 创建仓库 storeconst ...
Vue-路由
路由介绍单页应用程序：指的是所有功能都在一个html页面实现的，通过路由实现页面的按需更新，只更新内容，头部标签等等保持不变，提高性能
具体实例：
单页应用网站： 网易云音乐 https://music.163.com/
多页应用网站：京东 https://jd.com/
Vue 中的路由：路径和组件的映射关系
路由的使用VueRouter：
作用：修改地址栏路径时，切换显示匹配的组件
说明：Vue 官方的一个路由插件，是一个第三方包
官网：https://v3.router.vuejs.org/zh/
下载 VueRouter 模块到当前工程，（Vue2 兼容的版本为3.6.5）
1yarn add vue-router@3.6.5
main.js中引入VueRouter
1import VueRouter from 'vue-router'
安装注册
1Vue.use(VueRouter)
创建路由对象
1const router = new VueRouter()
注入，将路由对象注入到new Vue实例中，建立关联
1 ...
Vue-自定义指令、插槽
自定义指令概念：自己定义的指令，可以封装一些dom操作，扩展额外的功能
inserted：被绑定元素插入父节点时调用的钩子函数
el：使用指令的那个DOM元素
全局注册：
1234567Vue.directive('指令名', { "inserted" (el) { // inserted指的是当组件被插入到页面时 // 可以对el标签，扩展额外功能 el.focus() // 实现对元素的聚焦 }})
局部注册：
1234567directives: { "指令名": { inserted() { el.focus() } }}
使用：
1<input v-指令名 type="text">
注意：
在使用指令的时候，一定要先注册，再使用，否则会报错
使用指令语法： v-指令名。如：<input type="text" v-focus/> ...
Vue-组件通信、进阶用法
组件三大组成部分结构<template>：
只能有一个根元素
样式<style>：
全局样式(默认)：影响所有组件
局部样式：scoped 下样式，只作用于 当前组件
逻辑<script>：
el 根实例独有, data 是一个函数, 其他配置项一致
组件样式冲突 scoped默认情况：写在组件中的样式会 全局生效 ，因此很容易造成多个组件之间的样式冲突问题。
全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响
局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件
12<style scoped></style>
scoped原理：
当前组件内标签都被添加data-v-hash值 的属性
css选择器都被添加 [data-v-hash值] 的属性选择器
最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
data 是一个函数一个组件的 data 选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。
每次创 ...
Vue-计算属性、侦听器、生命周期、工程化
计算属性概念：基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。
语法：
声明在 computed 配置项中，一个计算属性对应一个函数
使用起来和普通属性一样使用 {{ 计算属性名 }} 计算属性 → 可以将一段 求值的代码 进行封装
注意：
computed配置项和data配置项是同级的
computed中的计算属性虽然是函数的写法，但他依然是个属性
computed中的计算属性不能和data中的属性同名
使用computed中的计算属性和使用data中的属性是一样的用法
computed中计算属性内部的this依然指向的是Vue实例
12345678910111213141516171819202122232425262728293031323334<div id="app"> <h3>消费记录</h3> <table> <tr> <th>用途</th> <th>花销</th> ...
Vue-指令
Vue 指令概念：指令是 Vue 提供的带有 v- 前缀的特殊标签属性。
Vue 会根据不同的指令，针对标签实现不同的功能，提高操作 DOM 的效率
12<!-- Vue 指令： v- 前缀的标签属性 --><div v-html="str"></div>
vue 中的指令按照不同的用途可以分为如下 6 大类：
内容渲染指令（v-html、v-text）
条件渲染指令（v-show、v-if、v-else、v-else-if）
事件绑定指令（v-on）
属性绑定指令 （v-bind）
双向绑定指令（v-model）
列表渲染指令（v-for）
内容渲染指令内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。
常用的内容渲染指令有如下2 个：
v-text（类似innerText）：
使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中
类似 innerText，使用该语法，会覆盖 p 标签原有内容
v-html（类似 i ...
Vue-概念、入门
Vue 概念Vue (读音 /vjuː/ ) 是一套 构建用户界面 的 渐进式 框架
构建用户界面：
基于数据渲染出用户可以看见的界面
渐进式：
就是循序渐进，不一定非要把Vue所以的API学完才能开发Vue，可以层层递进
Vue开发的两种方式：
Vue核心包开发：局部模块改造
Vue核心包&Vue插件&工程化：整站开发
框架：
框架就是一套完整的解决方案，相当于实现了大部分的功能，然后按照指定的规则进行编写内容
优点：大大提升开发效率 (70%↑)
缺点：需要理解和记忆规则，官网
创建Vue实例通过CDN使用 Vue2&Vue3 ：
123456<!--对于制作原型或学习，你可以这样使用最新版本：--><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><!--对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：--><script src=& ...