3)SEO优化
-
预渲染
-
服务端渲染SSR
4)打包优化
-
压缩代码;
-
Tree Shaking/Scope Hoisting;
-
使用cdn加载第三方模块;
-
多线程打包happypack;
-
splitChunks抽离公共文件;
-
sourceMap优化;
说明:优化是个大工程,会涉及很多方面
2. Vue 的实例生命周期
参考答案:
(1) beforeCreate 初始化实例后 数据观测和事件配置之前调用
(2) created 实例创建完成后调用
(3) beforeMount 挂载开始前被用
(4) mounted el 被新建 vm. $el 替换并挂在到实例上之后调用
(5) beforeUpdate 数据更新时调用
(6) updated 数据更改导致的 DOM 重新渲染后调用
(7) beforeDestory 实例被销毁前调用
(8) destroyed 实例销毁后调用
Vue2 与Vue3的生命周期对比
| 变量 | 实例化(次数) |
| — | — |
| beforeCreate(组件创建之前) | setup(组件创建之前) |
| created(组件创建完成) | setup(组件创建完成) |
| beforeMount(组件挂载之前) | onBeforeMount(组件挂载之前) |
| mounted(组件挂载完成) | onMounted(组件挂载完成) |
| beforeUpdate(数据更新,虚拟DOM打补丁之前) | onBeforeUpdate(数据更新,虚拟DOM打补丁之前) |
| updated(数据更新,虚拟DOM渲染完成) | onUpdated(数据更新,虚拟DOM渲染完成) |
| beforeDestroy(组件销毁之前) | onBeforeUnmount(组件销毁之前) |
| destroyed(组件销毁之后) | onUnmounted(组件销毁之后) |
3. Vue 的双向数据绑定的原理
参考答案:
VUE 实现双向数据绑定的原理就是利用了 Object. defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
Vue3. 0 将用原生 Proxy 替换 Object. defineProperty
4. 为什么要替换 Object. defineProperty?(Proxy 相比于 defineProperty 的优势)
参考答案:
-
在 Vue 中,Object.defineProperty 无法监控到数组下标的变化,导致直接通过数组的下标给数组设置值,不能实时响应。
-
Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue 2.x里,是通过 递归 + 遍历 data 对象来实现对数据的监控的,如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象是才是更好的选择。
而要取代它的Proxy有以下两个优点;
-
可以劫持整个对象,并返回一个新对象
-
有13种劫持操作
既然Proxy能解决以上两个问题,而且Proxy作为es6的新属性在vue2. x之前就有了,为什么vue2. x不使用Proxy呢?一个很重要的原因就是:
Proxy是es6提供的新特性,兼容性不好,最主要的是这个属性无法用polyfill来兼容
5. 什么是 Proxy?
参考答案:
- 含义:
Proxy 是 ES6 中新增的一个特性,翻译过来意思是"代理",用在这里表示由它来“代理”某些操作。 Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。
使用 Proxy 的核心优点是可以交由它来处理一些非核心逻辑(如:读取或设置对象的某些属性前记录日志;设置对象的某些属性值前,需要验证;某些属性的访问控制等)。 从而可以让对象只需关注于核心逻辑,达到关注点分离,降低对象复杂度等目的。
- 基本用法:
let p = new Proxy(target, handler);
参数:
-
target 是用Proxy包装的被代理对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
-
handler 是一个对象,其声明了代理target 的一些操作,其属性是当执行一个操作时定义代理的行为的函数。
-
p 是代理后的对象。当外界每次对 p 进行操作时,就会执行 handler 对象上的一些方法。Proxy共有13种劫持操作,handler代理的一些常用的方法有如下几个:
get: 读取
set: 修改
has: 判断对象是否有该属性
construct: 构造函数
- 示例:
下面就用Proxy来定义一个对象的get和set,作为一个基础demo
let obj = {};
let handler = {
get(target, property) {
console.log( ${property} 被读取
);
return property in target ? target[property] : 3;
},
set(target, property, value) {
console.log( ${property} 被设置为 ${value}
);
target[property] = value;
}
}
let p = new Proxy(obj, handler);
p.name = ‘tom’ //name 被设置为 tom
p.age; //age 被读取 3
p 读取属性的值时,实际上执行的是 handler. get() :在控制台输出信息,并且读取被代理对象 obj 的属性。
p 设置属性值时,实际上执行的是 handler. set() :在控制台输出信息,并且设置被代理对象 obj 的属性的值。
以上介绍了Proxy基本用法,实际上这个属性还有许多内容,具体可参考Proxy文档
6. 为什么避免 v-if 和 v-for 用在一起
参考答案:
vue2.x 中v-for优先级高于v-if,vue3.x 相反。所以2.x 版本中在一个元素上同时使用 v-if 和 v-for 时,v-for 会优先作用,造成性能浪费;3.x 版本中 v-if 总是优先于 v-for 生效,导致v-if访问不了v-for中的变量。
解析:
一般我们在两种常见的情况下会倾向于这样做:
-
为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下,请将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。
-
为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下,请将 v-if 移动至容器元素上 (比如 ul、ol)。
当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,所以这个模板:
v-for=“user in users”
v-if=“user.isActive”
:key=“user.id”
{{ user.name }}
将会经过如下运算:
this.users.map(function (user) {
if (user.isActive) {
return user.name
}
})
因此哪怕我们只渲染出一小部分用户的元素,也得在每次重渲染的时候遍历整个列表,不论活跃用户是否发生了变化。
通过将其更换为在如下的一个计算属性上遍历:
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
v-for=“user in activeUsers”
:key=“user.id”
{{ user.name }}
我们将会获得如下好处:
-
过滤后的列表只会在 users 数组发生相关变化时才被重新运算,过滤更高效。
-
使用 v-for=“user in activeUsers” 之后,我们在渲染的时候只遍历活跃用户,渲染更高效。
-
解耦渲染层的逻辑,可维护性 (对逻辑的更改和扩展) 更强。
为了获得同样的好处,我们也可以把:
v-for=“user in users”
v-if=“shouldShowUsers”
:key=“user.id”
{{ user.name }}
更新为:
v-for=“user in users”
:key=“user.id”
{{ user.name }}
通过将 v-if 移动到容器元素,我们不会再对列表中的每个用户检查 shouldShowUsers。取而代之的是,我们只检查它一次,且不会在 shouldShowUsers 为否的时候运算 v-for。
反例:
v-for=“user in users”
v-if=“user.isActive”
:key=“user.id”
{{ user.name }}
v-for=“user in users”
v-if=“shouldShowUsers”
:key=“user.id”
{{ user.name }}
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。**
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-Gf82jNgk-1715703099071)]
[外链图片转存中…(img-mkoR1MSy-1715703099072)]
[外链图片转存中…(img-4XwV10HU-1715703099072)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!