GY2077-优快云博客

原创 Vuex和Pinia 的区别是什么

1. 架构设计：Vuex是Vue.js官方提供的状态管理库，而Pinia是由Vue作者维护的另一个状态管理库。Vuex采用了集中式的架构，将所有的状态存储在一个单一的全局状态树中，通过mutations和actions来修改和处理状态。而如果你更喜欢较简单的状态管理方案，并且对TypeScript有较高的要求，那么Pinia可能是一个更合适的选择。2. 体积和复杂性：由于Vuex是Vue.js的官方状态管理库，它在Vue.js项目中广泛使用，并拥有庞大的生态系统。

2023-07-18 21:55:45 5583

原创让你快速入门Promise

简答 : Promise 是异步编程的一种解决方案，它是一个对象，可以获取异步操作的消息，他的出现大大改善了异步编程的困境，避免了回调地狱，它比传统的解决方案回调函数和事件更合理和更强大。但其实Promise其实并没有完全解决回调地狱, 它只是让回调地狱变得可控, 真正解决回调地狱的是es8出来的async , await .

2023-07-18 21:49:29 190 1

原创原型和原型链和继承

原型链的工作原理：如果一个对象没有定义某个属性或方法，JavaScript引擎会在它的原型上继续查找，直到找到该属性或方法或到达原型链的顶端。原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针。当访问一个对象的属性或方法时，如果对象本身没有定义该属性或方法，JavaScript会沿着原型链向上查找，直到找到该属性或方法或到达原型链的顶端（即。

2023-07-18 21:34:02 174 1

原创 Vue2和Vue3的响应式原理

Vue2中的响应式系统有一些限制，例如无法监听新增属性和数组索引的变化。另外，Vue3还引入了一些新的特性，例如Composition API（组合式API），它提供了一种新的组织和复用代码的方式。Vue3还通过模块化的方式对内部代码进行了重构，使得整个库的体积更小，加载速度更快。而在Vue3中，Vue采用了一种新的响应式系统，称为基于Proxy的响应式。Vue2使用基于Object.defineProperty的劫持机制，而Vue3采用基于Proxy的响应式系统。它们在响应式原理上有一些区别。

2023-07-18 11:59:35 230 1

原创三次握手四次挥手

通过三次握手建立连接，确保客户端和服务器双方都同意建立连接。- 第三次握手：客户端收到服务器的确认报文后，向服务器发送确认报文（ACK），表示连接已建立。- 第二次握手：服务器收到客户端的连接请求报文后，向客户端发送确认报文（SYN + ACK），确认连接请求，并设置服务器的初始序列号。- 第四次挥手：客户端收到服务器的释放连接请求后，发送一个确认报文（ACK）给服务器，确认收到释放请求。- 第二次挥手：服务器收到客户端的释放连接请求后，向客户端发送一个确认报文（ACK）作为响应，表示收到释放请求。

2023-07-16 23:04:17 78 1

原创插槽的应用

slot。

2023-07-16 20:02:07 95 1

原创跨域的相关理解

这样，浏览器在发起跨域请求时会先发送一个预检请求（OPTIONS 请求），如果服务器返回正确的 CORS 头部，浏览器将允许跨域请求访问资源。5. 使用跨域资源的代理接口：如果目标资源的服务器不支持 CORS 或 JSONP，可以在同源服务器上创建一个代理接口，将跨域请求发送到代理接口，再由代理接口转发到目标服务器并将响应返回给前端。跨域资源共享（CORS）：如果目标资源的服务器在响应中明确允许来自其他域的请求访问资源，浏览器将允许跨域访问。的请求，该请求将与页面的域名相同，不会触发跨域限制。

2023-07-16 15:43:23 112 1

原创三分钟掌握自定义指令的应用

全局注册主要是通过方法进行注册第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数// 注册一个全局自定义指令 `v-focus`// 当被绑定的元素插入到 DOM 中时……// 聚焦元素el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能},})局部注册通过在组件options选项中设置directive属性focus: {// 指令的定义el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能。

2023-07-15 16:25:55 125 1

原创速通Vue2和Vue3的区别

性能更高了，主要得益于响应式的原理换成了 proxy，VNode diff 的算法进行了优化。体积更小了，删除了一些没必要或不常用到的 API，例如 filter、EventBus 等；按需导入，能配合 Webpack 支持 Tree Shaking。对 TS 支持更好啦，因为它本身源码就是用 TS 重写的。Composition API（组合 API），相比较 Vue2 的 options api，对于开发大型项目更利于代码的复用和维护。

2023-07-14 21:14:01 92 1

原创 vue组件间通信的多种方式

data() {return {msg: '启动'</script>-- 子组件 child.vue --><template><div>{{ msg }}</div><script>props: {</script>-- 父组件 --><template></div><script>data() {return {},methods:{

2023-07-14 20:13:22 121 1

原创页面跳转传值query 和 params 的区别

1: query需要path来引入,params要用name来引入2. 接受参数时,分别是this.$route.query.name和this.$router.params.name。

2023-07-14 09:10:46 343 1

原创 $nextTick

1 :比如说,在vue项目开发中,我们常常需要在creadted()钩子函数中进行dom操作,因为creadted()钩子函数中,页面的dom还没有开始渲染,就会操作dom失败, 此时就必须做一个延迟执行,要放到nextTick() 的回调函数中执行.当页面的dom还未开始渲染时,此时无法操作dom,如果想要操作dom就得要使用nextTick来获取更新后的dom.首先$nextTick** 是vue官方提供的一个API方法,是用于下次DOM更新循环结束后执行延迟回调.

2023-07-13 17:07:21 116 1

原创快速了解v-if和v-show的区别

是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染。切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；的作用效果是相同的(不含 v-else)，都能控制元素在页面是否可见。显示隐藏是将元素整个添加或删除。只是简单的基于 css 切换。的时候不会触发组件的生命周期。有更高的初始渲染消耗；隐藏则是为该元素添加。

2023-07-13 16:52:52 102 1

原创你知道在Vue中, v-model和.sync的区别吗 ?

的一种内置的API指令，数据的双向绑定常用于用于表单验证,本质是一种语法糖写法。v-model 帮我们做的事就是，为 input 的 value 值设置一个动态绑定，然后在输入框的 input 事件触发后实时修改动态绑定的 value 的变量值。是在父子组件传值的，且子组件要修改这个数据的时候使用。它的原理是利用EventBus，子组件触发事件，父组件响应事件并实现数据的更新，避免由子组件直接修改父组件传过来的内容。首先我们知道,v-model 是。

2023-07-13 16:44:16 176 1

原创写一个函数判断变量的数据类型

然后通过调用 .replace("[object ", "") 和 .replace("]", "") 方法，将原始类型字符串中的 "[object " 和 "]" 替换为空字符串，从而得到纯粹的类型名称。如果传入的参数不是 null，则进入下一个条件判断 typeof obj === "object"，检查变量 obj 是否为对象类型。如果是对象类型，则执行以下代码块。如果传入的参数既不是 null 也不是对象类型，则执行 else 代码块，并通过 typeof obj 将其类型直接打印到控制台。

2023-07-11 18:11:36 82

原创使用mixin来做代码复用

Mixin允许我们将重复的逻辑抽离出来，封装成一个Mixin，然后在需要的组件中混入这个Mixin。通过观察上面两个组件，发现两者的逻辑是相同，代码控制显示也是相同的，这时候。对象，它可以包含我们组件中任意功能选项，如。对象的选项都将被混入该组件本身的选项中来,我们只要将共用的功能以对象的方式传入。mixin 本质其实就是一个。两个组件在使用上，只需要引入。首先抽出共同代码，编写一个。

2023-07-11 18:00:59 155

原创三分钟快速了解Ts字面量和联合类型的使用

通过使用字面量类型，可以在类型系统中明确指定变量的取值范围，从而提高代码的可读性和类型安全性。字面量类型通常与联合类型结合使用，以创建更具体的类型约束。在TypeScript中，字面量类型允许我们指定一个变量只能是特定的字面量值。这在某些场景下非常有用，可以增强代码的可读性和类型安全性。，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种。概念：将多个类型合并为一个类型对变量进行注解。（竖线）在 TS 中叫做。

2023-07-11 17:38:39 286

原创快速掌握interface和type的区别

接口可以继承接口，接口之间和抽象类之间的继承都是单向单继承，但是实现接口的子类可以实现多个接口。概念：在TS中对于对象数据的类型注解，除了使用interface之外还可以使用类型别名来进行注解。作用: 用interface来描述对象数据的类型(常用作给对象的属性和方法添加类型约束)为了解决在函数传参的时候，某些参数可以不用传递，我们就需要可选参数了。简单来说，对于类、抽象类、接口继承只能单继承，但接口却可以多实现。类型别名配合交叉类型（&）可以模拟继承，同样可以实现类型复用。好处: 简化和复用类型。

2023-07-11 17:12:40 118

GY2077的博客