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:获取当前组件里所有子组件对象组成的数组,但是先后顺序不确定,若是要通过下标操作孩子,没有方法,如果是所有孩子都干同样的事情,可以遍历做到