Vue的一些知识汇总---希望对你有用_vue right位0时还是有间距右边-CSDN博客

本文链接：https://blog.csdn.net/weixin_61465262/article/details/125612326

一.在不知元素宽高的情况下,如何让块状元素自动居中?

方式1:
    <!--给元素加入定位元素-->
      position::absolute;
    <!--给元素设置距离: 距离上下各 50%-->
      left:50%; 
      top:50%;
    <!--设置元素的相对于⾃身的偏移度为负50%(也就是元素⾃身尺⼨的⼀半)--> 
     transform:translate(-50%,-50%); 
方式2:
    <!--把元素变成定位元素--> 
       position:absolute; 
    <!--设置元素的定位位置，距离上、下、左、右都为0--> 
       left:0; 
       right:0; 
       top:0; 
       bottom:0; 
    <!--设置元素的margin样式值为 auto--> 
       margin:auto;

二.var,let，const 这些有啥区别:

 1. var 具有变量提升，⽽const和let没有
 2. const和let都是块级局部变量
 3. 同⼀个作⽤域下 const和let不可以声明同⼀个变量 var是可以的const在使⽤的时候不可以修改值

三.普通函数和箭头函数的区别

 ⼀.外形不同：箭头函数使⽤箭头定义，普通函数中没有
 ⼆.箭头函数都是匿名函数: 普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是
匿名函数。
 三.箭头函数不能⽤于构造函数，不能使⽤new命令,否则报错 
    普通函数可以⽤于构造函数，以此创建对象实例。
 四.箭头函数中this的指向不同:
           箭头函数的外层如果有普通函数，那么箭头函数的 this 就是外层普通函数的this
           箭头函数的外层如果没有普通函数，那么箭头函数的 this 就是全局变量window

四.闭包的含义,用途,缺点:

闭包:是指有权访问另⼀个函数作⽤域中的变量的函数，当函数可以记住并访问所在的词法作⽤域时，就产⽣了 
    闭包(即使函数是在当前词法作⽤域之外执⾏)
闭包用途:
    能够访问函数定义时所在的词法作⽤域(阻⽌其被回收) 
    私有化变量
    模拟块级作⽤域
    创建模块
闭包缺点:
    会导致函数的变量⼀直保存在内存中，过多的闭包可能会导致内存泄漏

五. TCP请求方式的过程

建⽴TCP连接->发送请求⾏->发送请求头->（到达服务器）发送状态⾏->发送响应头->发送响应数据->断TCP连接

六.回流和重绘

重排(也称回流): 当DOM的变化影响了元素的⼏何信息(DOM对象的位置和尺⼨⼤⼩)，浏览器需要重新计算元素         
    的⼏何属性，将其安放在界⾯中的正确位置，这个过程叫做重排(回流)。
触发：添加或者删除可⻅的DOM元素,元素尺⼨改变(边距、填充、边框、宽度和⾼度)

重绘:当⼀个元素的外观发⽣改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘
触发:改变元素的color、background、box-shadow等属性

回流(重排)优化建议：
     分离读写操作
     样式集中修改
    缓存需要修改的DOM元素
   尽量只修改position：absolute或fixed元素，对其他元素影响不⼤
   动画开始GPU加速，translate使⽤3D变化

七.原型链:

当我们访问⼀个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象⾥找这个属性，这个原型对象⼜会有⾃⼰的原型，于是就这样⼀直找下去，也就是原型链的概念

八.什么是生命周期,他的作用,过程

vue的⽣命周期：每个Vue实例在创建时都会经过⼀系列的初始化过程

作用:在vue生命周期的不同阶段通过对应的钩子函数来实现  组件数据管理 和 DOM渲染  两大重要功能

过程: 
1.创建阶段(create阶段): 
       beforecreate: vue实例已经初始化,但不能获取DOM节点 (无 data /无el )
       created: vue实例已经创建，但是仍然不能获取dom节点 (有data /无el )

2.载入阶段(mount阶段):
       beforeMount: 模板编译完成,但是未挂载到界面上 (有data /有el )
       mounted: 编译好的魔板已经挂载到了界面中（数据和dom节点已经渲染出来了）   

3.更新阶段(update阶段):
       beforeupdate: 数据发生变化立即调用,此时data中的数据时最新的，但是页面上的数据还是旧的(检测到数据更新时，但dom更新前执行)
       updataed: 更新结束后执行,此时data中的值与页面上的值都已经是最新的 

4.销毁阶段(destroy阶段):
        beforedestroy: (实例被销毁前)当要销毁vue实例时，在销毁之前执行
        destroy: （实例被销毁前）在销毁vue实例前执行

九.created和mounted的区别

created :实例已经创建, 但不能获取DOM节点 
mounted :模板已经挂载到页面上了，可以操作dom元素

九. 如果在实例创建之后添加新的属性到实例上，它会不会触发视图更新

不会,同时vue官方给我们提供了两种方法: vue.set() 和 this.$set()

十. Vue组件通信

⽗⼦组件通信
⽗->⼦ props
⼦->⽗ $on、$emit  获取⽗⼦组件实例
parent、children Ref  获取实例的⽅式调⽤组件的属性或者⽅法
Provide、inject   官⽅不推荐使⽤，但是写组件库时很常⽤
兄弟组件通信(bus总栈)
Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() 
Vuex 跨级组件通信
$attrs、$listeners Provide、inject

十一. 监听器与计算属性的区别:

1).计算属性 需要依赖多个属性的情况  侦听器只依赖一个属性的情况

2).计算属性缓存结果时每次都会不断重新创建变量,而侦听器是直接计算，不会创建变量保存结果

3)计算属性有缓存, 监听没有缓存

4）.computed计算属性的结果是通过return返回的，而watch不需要return。

5）.watch监听中的参数可以得到侦听属性改变的最新结果，而computed函数没有这种参数。

十二.$route与$router的区别

router: 
    是VueRouter的⼀个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到⼀个router的实例对象，这个对象中是⼀个全局的对象，他包含了所有的路由包含了多关键的对象和属性。

route:
    是⼀个跳转的路由对象，每⼀个路由都会有⼀个route对象,是⼀个局部的对象，可以获取对应的name,path,params,query等

两者的⼀些属性是不同的。

十三.导航守卫:

全局: beforeEach            局部: afterEach

导航守卫的执行顺序:
    beforeRouteLeave --> beforeEach : 全局前置守卫(三个参数) 
                to :即将进入的路由对象
                from :当前导航正要离开的路由   
                next :下一步
  -->路由独享守卫 (beforeEnter) -->组件内进入(beforeRouteEnter) --> 全局解析守卫(beforeResolve) --> 全局后置守卫(afterEach) --> beforecreate --> created -->失活组件的销毁（destory）-->当前的组件的beforeMout -->mounted

十四.第一次页面加载会触发哪几个钩子函数？

beforeCreate   created   beforeMount    mounted

十五.双向绑定实现原理

当⼀个Vue实例创建时
    Vue会遍历data选项的属性,⽤Object.defineProperty
    将它们转为 getter/setter并且在内部追踪相关依赖，
    在属性被访问和修改时通知变化。每个组件实例都有相应的watcher 程序实例，
    它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调⽤时
    会通知 watcher重新计算，从⽽致使它关联的组件得以更新

十六.vuex是什么？它的核心概念是什么?

Vuex是一个专为vue.js应用程序开发的状态管理模式

状态管理(五个属性) :state，getters，mutation，action，modules
状态就是数据，它相当于一个仓库，是用于存放数据用的,它可以把存储的数据共享给其他组件


详细五个概念:

state
     负责状态管理，类似于vue中的data，用于初始化数据

mutation
     存放的是动态修改Vuex的state中保存的数据状态的方法,通过commit触发

action
   可以处理异步，通过dispatch触发，不能直接修改state，首先在组件中通过dispatch触发action，然 
后在action函数内部commit触发mutation，通过mutation修改state状态值,将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据

getter
    Vuex中的计算属性，相当于vue中的computed,依赖于state状态值，状态值一旦改变，getter会重新计算，也就是说，当一个数据依赖于另一个数据发生变化时，就要使用getter

module
    模块化管理

十七.axios 是⼀个基于Promise ⽤于浏览器和 nodejs 的 HTTP 客户端

十八.vue组件中的data 定义为何必须是一个函数?

因为data是对象的话，由于对象是引用类型，组件被复用的话，就会创建多个实例.本质上,这些实例用的都是同一个构造函数。这样就会影响到所有的实例，所以为了保证组件不同的实例之间data不冲突，data必须是一个函数

十九.什么是声明式路由? 什么是编程式路由 ?

声明式: <router-link to='跳转的路径'></router-link>

编程式跳转: 就是js写法 即this.$route.push('跳转的路径')

                //不带参数推荐直接跳转
				// this.$router.push('跳转的路径')
				//如需带参数: 推荐使用路由的name属性
				let myname = this.$route.params.id;
				this.$router.push( {name:'logo',params:{m:myname} });

二十.使用vue的v-for时,为什么要绑定:key？如何不绑定会有什么效果?

key :可以给组件的添加唯一的标识性,为了更好的区别各个组件，更好的查找和单个渲染
   不绑定会导致所有列表Dom重新渲染