vue一、vite vite [官网链接](开始 | Vite 官方中文文档 (vitejs.cn)) (1) 搭建 v

一、vite

vite [官网链接](开始 | Vite 官方中文文档 (vitejs.cn))

(1) 搭建 vue

yarn create vite my-vue-app --template vue

(2)指定开发服务器端口

二、vue

(一) 计算属性

1.基础示例

2.可写计算属性：getter 和 setter

3.计算属性缓存 vs 方法

(二) Class 与 Style 绑定

第 1 种：

第 2 种：

第 3 种：

第 4 种：

第 5 种：在组件上使用

第 6 种：在组件上使用

第 7 种：在组件上使用,如果组件有多个根元素，需要指定哪个根元素来接收这个 class。可以通过组件的 `$attrs` 属性来指定接收的元素。

第 8 种：在组件上使用

(三) 列表渲染

1.v-for循环中的 key属性

[ Vue指令:v-for列表循环](第十节:Vue指令:v-for列表循环 - 掘金 (juejin.cn))

列表渲染 | Vue.js

(四) v-model

1.表单输入绑定

2.vue3 底层机制

3. 多个 `v-model` 绑定

4. `v-model` 修饰符

type="number" v-model.number="num" 保证输入的数据是真正的数字

5. 组件上`v-model` 修饰符

6. 自定义组件`v-model`

(五) 生命周期

1.什么是Vue生命周期函数

2.选项式api 生命周期

父组件：

(1) beforeCreate

实例初始化之后：在beforeCreate阶段，Vue.js已经完成了组件实例的基本设置，包括实例对象的创建和原型链的建立。

在实例初始化完成并且 props 被解析后立即调用

不能访问 this 上的数据和方法，因为 Vue 实例尚未完成初始化

(2) created

在组件实例处理完所有与状态相关的选项后调用。

当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。

数据观测：Vue 已经设置了数据响应式，即可以通过this.$data访问到组件的响应式数据。
属性和方法的运算：可以访问组件的实例属性和方法。这包括在data选项中声明的数据、计算属性、方法，以及通过props传递的属性。
事件和侦听器设置：可以在这个阶段设置事件监听器 (this.$on)、侦听属性变化 (this.$watch) 或者向全局事件总线注册事件。

此时挂载阶段还未开始，因此 $el 属性仍不可用。

DOM操作：此时组件的模板已经编译完成，但尚未挂载到DOM中。

(3) beforeMount

在组件被挂载之前调用。

这个钩子在服务端渲染时不会被调用。(在 SSR 中，由于组件的初始渲染是在服务端完成的，因此beforeMount钩子不会被调用。)

当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。

模板编译：Vue 已经将组件的模板编译成渲染函数。这时候，模板中的指令和插值表达式已经被解析和准备好，但尚未将渲染函数挂载到 DOM 中。
未挂载到 DOM：尽管组件的模板已经编译好了，但实际上还没有将其挂载到 DOM 上。这意味着在beforeMount钩子中对 DOM 的直接操作是不会生效的。
数据更新：组件的响应式状态已经准备就绪，但是在这个阶段，还没有进行初始的 DOM 更新。

(4) mounted

在组件实例被挂载到 DOM 后触发

(5) beforeUpdate

在数据更新但是 DOM尚未重新渲染时被调用。

beforeUpdate钩子函数在组件数据更新之后、虚拟 DOM 重新渲染之前被调用。这时候，数据已经更新，但是DOM尚未重新渲染。

可以用来在 Vue 更新 DOM 之前访问 DOM 状态

可访问 该组件中在 更新之前的DOM元素；
不能访问 该组件中在 更新之后的DOM元素。

(6) updated

在数据更新并且 DOM重新渲染之后被调用。

updated钩子函数在组件的数据更新后，同时虚拟 DOM 重新渲染并应用更新后被调用。这时候，组件的状态已经更新，并且DOM也已经更新完毕。

不能访问 该组件中在 更新之前的DOM元素；
可以访问 该组件中在 更新之后的DOM元素。

如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。

10 分钟了解 nextTick ，并实现简易版的 nextTick

细说vue中的nextTick

(7) beforeUnmount

在一个组件实例被卸载之前调用。

beforeUnmount钩子函数在组件实例即将被卸载销毁之前被调用。这时候，组件实例仍然完全可用。

可访问：

组件实例东西【数据源、函数、计算属性】；
组件试图中的DOM元素。

(8) unmounted

在一个组件实例被卸载之后调用。

unmounted钩子函数在组件实例完全卸载之后被调用。这时候，组件实例已经被销毁，不再存在于DOM中。

可访问：
- 组件实例东西【数据源、函数、计算属性】；
不能访问：
- 组件试图中的DOM元素；
- 一般在这个生命周期函数里，我们可以手动清理一些副作用，例如计时器、DOM事件监听器或者与服务器的连接。

3.组合式api 生命周期

Vue3全家桶 - Vue3 - 【7】生命周期

4. vue3 和 vue2 的生命周期的区别

5. 父子组件生命周期执行顺序

created 先父再子

mounted 先子再父

beforeUpdate 先父再子

updated 先子再父

(六) 侦听器

1.基本用法

2.侦听数据源类型

Vue3全家桶 - Vue3 - 【4】侦听器 - 掘金 (juejin.cn)

Vue3-侦听器-watch和watchEffect的使用 - 掘金 (juejin.cn)

(七) 模板引用

Vue3全家桶 - Vue3 - 【8】模板引用【ref】（访问模板引用 + v-for中的模板引用 + 组件上的ref） - 掘金 (juejin.cn)

1.访问模板引用、函数模板引用

2. `v-for` 中的模板引用

3. 组件上的 ref

(八) 组件基础

(九) 透传 Attributes

(十) 插槽

(十一) 依赖注入 `provide、inject`

(十二) 异步组件

如何优雅地使用Vue3的异步组件 - 掘金 (juejin.cn)

(十三) 传值

1. 传递 props

props，父传子

a. 父组件在引入的子组件上v-bind绑定一个变量 or 静态传值，值为要传递的参数。

b. 子组件用defineProps来接收传过来的变量。

2. emits

emits，子传父

a. 子组件通过defineEmits注册一个事件，并在点击事件中将这个事件携带要传递的参数发散出去。

b. 父组件在引入的子组件上绑定这个事件，这个事件的参数就是传递过来的值。

3. `$attrs`

(1 -vue2) vue2 的 $attrs

vue2和vue3中 $attrs的对比通过透传的attribute，了解vue2和vue3中$ attrs的不同，以及vu - 掘金

2 -vue3 以前在在vue2里面中除了$attrs，还有$listeners；但vue3直接把$listeners合并到 $attrs 里面了。

Vue3 - $attrs 的几种用法（1个或多个根元素、Options API 和 Composition API） - 掘金

4. v-model 子传父

a. 子组件通过defineEmits注册一个属性，并在点击事件中将这个属性携带要传递的参数发散出去。

b. 父组件在引入的子组件上用v-model绑定这个属性，值为传递过来的值。

5. v-model扩展：`defineModel()`

defineModel()宏的简单说明：父子组件的数据双向绑定，不用emit和props的繁重代码，它可以简化父子组件之间的双向绑定。

版本要求：必须要3.4+

一文搞懂 Vue3 defineModel 双向绑定：告别繁琐代码！随着vue3.4版本的发布，defineModel也 - 掘金

(1) 3.4 版本以前 v-model 传值

v-model只是一个语法糖，实际就是给组件定义了modelValue属性和监听update:modelValue事件，所以我们以前要实现数据双向绑定需要给子组件定义一个modelValue属性，并且在子组件内要更新modelValue值时需要emit出去一个update:modelValue事件，将新的值作为第二个字段传出去。

(2) 3.4 版本用`defineModel`实现数据双向绑定

将defineModel的返回值使用v-model绑定到input输入框上面，无需定义 modelValue 属性和监听 update:modelValue 事件，代码更加简洁。defineModel的返回值是一个ref，我们可以在子组件中修改model变量的值，并且父组件中的inputValue变量的值也会同步更新，这样就可以实现双向绑定。

从vue2开始就变成了单向数据流。这里修改子组件的值后，父组件的变量值也被修改了，那这不就变回了vue1的双向数据流了吗？其实并不是这样的，这里还是 单向数据流。

6. refs 子传父

a. 子组件通过defineExpose将要传递的值暴露出去。

b. 父组件在引入的子组件上用ref获取子组件的dom结构，dom结构有值的时候读取传递的值。

7. provide、inject用于`父组件`给`子孙组件`

a. 父组件通过provide将要传递的值提供出去（provide提供的一定是额外的引用类型数据）。

b. 子孙组件通过inject注入传递过来的值。

8. eventBus 全局事件总线 (任意组件通信)

Vue3.0中官方已经移除了对全局事件总线的支持，在 Vue3 Composition API 中$on、$off和$once实例方法已经被移除，组件实例不再实现事件触发接口，导致EventBus无法使用。

用 mitt.js 插件来进行替代 EventBus，eventBus(mitt)用于父子、子父、兄弟传值。

1.yarn 引入

yarn add mitt

2、在main.js文件进行全局挂载，然后在任何地方都可以使用, $bus是自定义属性名

3、使用

（正常版本）：由于是挂载到全局属性上，在setup语法里不能通过this.$bus的方式去访问，需要使用getCurrentInstance获取当前实例。

import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()

instance?.appContext.config.globalProperties.$bus.emit('emitName', 'sendValue')

（简写版本）：如果每次使用都需要写这么多就很麻烦，使用 Hook 来封装代码，将事件总线的逻辑封装成一个可复用的函数，这样每次使用时就不需要重复写那么多的代码。

4、父传子为例

a. 全局引入mitt并声明vue全局的变量$emitter

b. 父组件通过在点击事件中调用emit方法将要传递的值发布出去。

c. 子组件通过on方法的回调函数的参数得到传递过来的值。

5、兄弟之间传值为例

9.

10.

11.

12.

三、AJAX

(一) ajax -原生

1. Ajax 的基本用法 -1

Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠XMLHttpRequest（是一个构造函数）。

ajax是一种异步通信的方法,从服务端获取数据,达到局部刷新页面的效果。

过程:

但创建 xMLHttpRequest 对象
调用 open 方法传入三个参数请求方式(GET/POST)、ur1、同步异步(true/false);
监听 onreadystatechange 事件，当readystate 等于4时返回 responserext。

- 第一步：创建xhr对象

const xhr = new XMLHttpRequest()

- 第二步：准备发送请求

open( a, b, c ) :

参数 a ：HTTP方法GET 、POST 、PUT 、DELETE；

参数 b ：地址URL；

参数 c : true表示异步，false表示同步，但这里一般是写异步。

调用open并不会真正发送请求，而只是做好发送请求前的准备工作。

xhr.oppen("GET","test1.txt",true)

- 第三步：send() 发送请求

调用 send()正式发送请求

send()的参数是通过请求体携带数据

a. 如果在第二步open里用GET方法，则send的参数要写上null或者留空：xhr.send(null) 或 xhr.send();

这里不需要携带请求体数据，因此 send() 可以传 null 或者留空。

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'http://example.com/api?name=John&age=30', true); 
xhr.send(null); // 或者 xhr.send() 也可以

b. 对于 POST 请求，通常需要发送数据（如表单数据、JSON 数据等）。因此，在调用 xhr.send() 时，传入的数据将作为请求体的一部分发送给服务器。

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/api', true);

// 设置请求头，告诉服务器我们发送的是 JSON 数据
xhr.setRequestHeader('Content-Type', 'application/json');

// 发送请求体数据
var data = JSON.stringify({ name: "John", age: 30 });
xhr.send(data);

- 第四步：监听事件，处理响应

当获取到响应后，会触发xhr对象的 readystatechange 事件，可以在该事件中对响应进行处理。

( a. ) readystatechange 事件监听 readyState这个状态的变化：

readyState：它的值从0 ~4，一共5个状态：

0：末初始化。尚未调用 open();

1：启动。已经调用 open() ，但尚未调用 send();

2：发送。已经调用 send()，但尚未收到响应；

3：接收。已经收到部分响应数据；

4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用。

xhr.onreadystatechange = () =>{   
     if(xhr.readyState !==4 ) return   
     //http code   
     //获取到响应后，响应的内容会自动填充xhr对象的属性   
     //xhr.status: HTTP 200 404   
     //xrh.responseText: HTTP 状态说明 OK Not Found   
     if(xhr.status >=200 && xhr.status<300 || xhr.status === 304 ){     console.log(xhr.responseText)   
     }
 }

( b. ) HTTP 状态码

200：请求成功, 服务器成功处理了请求，并且响应的内容是有效的。。
301：资源永久移动, 请求的资源已永久移动到新的 URL，客户端应使用新的 URL 发送后续请求。
400：请求无效，可能是由于客户端发送了不正确的请求（例如缺少必要参数）。
404：资源未找到, 服务器未能找到请求的资源。通常发生在访问了一个不存在的 URL 或页面时。
403：服务器拒绝访问，通常是权限问题，客户端没有权限访问请求的资源。
500：服务器发生错误，无法处理请求。通常是服务器端的问题。
1xx - 信息性状态码
2xx - 成功状态码
3xx - 重定向状态码
4xx - 客户端错误状态码
5xx - 服务器错误状态码

readystatechange 事件也可以配合 addEventListener 使用，但要注意，IE6~8不支持addEventListener

xhr.addEventListener('readystatechange',()=>{},false)

为了兼容性，readystatechange 中不使用this，而是之间使用xhr。 xhr.readyState !==4

由于兼容性问题，最好放在open()之前。

//由于兼容性问题，最好放在open()之前 
const xhr = new XMLHttpRequest() //第一步 

xhr.onreadystatechange = () =>{ //第四步   
    if(xhr.readyState !==4 ) return   
    if(xhr.status >=200 && xhr.status<300 || xhr.status === 304 ){     console.log(xhr.responseText)   
    } 
} 

xhr.oppen("GET","test1.txt",true) //第二步 

xhr.send() //第三步

(a.) xhr.onreadystatechange

xhr.onreadystatechange 是当 XMLHttpRequest 对象的 readyState 属性发生变化时触发的事件。

(b.) xhr.onload

xhr.onload 是在请求成功并且响应已经完全加载时触发的事件。该事件在请求完成后触发，无论是成功还是失败。
适用于简单的情况，当你只关心请求成功并且响应已经完全加载时。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com', true);

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('请求成功', xhr.responseText);
  } else {
    console.log('请求失败', xhr.status);
  }
};

xhr.send();

(c.) 区别总结：

xhr.onload 只关注请求是否完成且成功（即 readyState 为 4 且 status 为 200），适用于简单的请求处理。
xhr.onreadystatechange 更灵活，可以监听请求的每个状态变化，适用于更复杂的场景，特别是你需要对不同阶段的请求做出响应时。

2. Ajax 的基本用法 -2

//由于兼容性问题，最好放在open()之前 
const url = 'https://www.imooc.com/api/http/search/suggest?words=js' 
const xhr = new XMLHttpRequest() 
xhr.onreadystatechange = () =>{ 
    if(xhr.readyState !==4 ) return   
    if(xhr.status >=200 && xhr.status<300 || xhr.status === 304 ){ 
        console.log(xhr.responseText) // {"code":200,"data":[{"word":"jsp"},{"word":"js"},{"word":"json"},{"word":"js \u5165\u95e8"},{"word":"jstl"}]} 
        console.log(typeof xhr.responseText) // string   
    } 
} 
xhr.open("GET",url,true) 
xhr.send(null)

( 1 ) GET 请求

（a.）携带数据：

GET请求不能通过请求个体携带数据，但可以通过请求头携带。

const url = 'www.imooc.com/api/http/se…'

const url = 'https://www.imooc.com/api/http/search/suggest?words=js&username=alex&age=18' 
const xhr = new XMLHttpRequest() 
xhr.onreadystatechange = () =>{   
    if(xhr.readyState !==4 ) return   
    if(xhr.status >=200 && xhr.status<300 || xhr.status === 304 ){ 
        console.log(xhr.responseText)     
        console.log(typeof xhr.responseText)   
    } 
} 
xhr.open("GET",url,true) 
xhr.send(null)

（b.）数据编码

如果携带的数据是非英文字母的化，比如汉字，就需要编码之后再发送给后端，不然会造成乱码问题。

可以使用 encodeURIComponent() 编码。

const url = https://www.imooc.com/api/http/search/suggest? words=js&username=${encodeURIComponent('前端')}

const url = `https://www.imooc.com/api/http/search/suggest?words=js&username=${encodeURIComponent('前端')}` 

const xhr = new XMLHttpRequest() 
xhr.onreadystatechange = () =>{   
    if(xhr.readyState !==4 ) return   
    if(xhr.status >=200 && xhr.status<300 || xhr.status === 304 ){ 
        console.log(xhr.responseText)    
        console.log(typeof xhr.responseText)   
    }
} 
xhr.open("GET",url,true) 
xhr.send(null)

( 2 ) POST 请求

(a.) 携带数据：

POST请求主要通过请求体携带数据，同时也可以通过请求头携带

const url = 'https://www.imooc.com/api/http/search/suggest?words=js' 
const xhr = new XMLHttpRequest() 
xhr.onreadystatechange = () =>{   
    if(xhr.readyState !==4 ) return   
    if(xhr.status >=200 && xhr.status<300 || xhr.status === 304 ){     
        console.log(xhr.responseText)     
        console.log(typeof xhr.responseText)   
    }
}
xhr.open("POST",url,true) 
xhr.send('username')

如果向发送数据，直接写在 send()的参数位置，一般时字符串:

xhr.send('username')

xhr.send('username=alex&age=18') //但这种数据传给后端，需要提前告诉后端

不能直接传递对象，需要先将对象转成字符串的形式:

xhr.send({

      username:'ald',

      age:18

}) // 这种传输不对，下面章节会将解决办法

(b.）数据编码