组件通信默写

左手的ㄟ右手 2022-12-29 14:26 103阅读 0赞

1.组件通信

> 组件通信分为3种：**子传父 父传子 兄弟传兄弟**  
> **1.父传子：**  
> 父组件中的子组件自定义定义一个属性，把要传输的数据挂载上去，子组件通过props接受数据  
> **2.子传父**  
> 子组件用this.$emit(“事件名”,要传输的数据)，然后子组件通过定义一个刚刚的同名事件，然后在methods中用形参接受数据
> 
> 3.**兄弟传兄弟**  
> 首先在src中定义一个空实例组件命名为Bus,js  
> 然后在要传输数据一方通过Bus. e m i t ( “ 事 件 名 ” , 参 数 ) 要 接 收 数 据 的 一 方 通 过 B u s . emit(“事件名”,参数) 要接收数据的一方通过Bus. emit(“事件名”,参数)要接收数据的一方通过Bus.on(“事件名”,(data)=>\{  
> //data是传递过来的参数\})

2.自定义指令

> Vue.redirect(“名”,)

3.Vue中双向数据绑定是如何实现

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

第一步： 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter  
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步： Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:  
1、在自身实例化时往属性订阅器(dep)里面添加自己  
2、自身必须有一个update()方法  
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步： MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

Object.defineProperty(obj, prop, descriptor)

参数：

obj： 必需。目标对象；  
prop： 必需。需定义或修改的属性的名字；  
descriptor： 必需。目标属性所拥有的特性；

4.简述虚拟DOM和diff算法  
虚拟dom是利用js描述元素与元素的关系。  
好处：是可以快速的渲染和高效的更新元素，提高浏览器的性能  
diff算法  
优点：最终表现在DOM上的修改只是部分的变更，可以保证高效的渲染，提高网页的性能  
缺点：首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHtml慢一点  
keep-alive是vue提供给我们的一个组件，用来在路由切换的时候保存我们的组件状态  
当我们在切换路由需要保存失活组件的状态的时候需要用到,比如我浏览淘宝滑动的中间位置，然后又去购物车页面，再回到首页的时候能够保存住我刚才滑动的位置  
5.keep-alive是什么  
keep-alive是Vue提供给我们一个内置组件，他可以用来保存我们路由切换时组件的状态

1.  全局保存在App.vue中 把routerView保存起来  
    
2.  部分缓存  
    1、router.js中设置要缓存的页面  
    \{  
    path: ‘/child1’,  
    name: ‘Child1’,  
    component: Child1,  
    meta:\{  
    keepAlive:true  
    \}  
    \}  
    \},  
    2、用v-if来显示router-view是否在keep-alive中出现  
      
      
      
      
    6.生命周期共有几个？分别在什么时候使用？  
    1.创建 beforeCreate() 在执行这个钩子的时候 只有一些实例本身的事件和生命周期函数 用户自定义不能使用 created() 最早开始使用 data和methods中数据的钩子  
    2.挂载 beforeMount() 指令已经解析完毕 内存中已经生成dom数 mounted()dom已经渲染完毕 页面和内存的数据已经同步  
    3.更新 beforeUpdate() 当data的数据发生改变会执行这个钩子 内存中数据是新的 页面是旧的 updated() 内存和页面都是新的  
    4.销毁 beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作 destroyed()已经销毁完毕  
    activated(组件激活时)：和上面的beforeDestroy和destroyed用法差不多，但是如果我们需要一个实例，在销毁后再次出现的话，用 beforeDestroy和destroyed的话，就太浪费性能了。实例被激活时使用，用于重复激活一个实例的时候  
    deactivated(组件未激活时)：实例没有被激活时。  
    errorCaptured(错误调用)：当捕获一个来自后代组件的错误时被调用  
    7.路由守卫  
    路由钩子函数有三种分别为 全局守卫 单个路由守卫 组件内部守卫

全局守卫钩子 beforeEach  
单个路由守卫 beforeEnter  
组件内部守卫 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

to 对象 去哪儿 from 对象 从哪来 next 函数 next()next(true) 继续执行 不写nextnext(false)终止执行 next(path)跳转  
8.vuex是什么  
state 存储数据 在组件中的使用 this. s t o r e . s t a t e . 属 性 名 m u t a t i o n s 直 接 操 作 s t a t e 中 的 数 据 在 组 件 中 的 使 用 t h i s . store.state.属性名 mutations 直接操作state中的数据 在组件中的使用 this. store.state.属性名mutations直接操作state中的数据在组件中的使用this.store.commit(“方法名”,参数)  
actions 可以实现异步操作 在actions中操作mutations中的数据 在组件使用 this. s t o r e . d i s p a t c h ( " 方 法 名 " ， 参 数 ) g e t t e r s 类 似 于 计 算 属 性 可 以 对 s t a t e 中 数 据 进 行 逻 辑 计 算 在 组 件 中 t h i s . store.dispatch("方法名"，参数) getters 类似于计算属性可以对state中数据进行逻辑计算 在组件中 this. store.dispatch("方法名"，参数)getters类似于计算属性可以对state中数据进行逻辑计算在组件中this.store.getters.方法名  
modules 将state分模块  
9.闭包  
函数嵌套函数 当内部函数访问外部函数变量时 就产生了闭包

内部函数可以直接访问外部函数的内部变量或参数  
变量或参数不会被垃圾回收机制回收

10.原型和原型链  
原型的概念

javascript的所有对象都包含一个 proto 属性 这个属性对应的就是自身的原型 JavaScript的函数对象，  
除了原型 proto 属性之外 还有 prototype 属性 当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象原型 proto  
原型链的概念  
当一个对象调用自身不存在的属性或方法时，就会去自己 proto 关联的前辈 prototype 对象上去找  
如果没找到就接着往上找 直到找到属性或方法 找不到就 返回 undefined 这就是原型链

11.作用域  
js中首先有一个最外层的作用域，全局作用域；

js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套；

es6中新增了块级作用域（大括号，比如：if\{\},for()\{\},while()\{\}…） es6作用域,只适用于const,let ；

12.继承  
Es5中的继承有：

原型继承：父类的实例作为子类的原型

构造函数继承：在子类中使用call方法调用父类的方法并将父类的this改成子类的this

不能继承原型属性/方法，只能继承父类的实例属性和方法

组合继承：既能调用父类的实例属性又能调用父类的原型属性

由于调用了两次父类，所以产生了两份实例

函数可以复用

Es6有class继承  
class就相当于Es5中的构造函数

class中定义方法是前后不能加function，全部都定义在class的prototype属性中

class中只能定义方法不能定义对象变量等

class默认是严格模式

在子类中调用extends方法可以调用父类的属性，用eat调用父类的方法

13.深拷贝浅拷贝  
图片描述  
浅拷贝只复制指向某个对象的指针，不复制对象本身(引用)，新旧对象还是共享同一块内存。  
深拷贝会另外创造一个一模一样的对象（拷贝的是全部），新对象跟原对象不共享内存，修改新对象不会改到原对象。

14.let,const,var的区别  
是否存在块作用域  
var 是不存在块作用域的，let和const有块作用域  
是否有变量提升  
var有变量提升：  
声明之前调用，就会把变量提升到最顶部。 let和const没有变量提升  
是否允许重复声明  
var允许重复声明 let和const在同一个作用域内不予许重复声明  
是否存在暂时性死区  
var没有暂时性死区 let和const存在暂时性死区：在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”，  
是否可以修改声明的变量  
var和let可以修改 ，const不可以，因为const声明的变量是一个常量，一旦定义必须赋值且不可改变  
15.解构赋值  
解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象或数组中取出,赋值给其他变量。  
16.箭头函数和普通函数的区别  
为了解决普通函数this指向问题

是匿名函数，不能作为构造函数，不能使用new，

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式：一种只包含一个表达式，连\{ … \}和return都省略掉。还有一种可以包含多条语句，这时候就不能省略\{ … \}和return。

箭头函数内没有arguments，可以用展开运算符…解决，arguments是参数的集合， 是一个类数组/伪数组体现在他不能调用数组的方法

箭头函数的this，始终指向父级上下文（箭头函数的this取决于定义位置父级的上下文，跟使用位置没关系，普通函数this指向调用的那个对象）

箭头函数不能通过call() 、 apply() 、bind()方法直接修改它的this指向。(call、aaply、bind会默认忽略第一个参数，但是可以正常传参)

箭头函数没有原型属性

18.什么是promise  
promise简单来说就是一个容器，里面存放一些异步操作的结果

也可以说他是一个对象，他可以获取异步操作的最终结果(成功或者失败)

他还是一个构造函数，他有对外统一的API，自身有all ，reject ，resolve等方法，他的原型上有then ，catch等方法。

他可以链式调用，（.then（）.then（）。。。。。）

有三种状态 : pending 初始状态 ，fulfilled 成功状态，rejected 失败状态

解决了地狱回调

应用场景：封装ajax,axios的get,post封装，微信小程序中封装wx.request()，uniapp开发中uni.request()

promise（首字母小写）对象指的是“Promise实例对象” ，Promise首字母大写且单数形式，表示“Promise构造函数” ，Promises首字母大写且复数形式，用于指代“Promises规范”

他的状态一旦改变就不可逆，只能从初始状态改成成功或者失败状态

all的方法是并行执行异步操作，等所有异步操作完成后才会执行回调

race方法是只要有一个异步操作执行完毕，就会马上进行回调

promise异步加载图片：//函数直接调用，在.then中进行成功的操作，在.catch中进行失败的各种操作.  
function loadImageAsync(url)\{  
return new Promise((resolve,reject)=>\{  
let image=new Image();  
image.οnlοad=function()\{  
resolve(image);  
\};  
image.οnerrοr=function()\{  
reject(new Error(‘Could not image at’+url));  
\}  
image.src=url;  
\})  
\}

19.async和await  
asyns 可以把普通的函数改成异步函数，调用都是一样的

异步的asyns函数返回的是一个promise对象

async配合await使用（阻塞式）是异步方法但它是一个阻塞的异步方法

他们的优点

方便联机调用，依次发生的场景

同步代码编写方式，从上到下执行

多个参数传递，跟promise不一样，可以当做普通变量来处理，也可以当做块级变量，想怎么用就怎么用，想定义几个变量就定义几个

同步代码和异步代码可以一起编写，不用纠结同步和异步的区别，把异步封装成一个promise对象放在await后面

是对promise的优化，

20.Vue 自定义组件及组件疯装  
自定义组件分为三步  
引用组件 注册组件 使用组件  
Vue组件封装（以封装一个button组件为例）  
1/在components文件内创建一个button文件，文件内创建一个index.vue文件，在index.vue文件内写的是原型（包含组件的名字，应用的最底层的HTML标签，分别根据什么条件显示什么功能）,同时该文件导出的数据为一个对象。  
2/在button文件下建立一个index.js文件，文件内对新构建组件的名字进行注册。  
3/ 与button文件同级建立一个index.js文件，对组件进行注册，同时也注册进install中，在导出时，不仅要引出全局的，而且单个的也要引出，便于局部或全局引用。  
4/要在main.js中进行引用  
5/到这里，组件便是封装完成了，在App.vue中可以进行使用了  
21.Vue项目的开发流程  
首先，拿到项目我们应该分析下项目的需求以及思路  
其次还要有一个GIT远程仓库，给团队提供便携的开发  
然后再看看项目里面的一个大体的开发功能以便做好准备  
例如登录：  
先必须要有一个表单，然后是按钮，绑定v-model  
然后在mehods中定义事件，在mounted中调用接口，在data中定义数据  
调用接口拿到数据，然后用状态码判断是否登录成功，成功则跳转到首页，同时存到localstorage中  
接着在路由中通过token/localstorage设置路由守卫，达到登录鉴权的目的  
22.输入url到页面加载完成发生了什么  
DNS解析

TCP连接

发送HTTP请求

服务器响应请求并返回相应的数据

浏览器解析渲染页面

连接结束

23.HTTP 状态码  
1 临时响应  
2 成功  
3 重定向  
4 请求错误  
23.vue项目打包  
一、修改请求静态资源的路径  
打开config下的index.js文件，修改assetsPublicPath的值，从‘/’改为‘./’。即从根路径改为相对路径。

build: \{  
// Template for index.html  
index: path.resolve(\_\_dirname, ‘…/dist/index.html’),

// Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

二、修改本地图片的路径  
打开build下的utils.js文件，增加 publicPath:’…/…/’

if (options.extract) \{  
return ExtractTextPlugin.extract(\{  
use: loaders,  
fallback: ‘vue-style-loader’,  
publicPath:’…/…/’  
\})  
\} else \{  
return \[‘vue-style-loader’\].concat(loaders)  
\}

三、在终端运行npm run build。

25.防抖和节流  
防抖: 触发高频事件后 定时器内函数只会执行一次，如果定时器内高频事件再次被触发，则重新计算时间  
场景:  
按钮提交场景：防止多次提交按钮，只执行最后提交的一次。

节流 :高频事件触发，在定时器内只会执行一次，所以节流会稀释函数的执行效率。  
1.拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动

2.缩放场景：监控浏览器 resize

3.动画场景：避免短时间内多次触发动画引起性能问题

26.数组去重  
indexOf

var arr = \[1,1,2,5,5,6,8,9,8\];

console.log(newArr(arr))  
Set

function newArr(arr)\{  
return Array.from(new Set(arr))  
\}

var arr = \[1,1,2,9,6,9,6,3,1,4,5\];

console.log(newArr(arr))  
利用递归去重

24.Git指令  
git init 初始化git仓库  
git status 查看文件状态  
git add 文件列表 追踪文件  
git commit -m 提交信息 向仓库中提交代码  
git log 查看提交记录  
覆盖工作目录中的文件: git checkout --文件名  
将文件从暂存区中删除: git r m --cached 文件名

git branch 查看分支

git branch 分支名称 创建分支

git checkout 分支名称 切换分支

git merge 来源分支 合并分支 (必须在master分支上才能合并d)

git branch -d 分支名称 删除分支（分支被合并后才允许删除）（-D 强制删除）

将本地仓库推送到远程仓库: git push 项目链接

Git 添加远程仓库origin (origin是仓库别名): git remote add 仓库名 项目链接

git push origin master  
git push -u origin master

\-u 将推送地址和分支保存，下次推送输入git push即可

25.什么是盒子模型？  
在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。

26.什么是内存泄漏  
程序的运行需要内存。只要程序提出要求，操作系统或者运行时就必须供给内存。

对于持续运行的服务进程，必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。

27.原生Ajax的创建过程  
1.创建xhr 核心对象  
2.调用open 准备发送  
3.如果是post请求，必须设置请求头。  
4.调用send 发送请求 （如果不需要参数，就写null）  
5.监听异步回调  
备注：如果是post请求，想要传json格式数据。

28.事件冒泡  
事件冒泡：事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。  
事件捕获：事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。

29.阻止事件冒泡  
1.event.stopPropagation();  
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为  
2.return false;  
事件处理过程中，阻止了事件冒泡，也阻止了默认行为

还有一种有冒泡有关的：  
3.event.preventDefault();  
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为

30.箭头函数与普通函数区别  
箭头函数是匿名函数不能作为构造函数不能使用new  
箭头函数不绑定arguments,需要用运算符解决…解决  
箭头函数不绑定this,会捕获其所在的this值,作为自己的this值  
箭头函数通过call()或apply()调用一个函数,只传入了一个参数,对this并没有影响.  
箭头函数没有原型属性

31.跨域解决问题  
jsonp

代理跨域

cors

html5 中的 window.postMessage

反向代理

哈希

32.单向数据流和双向绑定  
1.Vue 在不同组件间强制使用单向数据流,父组件可以向子组件传递数据，但是子组件不能直接修改父组件的状态。

2.数据的双向绑定  
主要由MVVM框架实现，主要由三部分组成View、ViewModel和Model组成，其中view和model不能直接进行通信，他们通过中间件ViewModel来进行通信。

33.图片懒加载  
对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。

所以，对于图片过多的页面，为了提高加载速度, 我们需要将页面内未出现在可视区域内的图片先不做加载， 等到访问到可视区域后再去加载。这样子对于页面加载性能会有很大的提升，也提高了用户体验。

34.nextTick的理解  
使用nextTick的原因：Vue是异步修改DOM的，并且不鼓励开发者直接接触DOM，但是有时候需要必须对数据更改后的DOM元素做相应的处理，但是获取到的DOM数据并不是更改后的数据，这时候就需要this.$nextTick()；  
原理：Vue通过异步队列控制DOM更新和nextTick回调函数先后执行的方式。

35.判断数据类型的4种方法  
instanceof

typeof

object.prototype.toString()

constructor构造函数