2024年Web前端最全如何将vue2代码一键升级到vue3（上）(2)，2024年最新面试加分项怎么写

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

一天，在我喝着咖啡改着bug的时候，领导过来慢悠的问了一句：xx有没有办法把vue2的代码改造成vue3的? 我们有个项目需要… 我就知道这杯咖啡买对了。如何将vue2源码一键升级到vue3（下）

分析

我们知道，在vue3中是可以使用选项式api风格来书写我们的代码，所以我们把重点放在 Vue 2 对 Vue 3 的所有非兼容性改变上。没错，我们要读取源码并将不兼容的写法进行改造。

思路

获取源码抽象语法树（ast），通过babel工具链进行解析-改造-生成，需要准备以下工具包：

• babel-parser: 解析源代码，生成AST。
• babel-traverse: 遍历AST，找到对应的节点。
• babel-types: 生成AST节点。
• babel-generator: 通过改造后的ast生成源代码。

工具包下载方式

关于AST

源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构。我们写一段js代码来看一下这颗树的细节。（不同解析器表现形式不同，以下内容通过babel-parser进行解析）。ast在线转换网站

我们现在对ast有了基本的印象，接下来我们通过借助babel工具链去生成ast并改造它。

配合babel工具包改造ast

1.删除节点，尝试删除console.log()。

//引入所需工具包
const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const t = require("@babel/types");
const generator = require("@babel/generator").default;

//我们先尝试一下去掉源代码中的console.log
/\*\*
 \* 转换函数 
 \* @param {string} source 源代码
 \* @returns {string} 转换后的代码
 \*/
 function fillterCode(source) {
    // 1. 生成AST
    const ast = parser.parse(source, {
        sourceType: 'script'
    });
    // 2. 遍历AST，找到对应的节点
    traverse(ast, {
        // 遍历所有的函数调用表达式
        CallExpression(path) {
            // 判断是否是console.log节点
            if (t.isMemberExpression(path.node.callee)
                && t.isIdentifier(path.node.callee.object, { name: 'console' })
                && t.isIdentifier(path.node.callee.property, { name: 'log' })) {
                // 删除节点
                path.remove();
            }
        }
    });
    // 3. 生成代码
    return generator(ast).code;
}
// 定义源代码
const sourceCode = `
function add(a, b) {
 console.log(a + b);
 return a + b;
}
`
// 调用转换函数
const resultCode = fillterCode(sourceCode);
console.log(resultCode);

traverse方法内的 CallExpression 代表函数调用表达式类型,path.node对应当前节点，babel可以针对语法树中特定类型进行遍历,在if判断条件中,我们使用了babel-types提供的api（查询babel-types的api）去判断节点类型与节点的标识符是否对应,符合条件进行path.remove()删除该节点。
可以配合ast在线转换网站查询节点信息。

2.修改节点：将函数名改为 minus，a + b 改为 a - b。

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HXS-1715404515075)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】