BlogMind

一、组件间通信的概念开始之前，我们把组件间通信这个词进行拆分 组件 通信 都知道组件是vue最强大的功能之一，vue中每一个.vue我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上，任何信息的交通都是通信组件间通信即指组件(.vue)通过某种方式来传递信息以达到某个目的举个栗子我们在使用UI框架中的table组件，可能会往table组件中传入某些数据，这个本质就形成了组件之间的通信 二、组件间通信解决了什么在古代，人们通过驿站、飞鸽传书、烽火报警、符号、语言、眼神、触碰等方式进行信息传递，到了今天，随着科技水平的飞速发展，通信基本完全利用有线或无线电完成，相继出现了有线电话、固定电话、无线电话、手机、互联网甚至视频电话等各种通信方式从上面这段话，我们可以看到通信的本质是信息同步，共享回到vue中，每个组件之间的都有独自的作用域，组件间的数据是无法共享的但实际开发工作中我们常常需要让组件之间共享数据，这也是组件通信的目的要让它们互相之间能进行通讯，这样才能构成一个有机的完整系统 二、组件间通信的分类组件间通信的分类可以分成以下 ...

一、axios是什么axios 是一个轻量的 HTTP客户端 基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选 特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御XSRF 基本使用安装 1234// 项目中安装npm install axios --S// cdn 引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 导入 1import axios from 'axios' 发送请求 1234567891011axios({ ...

一、Object.defineProperty定义：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象 为什么能实现响应式通过defineProperty 两个属性，get及set get 属性的 getter 函数，当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值 set 属性的 setter 函数，当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。默认为 undefined 下面通过代码展示： 定义一个响应式函数defineReactive 123456789101112131415161718function update() { app.innerText = obj.foo}function defineReactive(obj, key, val) { Object.def ...

一、编译阶段回顾Vue2，我们知道每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把用到的数据property记录为依赖，当依赖发生改变，触发setter，则会通知watcher，从而使关联的组件重新渲染 试想一下，一个组件结构如下图 12345678910<template> <div id="content"> <p class="text">静态文本</p> <p class="text">静态文本</p> <p class="text">{{ message }}</p> <p class="text">静态文本</p> ... <p class="text">静态文本< ...

一、是什么Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫 Dead code elimination 简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码 如果把代码打包比作制作蛋糕，传统的方式是把鸡蛋（带壳）全部丢进去搅拌，然后放入烤箱，最后把（没有用的）蛋壳全部挑选并剔除出去 而treeshaking则是一开始就把有用的蛋白蛋黄（import）放入搅拌，最后直接作出蛋糕 也就是说 ，tree shaking 其实是找出使用的代码 在Vue2中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到 123import Vue from 'vue' Vue.nextTick(() => {}) 而Vue3源码引入tree shaking特性，将全局 API 进行分块。如果您不使用其某些功能，它们将不会包含在您的基础包中 123import { nextTick, observable &# ...

一、Vue3介绍关于vue3的重构背景，尤大是这样说的： 「Vue 新版本的理念成型于 2018 年末，当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，但在这段时期，前端世界已经今昔非比了 在我们更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平；其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题」 简要就是： 利用新的语言特性(es6) 解决架构问题 哪些变化 从上图中，我们可以概览Vue3的新特性，如下： 速度更快 体积减少 更易维护 更接近原生 更易使用 速度更快vue3相比vue2 重写了虚拟Dom实现 编译模板的优化 更高效的组件初始化 undate性能提高1.3~2倍 SSR速度提高了2~3倍 体积更小通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的 能够tree-shaking，有两大好处： 对开发人员，能够对vue实现更多其他的功能，而不必担忧整体体积过大 对使用者，打包出来的包 ...

一、跨域是什么跨域本质是浏览器基于同源策略的一种安全手段 同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能 所谓同源（即指在同一个域）具有以下三个相同点 协议相同（protocol） 主机相同（host） 端口相同（port） 反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域 一定要注意跨域是浏览器的限制，你用抓包工具抓取接口数据，是可以看到接口已经把数据返回回来了，只是浏览器的限制，你获取不到数据。用postman请求接口能够请求到数据。这些再次印证了跨域是浏览器的限制。 二、如何解决解决跨域的方法有很多，下面列举了三种： JSONP CORS Proxy 而在vue项目中，我们主要针对CORS或Proxy这两种方案进行展开 CORSCORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应 CORS 实现起来非常方便，只需要增加一些 HTTP ...

一、直接添加属性的问题我们从一个例子开始 定义一个p标签，通过v-for指令进行遍历 然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也 新增一行 1234<p v-for="(value,key) in item" :key="key"> {{ value }}</p><button @click="addProperty">动态添加新属性</button> 实例化一个vue实例，定义data属性和methods方法 1234567891011121314const app = new Vue({ el:"#app", data:()=>{ item:{ oldProperty:"旧属性" } }, methods:{ ...

对WebSocket的理解？应用场景？ 一、是什么WebSocket，是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅 客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输 从上图可见，websocket服务器与客户端通过握手连接，连接成功后，两者都能主动的向对方发送或接受数据 而在websocket出现之前，开发实时web应用的方式为轮询 不停地向服务器发送 HTTP 请求，问有没有数据，有数据的话服务器就用响应报文回应。如果轮询的频率比较高，那么就可以近似地实现“实时通信”的效果 轮询的缺点也很明显，反复发送无效查询请求耗费了大量的带宽和 CPU 资源 二、特点全双工通信允许数据在两个方向上同时传输，它在能力上相当于两个单工通信方式的结合 例如指 A→B 的同时 B→A ，是瞬时同步的 二进制帧采用了二进制帧结构，语法、语义与 HTTP 完全不兼容，相比http/2，WebSocket 更侧重于“实时通信”，而HTTP/2 更侧重于提高传输效率，所以两者的帧结构也有很大的 ...

如何理解UDP 和 TCP? 区别? 应用场景? 一、UDPUDP（User Datagram Protocol），用户数据包协议，是一个简单的面向数据报的通信协议，即对应用层交下来的报文，不合并，不拆分，只是在其上面加上首部后就交给了下面的网络层 也就是说无论应用层交给UDP多长的报文，它统统发送，一次发送一个报文 而对接收方，接到后直接去除首部，交给上面的应用层就完成任务 UDP报头包括4个字段，每个字段占用2个字节（即16个二进制位），标题短，开销小 特点如下： UDP 不提供复杂的控制机制，利用 IP 提供面向无连接的通信服务 传输途中出现丢包，UDP 也不负责重发 当包的到达顺序出现乱序时，UDP没有纠正的功能。 并且它是将应用程序发来的数据在收到的那一刻，立即按照原样发送到网络上的一种机制。即使是出现网络拥堵的情况，UDP 也无法进行流量控制等避免网络拥塞行为 二、TCPTCP（Transmission Control Protocol），传输控制协议，是一种可靠、面向字节流的通信协议，把上面应用层交下来的数据看成无结构的字节流来发送 可以想象成流水形式的，发送方 ...