Vue的一些知识汇总---希望对你有用

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

• 方式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重新渲染