# JavaScriptDemo-209

**Repository Path**: nieps/java-script-demo-209

## Basic Information

- **Project Name**: JavaScriptDemo-209
- **Description**: 209 java javascript案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-04-13
- **Last Updated**: 2023-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 前端

## README

# JavaScript笔记 

## 介绍

node.js   express 

js  是一种基本语言 

网页组成:

* html  标记语言  组织页面结构 
* css   样式规则  
* javascript  

能够做哪些工作？

* 做验证 与服务器交互  
* 做表单验证 
* 动态更改页面内容  
* 数据绑定与渲染 

ES6     

## 基础

  js是弱类型语言 ，声明变量时，无需指明变量的类型，它的类型由值来决定。

区别：

* undefined  有变量没有值 
* is not defined  变量不存在 

js允许使用双字节定义变量 

## 数据类型

分为两大类:

### 基本类型 

* 数字类型 Number  

  > 方法：
  >
  > 开发时直接使用parseInt  parseFloat  
  >
  > ![image-20230413150620557](E:/workspace/JavaScriptDemo/assets/image-20230413150620557.png)
  >
  > 常用原型方法：
  >
  > * toFixed  指定小数点的位数  四舍五入  
  > * toPrecision  指定整数和小数的位数   四舍五入  
  > * toLocaleString  格式化数字  
  >
  > 

引用类型 

  对象：   ----json对象 

  对象是一组属性的无序集合 ，每个属性都是名值对组成，名称是字符串类型，可以是空字符串，值可以是任何js类型

## 对象

![image-20230414085818741](E:/workspace/JavaScriptDemo/assets/image-20230414085818741.png)



## 数组

队列：  FIFO      

* push    shift  
* unshift   pop 

栈: FILO

* push    pop  
* unshift  shift  

## 回调函数

将函数做为参数传递的函数，就是回调函数 

## 断点调式

* 在指定的代码处  加上关键字 debugger  
* 在开发者工具中的 source找到源文件   单击回断点

## 闭包

闭包就是能够读取其他函数内部变量的函数。

## 箭头函数

![image-20230414160146818](E:/workspace/JavaScriptDemo/assets/image-20230414160146818.png)

作用：

* 简化函数的定义  
* 当我们使用箭头函数的时候，箭头函数（词法作用域）会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。

java中for each:    for(String  s :  数组)



## DOM BOM 

* DOM   document object model  

  > 将html元素转换为dom对象  

* BOM  浏览器对象模型

## 本地存储 

![image-20230417173654596](E:/workspace/JavaScriptDemo/assets/image-20230417173654596.png)

## 事件对象

* type  事件类型 
* target   触发事件的目标对象  
* currentTarget  绑定事件的目标对象 



面试：如何防止表单重复提交

* onload:  代表页面加载完毕才执行（图片 css  js ）
* **`DOMContentLoaded`**  当纯 HTML 被完全加载以及解析时，**`DOMContentLoaded`** 事件会被触发

## ajax

Ajax即**A**synchronous **J**avascript **A**nd **X**ML（异步JavaScript和XML）

* 同步请求  提交请求到服务器  等待服务器返回结果   这个过程一直处于等待状态，不做任何操作 from表单

* 异步请求  

### XMLHttpRequest



### 同源策略

要求 协议 域名 端口号  三者一致认为是同源，允许访问 

端口号:  默认的http协议 80           https协议:443   

> 1.  http://www.baidu.com/index.html    https://www.baidu.com/index.html    不是
> 2. http://www.baidu.com    http://zhidao.baidu.com     不是
> 3. http://www.baidu.com:433/index.html    http://www.baidu.com:8080/index.html  

[跨源资源共享*cors*](http://www.baidu.com/link?url=V_X_xb5Non9rBlopCoRYgyB3zeok1BMPkMgNAUJyQndf52Ob2gETM3KH6PwM1xArdyeknDFCODP2hlNorpd0wa)

### readyState

![image-20230418093422784](E:/workspace/JavaScriptDemo/assets/image-20230418093422784.png)

### http状态

1. 1 [消息](https://baike.baidu.com/item/HTTP状态码/5053660?fr=aladdin#1)
2. 2 [成功](https://baike.baidu.com/item/HTTP状态码/5053660?fr=aladdin#2)
3. 3 [重定向](https://baike.baidu.com/item/HTTP状态码/5053660?fr=aladdin#3)
4. 4 [请求错误](https://baike.baidu.com/item/HTTP状态码/5053660?fr=aladdin#4)
5. 5 [服务器错误](https://baike.baidu.com/item/HTTP状态码/5053660?fr=aladdin#5)

常用状态码:

* 200 ok  代表服务器请求成功 

* 4开头的都是客户端错误 

  > * 400 Bad Request   通常是请求参数有问题 
  > * [403 Forbidden](https://baike.baidu.com/item/403 Forbidden/5101750?fromModule=lemma_inlink)
  > * 404 Not Found   请求的地址找不到  要么写错了要么地址不存在
  > * 405 Method Not Allowed   请求的方法与服务器方法不一致

* 5开头的  是服务器错误  

  > * 500 Internal Server Error

## promise

问题：  

   使用回调函数接收异步结果，

  回调地狱：  回调函数嵌套回调函数

promise对象可以保证 异步操作有一个最终的结果（成功或失败）

### 三种状态

- *待定（pending）*：初始状态，既没有被兑现，也没有被拒绝。
- *已兑现（fulfilled）*：意味着操作成功完成。
- *已拒绝（rejected）*：意味着操作失败。

对象的创建：

new Promise(callback)

callback做为Promise对象 的参数，它是一个回调函数，访函数最多接收两个参数：

* 第一个参数 resolve  代表的是成功的回调函数 
* 第二个参数  reject 代表的是失败的回调函数   

实例方法：

* then()  接收一个回调函数做为参数  该函数有一个参数代表成功的结果   ，同时该方法返回一个Promise对象 
* catch()  接收一个回调函数做为参数，  该函数有一个参数代表失败的结果  
* `finally()`  无论最终结果是成功或失败，都执行该方法

静态方法:

* Promise.resolve()   方法返回一个以给定值解析后的 [`Promise`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 对象
* **`Promise.reject()`** 方法返回一个带有拒绝原因的 `Promise` 对象。

## async/await异步函数

`async` 和 `await` 关键字让我们可以用一种更简洁的方式写出基于 [`Promise`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步行为，而无需刻意地链式调用 `promise`。

* async 声明异步函数的 

  > 使用方法：
  >
  > 1. 在关键字function 前面直接使用   如   async function check() {}
  > 2. 在箭头函数 ()前加上   async ()=>{}

* `await` 操作符用于等待一个 [`Promise`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 兑现并获取它兑现之后的值。它只能在[异步函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function)或者[模块](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules)顶层中使用。

## axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

模块：  一个js文件就是一个模块  

## 特性

- 从浏览器中创建 [XMLHttpRequests](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
- 从 node.js 创建 [http](http://nodejs.org/api/http.html) 请求
- 支持 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 [XSRF](http://en.wikipedia.org/wiki/Cross-site_request_forgery)



### cdn

restful风格api设计：

资源名称一样，由不同的动词来表示你想干什么 

* get     代表读取资源    /user 
* post   代表的是新建资源   /user
* delete  代表删除  /user 
* put   代表的是修改 /user

### 请求配置参数

* url  接口地址
* method  请求方法 get put post  delete  
* baseURL  服务器地址 
* headers 请求头  
* params get请求的参数对象   会将参数拼接在url上 
* data   post  put  请求  封装的参数对象 
* timeout   超时时间 

要求：后端要求每个请求  都会提供公共参数

* userid  
* 编码...



## 模块

### node.js 模块  

> ### CommonJS模块
>
> CommonJS规划中有两个基本理念:
>
> - 用户可以通过requeire函数，引入本地文件系统中的某个模块
> - 通过exports和module.exports两个特殊变量，对外发布能力

### es6  模块 

> ### 为什么要有模块系统
>
> 一门好的语言一定要有模块系统，因为它能为我们解决工程中遇到的基本需求
>
> - 把功能进行模块拆分，能够让代码更具有条理，更容易理解，能够让我们单独开发并测试各个子模块的功能
> - 能够对功能进行封装，然后再其他模块能够直接引入使用，提高复用性
> - 实现封装：只需要对外提供简单的输入输出文档，内部实现能够对外屏蔽，减少理解成本
> - 管理依赖关系：好的模块系统能够让开发者根据现有的第三方模块，轻松的构建其他模块。另外模块系统能够让用户简单引入自己想要的模块，并且把依赖链上的模块进行引入
>
> 刚开始的时候，JavaScript并没有好的模块系统，页面主要是通过多个script标签引入不同的资源。但是随着系统的逐渐复杂化，传统的script标签模式不能满足业务需求，所以才开始计划定义一套模块系统，有AMD,UMD等等
>
> NodeJS是运行在后台的一门服务端语言，相对于浏览器的html，缺乏script标签来引入文件，完全依赖本地文件系统的js文件。于是NodeJS按照CommonJS规范实现了一套模块系统
>
> 2015年ES2015规范发布，到了这个时候，JS才对模块系统有了正式标准，按照这种标准打造的模块系统叫作ESM系统，他让浏览器和服务端在模块的管理方式上更加一致

export和import

模块是一个js文件，模块与模块之间相互引用，被引用 的模块要暴露接口，引用模块要   导入你需要的接口

###   方式一

* 使用export  { v1,v2....} 暴露接口  
* 使用 import  {v1,v2...}  from '模块' 引入接口

### 方式二

*  使用export default  {}  暴露一个默认接口    一个模块只能有一个默认的接口  ，但同时还可以使用export {} 暴露其它接口 
* 使用import  自定义名称  from  '模块名'   (注意：这里不需要{} ，引入的名称可以自定义)
* import 自定义名称,{要导入的接口} from '模块名'



## 解构赋值

* 对象解构赋值 

    const  {变量名,.....}=对象       会将对象的中与变量名一样的属性  值赋值给变量 

* 数组解构   

   const [x,y,...other]=数组    x取第一个元素，y取第二个，other取剩余的组成的新的数组 

# Node.js

  Node.js 是一个开源与跨平台的 JavaScript 运行时环境。(类似于JVM)

  Node.js 在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核）

### 命令

~~~shell
# 查看node.js版本 
node  -v  
#查看npm 版本
npm -v  
#查看npm 帮助 
npm --help 
#查看 安装源 
npm config get registry
#设置安装源 
npm config set registry=服务器地址 

#安装模块  
npm install 模块名 

#淘宝镜像  
#方法一安装cnpm  代替npm 命令 
npm install -g cnpm --registry=https://registry.npmmirror.com
#方法二  替换npm 服务器地址 
npm config set  registry=https://registry.npmmirror.com/
#查看服务器地址 
npm config get registry
~~~



### 安装包

~~~shell
#安装  默认安装 的模块是最新的版本 
npm install 模块名  #install  可以简化成  i  如  npm i  模块名
#查看模块可用的版本号
npm view 模块名  
#安装指定版本的模块 
npm i 模块名@版本号

#全局安装
npm i -g 模块名  

#查看当前项目中  安装 的本地模块  
npm list  

#查看全局安装的模块 
npm list -g  

#安装所有的依赖
npm i  
~~~



### 卸载

~~~shell
#卸载
npm uninstall  模块名 
#简化  uninstall ===   unlink, remove, rm, r, un
npm rm 模块名

~~~



### 更新命令

~~~sh
npm update 模块名 
~~~



### 查找模块

~~~shell
#查找 
npm search 模块名
~~~



### 快速删除node_module

~~~shell
#全局安装模块 rimraf  
npm i   -g   rimraf 

#使用 删除模块  进入node.js项目目录  执行
rimraf node_modules  
~~~

### 网站查找模块

[https://www.npmjs.com/](https://www.npmjs.com/)

### package.json

![image-20230419174818072](E:/workspace/JavaScriptDemo/assets/image-20230419174818072.png)

创建package.json文件 

~~~shell
#创建项目
npm  init 
~~~



### 清除缓存 

~~~shell
npm cache clean  --force
~~~



### 模块

* ESM  es模块   export  导出接口  import 导入接口 
* node.js  commonjs规范    exports或module.exports   require导入  

> exports是一个变量，默认指向 module.exports 这个对象的地址 
>
> 你可以通过在exports对象上增加属性暴露接口（在exports增加属性其它就是在module.exports上增加），
>
> 但是不能将exports指向一个新的对象 （如果指向新的对象，那么exports不再指向module.exports，就不能再暴露接口 ）
>
> //通过require引用模块  它会将引入的模块中的module.exports对象赋值给变量 如下 
> const user=require("./user.js")
>
> ![image-20230420092842409](E:/workspace/JavaScriptDemo/assets/image-20230420092842409.png)



# Vue

## 介绍

Vue (发音为 /vjuː/，类似 **view**) 是一款用于**构建用户界面**的 JavaScript 框架。(渐进式的框架 )

并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

* 声明响应式对象    对象的内容变化 页面           跟着自动渲染
* 组件化    （一段html css  js的组合 ）  复用    

渐进式的框架

* 项目中一部分功能开始使用vue  
* 使用vue中提供的一部分功能  

javascript进行dom操作------jQuery  (js类库)

前端框架：  

* vue  作者  中国人     借鉴了google  Angular  
* react  
* Angular  

## 版本

### Vue2

 vue2 采用选项式配置 

在vue2中  Vue是一个构造函数,创建实例如下：

~~~javascript
const app=new Vue({
				el:"#app",//vue渲染的模板 
				data:{
					name:"张三"
				}
});
~~~



### Vue3

* 选项式
* 组合式 

#### 全局构建版本

该版本的所有顶层 API 都以属性的形式暴露在了全局的 `Vue` 对象上。

~~~javascript
const {createApp}=Vue;
~~~

#### 使用 ES 模块构建版本

~~~javascript
import {createApp} from './js/vue.esm-browser.js'
~~~



## 应用

* 容器     所有vue选项或语法  只有在容器内才能使用 
* 创建vue实例  createApp ({}) 
* 将容器与实例关联起来   调用vue实例的mount()方法  ，挂载到容器上 

组件实例选项在vue实例上，都有对应的   $选项名称，  定义响应对象时避免使用$开头 

## 选项

* data   是一个函数  返回一个普通 的对象  ，由vue转换为响应式对象  （代理对象）

  > 访问时，可以通过vue实例 app.$data.属性名  或者app.属性名 

## 方法

* app.mount()   将应用实例挂载在一个容器元素中。 里面接收一个参数  DOM 元素或一个 CSS 选择器
* setup   函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 `setup()` 暴露的属性

钩子：回调函数

## SAP应用

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

## 基础语法

### 模板语法

响应式：

* ref(val)  =======>    {"value":val}  基本数据类型  包装成响应对象   在模板中会自动解包,可以直接访问响应式对象 
* reactive()  将引用类型转换为响应式对象   接收 引用类型：  object   数组  ，不能包装基本类型  

 模板插值：  {{}} 

 html :  v-html指令 

### 属性绑定

* v-bind:属性名="响应对象的属性"
* 简化 （省略v-bind）   :属性="响应对象的属性"
* 绑定多个属性：     v-bind="响应式对象"    响应式对象是含有多个属性的对象  

 布尔类型的属性绑定：渲染时如果为true会增加该属性，为false会移除该属性.

### 计算属性

* 只读的  computed() 该函数接收一个 无参的 带有返回值的函数  
* 可写 的  computed() 接收一个对象做为参数  该对象有两个属性: get  set  都 是函数 

**计算属性值会基于其响应式依赖被缓存**，如果响应式对象没有发生变化，计算属性不会执行，直接取 缓存 



### 样式绑定

* 对象绑定   {样式名:布尔表达式}   表达式为true样式生效 
* 三元表达式   "exp?样式1：样式2 "      （建议写在  [exp?样式1：样式2]）
* 数组绑定   :class="[响应式对象]"   动态绑定样式 

### 条件 渲染

v-if与v-show的区别：

* v-if  是惰性的  条件成立 才会插入html    ， v-show始终会渲染html,只是通dispaly属性来切换 显示  
* v-if 初始开销比较小 ，v-show初始开销大 
* 如果是频繁切换，v-if是不段的插入与销毁，效率低；   而v-show只是切换状态  适合频繁切换 
* v-if有 else  elseif  多重判断  ，v-show只有一种情况  
* v-if可以在template上使用，而v-show不可以 



### 列表渲染

  遍历数组

*   item  in items     item是迭代变量  items是数组 
*  （item,index） in items  index 代表循环的索引  

遍历对象：

* value in object   value迭代变量，代表对象属性的值    object是对象
* (value,name) in object  value是值 name属性名 
* （value,name,index）  index索引  



key属性：  数据在发生变化时，为了提高效率，vue默认是就地更新，但是如果渲染的是组件或复杂结构，通常设置一个唯一的key值，告诉vue数据变化时重新渲染

### 事件

语法：

* v-on:事件类型=   "方法"
* @事件类型="方法"

方法传递：

* 传递方法名     如果方法定义时有参数，参数类型为事件对象 
* 调用方法 (调用时没有传参)  而方法定义时有参数，参数的值为undefined 
* 调用方法时，可以显式的传递事件参数    $event

### 表单绑定

 v-model:    属性绑定与事件相结合 

* 复选框 

  > 1.  只有一个复选框   v-model绑定的是一个布尔类型的值 
  > 2. 多个复选框   v-model绑定的是一个数组类型的 

- 文本类型的 `<input>` 和 `<textarea>` 元素会绑定 `value` property 并侦听 `input` 事件；
- `<input type="checkbox">` 和 `<input type="radio">` 会绑定 `checked` property 并侦听 `change` 事件；
- `<select>` 会绑定 `value` property 并侦听 `change` 事件。

### 生命周期

构子：  回调函数  

![Snipaste_2023-04-21_17-52-58](assets/Snipaste_2023-04-21_17-52-58.png)

createApp()

~~~javascript
function createApp(){
    //调用方法 
    setup();
    
    beforeCreate();
    
    //初始化选项api 
    
    created();
    
}


~~~



做选项式配置：

请求服务器接口：

* created  ----------请求后台的 
* beforeMount
* Mounted  

### 侦听器

监听一个数据源，当数据源发生变化时，我们执行某些操作。。

~~~javascript
function watch<T>(
  source: WatchSource<T>,
  callback: WatchCallback<T>,
  options?: WatchOptions
): StopHandle
~~~

第一个参数是侦听器的**源**。这个来源可以是以下几种：

- 一个函数，返回一个值
- 一个 ref
- 一个响应式对象
- ...或是由以上类型的值组成的数组

第二个参数是在发生变化时要调用的回调函数。这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如等待中的异步请求。

当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。

第三个可选的参数是一个对象，支持以下这些选项：

- **`immediate`**：在侦听器创建时立即触发回调。第一次调用时旧值是 `undefined`。
- **`deep`**：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。参考[深层侦听器](https://cn.vuejs.org/guide/essentials/watchers.html#deep-watchers)。
- **`flush`**：调整回调函数的刷新时机。参考[回调的刷新时机](https://cn.vuejs.org/guide/essentials/watchers.html#callback-flush-timing)及 [`watchEffect()`](https://cn.vuejs.org/api/reactivity-core.html#watcheffect)。 默认是在dom更新前调用，如果设置为post，将在dom更新之后调用  



### 模板引用

当我们需要直接访问底层 DOM 元素时可以使用特殊的 `ref` attribute来实现.

如：   <input type="text"  ref="user"/>

#### 组合式api引用

~~~javascript
//必须声明一个与模板中ref的值相同的响应式属性
const user=ref(null);

//然后才能使用 如聚焦
user.value.focus();

~~~

#### 选项式api

~~~javascript
//直接通过  this.$refs.引用名  引用  
this.$refs.user.focus();
~~~



### 组件

#### 全局注册

局部注册

组件名称：

* 大驼峰命名法   如  UserList  (推荐方式的)

  引用:

  1. <UserList></UserList>
  2. 短横线方式引用   <user-list></user-list>

* 直接使用短横线命名法   如user-list  这时引用时只能使用短横线命名  <user-list></user-list>



SFC 单文件组件，以.vue结尾的文件  ，有三部分组件：

* <script></script>  里面是组件配置  与createApp()传递的参数对象是一样的 

* <template></template>  这就是模板  就是html结构  

* <style  scoped></style>     scoped说明这里定义的样式只适用于当前组件  

#### props

> 组合式API 通过defineProps()方法来定义，参数如下

* 定义一个数组，里面声明组件的属性名 

* 定义成对象  

  ~~~javascript
  属性名:{  
    type?: PropType<T>
    required?: boolean
    default?: T | ((rawProps: object) => T)  //。对象或数组的默认值必须从一个工厂函数返回
    validator?: (value: unknown) => boolean
  }
  ~~~

  

#### 单向数据流

默认子组件的属性不能直接改变，它会因父组件的改变而改变。

如果非要改变子组件的属性值，有两种方案:

* 声明一个响应式对象，将属性值做为初始值，可以改变响应式对象 
* **需要对传入的 prop 值做进一步的转换**  使用计算属性 

#### 事件

##### 组合式

子组件抛出事件：

~~~javascript
//声明事件
const emit=defineEmits(["close"])
//抛出事件
emit("close");
~~~

父组件监听事件

~~~html
<MyComponent  @close="事件方法"></MyComponent>
~~~

##### 声明式

子组件抛出事件

~~~javascript
 //声明事件
 emits:["close"],
     
 //抛出事件
 this.$emit("close");
~~~

父组件监听事件

~~~html
<MyComponent  @close="事件方法"></MyComponent>
~~~

##### 子组件给父组件传递参数

~~~javascript
//可以传递多个参数  
this.$emit("close",...args);  
//或
emit("close",...args);
~~~

父组件通过方法接收

##### 声明事件

*  emit:  []  传递数组  声明事件的名称既可  比较常用  
* emit  : { 事件名称:  null  ||  验证函数 }  传递对象      验证函数是触发事件$emit("事件",...args)  接收args的函数 ，可以在里面做验证 ，返回true验证通过，返回false发出警告信息 

#### 组件v-model

默认 情况 下，传递的两个参数：

* modelValue    值  要求与实际的表单进行绑定 
* update:modelValue  对应的事件 

引用时:

~~~html
<MyCompennt  v-model="响应式对象"></MyCompennt>
~~~



自定义参数：

组件定义：

* 属性    自定义属性名 如  value  要求该属性与目标表单绑定 
* 事件   update:属性名   如  update:value  在表单值发生变化后 抛出update:value事件，并将值同时抛出 

引用 :

~~~html
<MyComponent  v-model:属性名="响应式对象 "></MyComponent>
~~~



#### 透传属性

组件定义：属性   props声明接收 

> 通过props传递的属性，在子组件的脚本中如何引用 ：
>
> 组合式api:
>
> ~~~javascript
> //defineProps()返回的对象就是属性对象 
> const props=defineProps([....])
> //通过props.属性名  就可以直接引用  
> ~~~
>
> 选项式：
>
> ~~~javascript
> this.$props.属性名  //引用  
> ~~~
>
> 

透传属性：  没有经过props声明的或没有结过emits声明的事件 ，    在引用组件时传递的属性 

> 在选 项式中通过  [$attrs](https://cn.vuejs.org/api/component-instance.html#attrs)   来引用 透传属性 
>
> 常用 的透传属性:  class  style  id  

组件定义：

* 在vue2中要求必须是单根元素
* 在vue3中可以是单根元素  也可以多根元素 

单根元素：透传属性会增加到根元素上  

多根元素：默认不会增加，且会报警告,可以在一个根元素上增加 v-model="$attrs"  显示 的接收透传属性 

透传属性访问:

* 在模板访问透传属性  直接使用组件实例$attrs    {{ $attrs}}

* 在js脚本中

  > 组合式api:
  >
  > ~~~javascript
  > import {useAttrs} from 'vue'
  > //方法的返回值  返回透传属性对象  
  > const attr=useAttrs();
  > ~~~
  >
  > 在选 项式api
  >
  > ~~~javascript
  > this.$attrs //直接访问 
  > ~~~
  >
  > 

禁用透传属性,通过选项式配置：

~~~javascript
inheritAttrs:false //禁用透传属性 
~~~

一旦禁用，要想方法透传属性，只能通过组件实例  $attrs 



#### 插槽

 插槽内容：自定义组件  包裹的内容  

 插槽: 出口表示:   <slot></slot>  代表插槽的内容   在子组件相应位置 显示  

 渲染作用域：插槽内容中可以直接访问父组件中的响应式对象或属性（因为它们在同一作用域），不能直接访问子组件的内容 

  如果想让插槽内容访问子组件的属性，通过指令v-slot 来接收一个插槽属性对象 ,插槽的属性需要在<slot  属性名=""></slot>  定义  

子组件:

~~~javascript
 <!--在插槽出口上  增加属性 -->
 <slot :xm="name" :nl="age"></slot>
~~~

父组件

~~~html
<My  v-slot="插槽属性对象">
    <!--在这里可以访问   插槽属性对象-->
</My>
~~~

或者直接使用对象解构赋值

~~~html
<My  v-slot="{插槽属性1,.....}">
    <!--在这里可以访问   插槽属性-->
</My>
~~~



具名插槽属性：

~~~html
<My v-slot:插槽名称="插槽属性对象"></My>
~~~

~~~html
<My #插槽名称="插槽属性对象"></My>
~~~



#### 依赖注入

*  提供方  

  > 选项式：   
  >
  > provide  :   对象 或返回一个对象的函数  
  >
  > 组合式
  >
  > provide()  函数 接收两个参数 ：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。

* 注入方 

> 选项式：  
>
> inject ：数组或对象 
>
> 组合式:
>
> inject()函数   接收一个参数，注入的属性，函数返回属性值。
>
> 接收第二个参数，是默认值 。

#### 异步组件

导入时注意事项：

 * 1. 不能以变量开头
 * 2.要求以文件扩展名结尾

    ~~~javascript
    let dir="05依赖注入02";
    let file="App";
    const App=defineAsyncComponent( ()=>import(`./views/${dir}/${file}.vue`)  );
    ~~~

# VueRouter

[官网](https://router.vuejs.org/zh/guide/)

## 介绍



## 应用

* 连接  router-link
* 路由出口  router-view



##  路由基本配置

创建路由: createRouter 





## 路由传参



### *路径参数* 

 用冒号 `:`参数名    表示

> path: '/users/:id'
>
> 接收： this.$route.params



### 编程导航传参

   方法:push 

* path   忽略params,  可以使用query
* name    params    (命名路由)



## 嵌套路由





问题：如果有多个、多层组件嵌套  传值  尤其是后带子孙给 祖先组件传值时，

A--B ---C      c先传递给B----由B再传递给A 

A组件要传参给C    依赖注入可以实现 

vue2----vuex --

# Pinia

*  状态管理库  (状态---也是数据 ---由多个组件共享 )
* 允许跨组件或页面共享状态

## 核心对象

### Store

 Store 是用 `defineStore()` 定义的

一个项目中可以有任意个store 

~~~javascript
import { defineStore } from 'pinia'

// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
  // 其他配置...
})
~~~

> dinfineStore函数:
>
> ~~~javascript
> /**
>     id 一个独一无二的名字  是必须传入的， Pinia 将用它来连接 store 和 devtools
>     setup  vue3 Setup 函数
>     setupOptions    可以传入一个带有 state、actions 与 getters 属性的 Option 对象
> */
> function defineStore(idOrOptions, setup, setupOptions) {
>     let id;
>     let options;
>     const isSetupStore = typeof setup === 'function';
>     if (typeof idOrOptions === 'string') {
>         id = idOrOptions;
>         // the option store setup will contain the actual options in this case
>         options = isSetupStore ? setupOptions : setup;
>     }
>     else {
>         options = idOrOptions;
>         id = idOrOptions.id;
>         if ((process.env.NODE_ENV !== 'production') && typeof id !== 'string') {
>             throw new Error(`[🍍]: "defineStore()" must be passed a store id as its first argument.`);
>         }
>     }
> ~~~
>
> 



#### Option Store

带有 `state`、`actions` 与 `getters` 属性的 Option 对象

* `state` 是 store 的数据 (`data`)     类似vue中的ref()
* `getters` 是 store 的计算属性 (`computed`)  返回值
* `actions` 则是方法 (`methods`)  

~~~javascript
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})
~~~



#### Setup Store

也存在另一种定义 store 的可用语法。与 Vue 组合式 API 的 [setup 函数](https://cn.vuejs.org/api/composition-api-setup.html) 相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。

~~~javascript
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)  //  state
  
  //actions
  function increment() {
    count.value++
  }
    
    //getters
  const doubleCount=computed(()=>{
      return count.value*2;
  });  
 
    //暴露的接口
  return { count, doubleCount,increment }
})
~~~

在 *Setup Store* 中：

- `ref()` 就是 `state` 属性
- `computed()` 就是 `getters`
- `function()` 就是 `actions`

### State

* store 的核心
* state是共享的状态(数据) 
* state 被定义为一个返回初始状态(数据对象)的函数  

~~~javascript
import { defineStore } from 'pinia'
const useStore = defineStore('storeId', {
  // 为了完整类型推理，推荐使用箭头函数
  state: () => {
    return {
      // 所有这些属性都将自动推断出它们的类型
      count: 0,
      name: 'Eduardo',
      isAdmin: true,
      items: [],
      hasChanged: true,
    }
  },
})
~~~



#### 访问   

默认情况下，你可以通过 `store` 实例访问 state，直接对其进行读写

~~~javascript
const store = useStore()
store.count++
~~~

#### 重置

可以通过调用 store 的 `$reset()` 方法将 state 重置为初始值

~~~javascript
const store = useStore()
store.$reset()
~~~

#### 变更state

除了用 `store.count++` 直接改变 store，你还可以调用 `$patch` 方法。它允许你用一个 `state` 的补丁对象在同一时间更改多个属性



const obj=reactive({});

obj={};//新的对象   失去了响应式

直接变更

~~~javascript
store.$patch({
  count: store.count + 1,
  age: 120,
  name: 'DIO',
})
~~~

通过函数变量

~~~javascript
//函数接收state做为参数  
store.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})
~~~

#### 订阅state

* 通过watch侦听器 侦听 state 及其变化

* 可以通过 store 的 `$subscribe()` 方法侦听 state 及其变化（推荐 ）

  > 使用 `$subscribe()` 的好处是 *subscriptions* 在 *patch* 后只触发一次
  >
  > 
  >
  > 默认情况下，*state subscription* 会被绑定到添加它们的组件上 (如果 store 在组件的 `setup()` 里面)。这意味着，当该组件被卸载时，它们将被自动删除。如果你想在组件卸载后依旧保留它们，请将 `{ detached: true }` 作为第二个参数，以将 *state subscription* 从当前组件中*分离*
  >
  > ~~~javascript
  > <script setup>
  > const someStore = useSomeStore()
  > // 此订阅器即便在组件卸载之后仍会被保留
  > someStore.$subscribe(callback, { detached: true })
  > </script>
  > ~~~
  >
  > 

### Getter

用法:

* 做为选项式api 中的一个属性
* 使用setup函数  通过计算属性实现computed

Getter 完全等同于 store 的 state 的[计算值](https://cn.vuejs.org/guide/essentials/computed.html)。可以通过 `defineStore()` 中的 `getters` 属性来定义它们。**推荐**使用箭头函数，并且它将接收 `state` 作为第一个参数

~~~javascript
export const useStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
})
~~~

我们也可以通过 `this` 访问到**整个 store 实例**

### Action

Action 相当于组件中的 [method](https://v3.vuejs.org/guide/data-methods.html#methods)。它们可以通过 `defineStore()` 中的 `actions` 属性来定义，**并且它们也是定义业务逻辑的完美选择。**

~~~javascript
export const useCounterStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
    randomizeCounter() {
      this.count = Math.round(100 * Math.random())
    },
  },
})
~~~

action 也可通过 `this` 访问**整个 store 实例**