vue2

160 阅读5分钟

1、生命周期

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • Destroyed
  • keep-live下:activated、deactivated

image.png

2、父子生命周期顺序

父beforeCreate -> 父created -> 父beforeMounte -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted -> 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated -> -> beforeDestroy -> beforeDestroy -> 子destroyed -> 父destroyed

3、父子传值

  • 父传子 props、ref、provide/inject、children
  • 子传父 this.$emit()、具名插槽、root、parent
  • eventbus(导出一个vue的实例)、vuex
传递方可以在点击的时候使用eventBus.$emit('方法名', 传递的参数)
接收方在created或者mounted中使用eventBus.$on('方法名', (参数) => {})
接收方在beforeDestroy中使用eventBus.$of("", ()=> {})解绑

4、 普通函数与箭头函数的区别

  • 普通函数的this指向谁调用、可以被bind({},a,b):返回一个函数、call({},a,b)、apply({},[a,b])改变。
  • 箭头函数的this不会被改变,指向全局
  • 处理函数的返回值时,相比于普通函数,箭头函数可以隐式返回

5、jq与vue的区别

  • 面向dom,vue是面向数据,操作的是虚拟dom
  • vue渲染优雅、简洁,代码易维护,减少代码量

6、 基本数据类型、引用类型、基本类型的区别

  • 基本数据类型:Number、Null、String、Boolean、Undefind
  • 引用数据类型(object):Object、Array、Function、Date

7、es6知识

  • 声明和表达式:let、const、解构赋值 Symbol
  • 内置对象:Map、Set、proxy、reflect
  • 字符串模板:${}
  • 函数:参数扩展、箭头函数、迭代器 for of
  • class类
  • export和import 模块
  • promise async await和generator
  • async await:通过promise包装的异步任务
async function async1() {
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2 end')
}
async1()
new Promise((resolve, reject) => {
  async2() 
  ...
}).then(() => {
 // 执行async1()函数await之后的语句
  console.log('async1 end')
})

8、事件循环

  • 堆与栈的区别:
结构不同二叉树线性表
管理方式不同自动分配内存,程序员释放内存,容易造成内存泄露自动分配、释放内存
空间大小不同每个进程拥有的栈大小要远远小于堆大小
生长方向不同:线性表
生长方向向上:生长方向向上,内存地址由低到高栈的生长方向向下,内存地址由高到低
生长方向向上:生长方向向上,内存地址由低到高栈的生长方向向下,内存地址由高到低
分配内存方式不同动态分配静态分配(操作系统完成)和动态分配(由alloca()函数分配:由操作系统进行释放,无需我们手工实现)
分配效率不同:复杂、低
存放内容不同简单数据类型引用数据类型
  • 事件循环:处理JavaScript单线程运行时,阻塞的问题 (异步的原理); 分为宏任务和微任务;浏览器的eventloop有一个主线程和一个调用栈(执行栈),所有任务都需要在执行栈等待主线程执行
  1. 栈:受限仅在表尾(栈顶)进行删除、插入的线性表(先进后出)。JS调用栈采用的是后进先出的规则,当函数执行的时候,会被添加到栈的顶部,当执行栈执行完成后,就会从栈顶移出,直到栈内被清空
  2. 队列:受限仅在表尾(队尾)进行插入,表头(队头)进行删除的线性表
  3. 宏任务(宿主(Node、浏览器)):script里面的全部代码、定时器、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)等。会触发新一轮Tick
  4. 微任务(js引擎):Promise.then、Object.observe、MutationObserver、process.nextTick(Node.js 环境)。不会触发新一轮Tick吗
  5. js单线程任务被分为同步任务与异步任务,同步任务在调用栈按顺序等待主线成执行;异步任务有了结果后,将注册回调函数返回任务队列中,当调用栈清空后在依次执行。

image.png

image.png

image.png

9. v-if和v-show的区别

  • v-show:css的display:none。不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换
  • v-if:操作dom节点是否存在、切换消耗比较高、惰性。它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
  • 一般来说,v-if 有更高的切换开销,而 v-show更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show较好;如果在运行时条件很少改变,则使用v-if 较好。

10、 v-if与v-for一起使用

  • v-for 具有比 v-if 更高的优先级,不推荐同时使用,一起使用会导致每个遍历的标签都带有v-if。
  • 如果你的目的是有条件地跳过循环的执行,那么可以将 v-if置于外层元素 (或 [<template>]上;或者使用computed过滤掉数据,直接v-for

11、 v-for的key的作用

  • 重排(Reflow):当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。并触发重汇
  • 重绘(Repaint):是在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等

12、vue2和vue3的区别 (vue3快在哪)

  • diff算法增加patchFlag静态标识,只对比有静态标识的dom元素
  • 事件增加缓存
  • 很多文本节点提升 只定义一次,渲染时不需要再次定义,vue2每次都需要重新定义
  • ssr渲染 以字符串方式渲染
  • proxy替换了之前的defineProterty
  • vite
  • ts