1 Vue生命周期总结(四个阶段,八个钩子函数)
vue生命周期分为四个阶段
第一阶段(创建阶段):beforeCreate,created
第二阶段(挂载阶段):beforeMount(render),mounted
第三阶段(更新阶段):beforeUpdate,updated
第四阶段(销毁阶段):beforeDestroy,destroyed
2 vue组件初始化的执行顺序
Props Watch 等顺序
beforeCreate ->inject -> Props -> Methods -> Data -> Computed -> Watch ->provide-> created
结合父子组件之后,一个完整的父子组件生命周期
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
3 Vue2和Vue3的区别
响应式原理不同(数据双向绑定原理)
vue2通过Object.definedProperty()的get()和set()来做数据劫持、结合和发布订阅者模式来实现,Object.definedProperty()会遍历每一个属性。
vue3通过proxy代理的方式实现。
proxy的优势:不需要像Object.definedProperty()的那样遍历每一个属性,有一定的性能提升proxy可以理解为在目标对象之前架设一层"拦截",外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。
当属性过多的时候利用Object.definedProperty()要通过遍历的方式监听每一个属性。利用proxy则不需要遍历,会自动监听所有属性,有利于性能的提升
在vue2中v-for的优先级高于v-if,可以放在一起使用,但是不建议这么做,会带来性能上的浪费在vue3中v-if的优先级高于v-for,一起使用会报错。可以通过在外部添加一个标签,将v-for移到外层
4 vue2数据双向绑定原理详细介绍
5 Computed和Watch的区别
1、computed是计算属性;watch是监听,监听data中的数据变化。
2、computed支持缓存,当其依赖的属性的值发生变化时,计算属性会重新计算,反之,则使用缓存中的属性值;watch不支持缓存,当对应属性发生变化的时候,响应执行。
3、computed不支持异步,有异步操作时无法监听数据变化;watch支持异步操作。 4、computed第一次加载时就监听;watch默认第一次加载时不监听。
4、computed第一次加载时就监听;watch默认第一次加载时不监听。
5、computed中的函数必须调用return;watch不是。
6、使用场景:
computed:一个属性受到多个属性影响,如:购物车商品结算(多对一)。
watch:监听路由变化,一个数据影响多条数据,如:搜索数据(一对多)。
数据变化响应,执行异步操作,或高性能消耗的操作,watch为最佳选择。
6 Vuex有那几种状态和属性?
7 vue路由守卫
8 Vue项目优化方案
9 es5和es6区别
1、变量声明方式不同:ES5使用var关键字进行变量声明,而ES6则引入了let和const关键字来声明变量。
2、块级作用域:在ES5中,只存在全局作用域和函数作用域,而ES6中增加了块级作用域,对于if、for、switch等代码块内部所声明的变量,在外部是不可见的。
3、箭头函数:ES6中新增了箭头函数,可以更为简洁地定义函数,同时箭头函数没有自己的this,它的this绑定在父级作用域的this上。
4、字符串模板:ES6中新增了字符串模板功能,可以使用反引号(`)来定义多行文本和嵌入表达式。
5、类和继承:ES6中引入了class关键字来实现类和继承,使得面向对象编程更加方便。
6、模块化:ES6中引入了模块化的概念,通过export和import关键字来实现模块的导出和引入。
7、解构赋值:ES6中引入了解构赋值语法,可以方便地从数组或对象中提取值并赋给变量。
8、Promise对象:ES6中引入了Promise对象,可以更加优雅地处理异步操作。
9、其他:ES6还新增了一些新的数据结构和方法,如Set、Map、Symbol等。同时对于函数参数的默认值、rest参数等也进行了增强和优化。
10 前端跨域处理方案
一、JSONP跨域
- jsonp的缺点:只能发送get一种请求。
二、跨域资源共享(CORS)
三、Nginx 反向代理解决跨域问题
四、nodejs中间件代理跨域
五、document.domain + iframe跨域
六、location.hash + iframe跨域
七、window.name + iframe解决跨域
八、postMessage通信跨域
- postMessage:发送
- onmessage:接收