vue数据代理
1、使用Object.defineProperty在vm身上添加与data对象中属性的同名属性；
2、当通过vm读取属性时，会调用getter函数，返回data中同名属性；
3、当通过vm修改属性时，会调用setter函数，进而修改data中同名属性
vue数据劫持
1、通过Object.defineProperty对data所有属性修改为响应式，主要是通过Object.defineProperty里getter和setter函数方法实现的；
2、如果用户访问vm身上的属性，会触发其属性上的getter函数方法，就会访问对应的data的同名属性，返回其同名属性值；
3、如果用户修改vm身上的属性，会触发其属性上的setter函数方法，就会修改对应的data的同名属性，返回的也是修改后的其同名属性值；
4、data同名属性上也是有setter函数方法的，把修改后的值给了data的同名属性，同时会通知修改页面上的数据，setter内部共做了3件事：a.修改自己的数据；b.把修改的数据递归为响应式；c.通知页面修改数据
深浅拷贝
深浅拷贝一定是对象数据且对象数据当中的属性也是对象数据，才有深浅拷贝之分。
如果对象数据当中的属性是基本数据类型，就是一般赋值拷贝。
浅拷贝：
当拷贝一个对象后，对象内部的对象数据，地址值是一样的，属于浅拷贝。
深拷贝：
当拷贝一个对象后，对象内部的对象数据，地址值是不一样的，属于深拷贝。
同源策略
浏览器为了安全，有一个同源策略，要求请求协议、ip、端口都必须与文件所在服务器一样，不能跨域请求
三次握手和四次挥手：
三次握手
作用：服务端和客户端相互确定双方收发通讯能力正常
过程：
1、客户端向服务端发送syn字段的连接请求；
2、服务端收到客户端的连接请求后，可以确定客户端的发送能力正常，此时会发送ack字段的应答响应和syn字段同意连接的响应；
3、客户端收到服务端的响应后，确定了服务端的收发能力正常，此时会发送ack字段应答响应；
4、服务端收到客户端的应答响应后，确定了客户端接受正常，就会建立联系，此时可以传输数据了
四次挥手
作用：确认服务端处理完请求断开连接前的所有业务后，再断开连接
过程：
1、客户端向服务端发送Fin字段的断开连接请求；
2、服务端收到断开连接的请求后，发送ack字段的同意断开的响应；
3、服务端处理完业务后，向客户端发送Fin字段的断开连接的响应；
4、客户端收到了断开连接的响应后，应答ack字段，连接断开
Vue通讯高级（共10种通讯方式）
1、props ：应用最广泛的一种vue通讯方式
应用：父传子（非函数数据，本质是父数据传给子） 子传父 （函数数据，本质是父想要子的数据）
使用方法：
非函数数据：子组件标签上添加数据：data=“data(此data为父组件数据)”–>子组件里通过配置对象里的props属性接收，接收方式有3种：
props:[‘data’] props：{data:Array} props:{data:{type:Array,default:100}}
函数数据：子组件标签上添加函数：data=“fn”,fn这个函数定义在父组件里，fn函数传递到子组件后，由子组件事件触发，回调函数可以接受数据，此时父组件函数里就可以接受数据了
路由中props传递参数：3种方式
1、布尔值 把路径中params参数映射为要显示组件内的属性
2、对象 映射的是额外数据
3、函数 映射的也是参数
2、全局事件总线：本质是一个对象
原理：要实现全局事件总线，所有组件都可以访问到数据并修改数据，要满足2个要求：一、所有组件对象都可访问到它；二、这个对象身上必须有 e m i t 和 emit 和 emit和on 方法，这样才能处理数据
首先每个组件对象都是一个实例，它们都能访问到，可以沿着原型链找，vue里面终点是Vue.prototype（没有继续找其原型情况下），所有的实例都可以访问到，所以可以在这个原型对象里面添加一个共同的属性对象，但是这个对象还必须能有 e m i t 和 emit和 emit和on方法，此时vm身上有这2个函数，就可以将这个对象属性指向vm（地址值赋给对象属性），这样所有组件对象就可以访问事件全局总线，也可以访问 e m i t 和 emit和 emit和on方法了
应用：任意组件间通信
使用方法：
1、注册 在main文件里面注册 beforeCreate()=>{Vue.prototype.$bus=this}
2、在需要发送数据的组件里 this. b u s . bus. bus.emit(‘dataName’,data1,data2…)
3、在接受数据的组件里 this. b u s . bus. bus.on(‘dataName’,(data1,data2…)=>{})
vm与组件对象的关系：组件对象原型的原型就是vm的原型
VueComponent.prototype=Object.create(Vue.prototype)
3、Vuex :Vue官方出的第三方管理数据的仓库工具，需要下载插件
应用：任意组件之间
特点：刷新后，所有数据会初始化
核心概念6个：
state:存储多个属性的对象，代表状态（共享状态数据）
mutations:存储多个方法的对象，这些方法主要用来修改state中属性的属性值，直接赋值，不能用异步，for循环和if等
actions:存储多个方法的对象，这些方法主要用来一是与组件建立联系，组件内部需要调用这些方法可以利用dispatch调用，二是方法函数有默认参数context相当于一个小store，里面有一方法commit，可以通过commit方法将通过组件内调用方法函数接受的其他参数，给commit给mutation，这样mutation就可以直接修改state里的数据
这个对象里面可以是异步，一般也是处理异步请求的
getters:存储多个方法的对象，类似于compute，将state中的数据继续取值或计算后，return一个数据值，所有函数方法返回一个值
modules:模块管理对象，一个项目会有多个页面，每个页面可以建立自己的模块数据，在store的主文件里，加入这一属性，将页面模板引入主页面，并运用添加为modules属性，后面要取值时就可以用state.模块名.数据名取值了
namespaced:属性值是布尔值，true为打开空间，打开之后，所有的mutations actions使用的时候，都要添加模块名 …mapState(‘模块名’,[‘数据名’])
使用方法：
1、下载安装
2、引入注册
3、注入
4、使用
4、PubSub发布订阅：react中使用较多的第三方插件的数据管理方式
应用：任意组件之间
使用方法：
1、下载引入
2、哪个组件需要数据 ，订阅消息 PubSub.subscribe(‘dataName’,(‘dataName’,data)=>{})
3、哪个组件传递数据，发布消息 PubSub.publish(‘dataName’,data)
5、自定义事件
应用：子传父
使用方法：
1、给子组件绑定一个自定义事件@changeNum=“changeNum”，这个自定义事件对应的函数属于父组件里方法；
2、在子组件里通过this.$emit(“eventName”,data1,data2…)调用定义在父组件的自定义事件；
3、通过调用定义在父组件里的自定义事件后，该函数可以接收从子组件里传入父组件的值；
4、在子组件里通过this.$off()可以解绑这个自定义事件
6、v-model：可读可写，实现双向数据绑定，等同于props+自定义事件的结合
应用：数据双向绑定，多用在子组件包含表单元素的组件身上
原理：
1、数据在父组件，通过props把数据value传递给子组件
2、子组件接受父组件传递过来的数据value
3、在子组件标签上绑定自定义事件input，这个事件一旦触发，函数逻辑是将传递过来的值赋值给value
4、子组件里给表单元素绑定input原生DOM事件，一旦触发该事件，就通过$emit调用父组件里的自定义事件函数，并传递最新的value值给父组件
5、父组件一旦将最新的值赋值给value成功，就可以通过props将最新value传递给子组件
//父组件里
<Input :value='msg' @input='msg=$event' />
//子组件里
<input type='text' :value="value" @input="$emit('input',$event.target.value)" />
//直接用v-model写法
//父组件里
<Input v-model='msg' />
7、.sync属性修饰符：父子数据双向绑定
应用：父子数据双向绑定，原理同v-model相同，但是内部不要求用表单类元素
//父组件里
<Child :money="money" @update:money='money=$event'></Child>
//子组件里：要接收money
<button @click="$emit('update:money',money-100)"></button>
//直接用.sync
//父组件里
<Child :money.sync='money'></Child>
8、作用域插槽
应用：父传子
使用方法：
1、数据在父组件里定义或初始化
2、数据要传递给子组件去展示使用
3、子组件展示过程中，数据结构由父组件决定
//父组件里
<List :data='todos'>
//slotProps是通过slot传递过来的数据组成的对象，可直接结构{todo}
//默认插槽，这里接受数据可以简写为v-slot=''
<template v-slot:default='slotProps'>
//这里面要放传递给子组件的结构，占据slot位置
</template>
</List>
//子组件里：props接受data数据
<ul>
//插巢部分，由父组件里面传递决定
//这里用的是默认插槽
<slot :todo='data'></slot>
</ul>
9、 a t t r s 和 attrs和 attrs和listeners ：二次封装组件用的较多
应用：父组件传递数据给子组件属性和事件
原理：每个组件对象上都有 a t t r s 和 attrs和 attrs和listeners属性
$attrs：一个对象，里面包含父组件给子组件传递的数据和数据名组成的键值对，不包含组件对象通过props接收过的属性，以及和样式相关的属性数据style和class
$listeners:一个对象，里面包含父组件给子组件传递事件及对应事件函数组成的键值对
使用方法：
//父组件里
<HintButton name="添加属性" icon="el-icon-plus"></HintButton>
//子组件里:props里面将name数据接收了
<a title="name">
<el-button $attrs $listeners></el-button>
</a>
10、 p a r e n t 、 parent、 parent、children和$refs
this. r e f s : 给组件标签上添加定义 r e f ，可以通过 t h i s . refs :给组件标签上添加定义ref，可以通过this. refs:给组件标签上添加定义ref，可以通过this.refs.定义的ref值获取这个组件对象
this.$parent:获取当前组件的父组件对象，但是很可能有多个父组件对象
this.$children：获取当前组件里所有子组件对象组成的数组，但是先后顺序不确定，若是要通过下标操作孩子，没有方法，如果是所有孩子都干同样的事情，可以遍历做到