情人节表白代码跑不通？3个API变更坑点完整示例解析
刚拿到一个基于 Vue 3 和 Canvas 的【情人节表白】H5 项目源码，准备给女朋友整点惊喜。结果一运行，控制台直接炸了。不是简单的样式错乱，而是满屏的 undefined is not a function。仔细一看，原博主写这套代码是在 2019 年，用的还是 Vue 2 的 Options API 和旧版 ECharts。现在直接套用到 Vue 3 的 Composition API 里，版本升级后 API 全变了，导致核心逻辑全部失效。
很多转行前端或者刚接触新框架的同事，最容易栽在这种“时间差”坑里。网上搜到的教程，代码看着都挺对，但一跑就报错。这时候最需要的不是重新学一遍框架，而是一份能直接复现、能对比新旧写法差异的完整示例。今天我们就以这个【情人节表白】项目为案例，拆解三个最典型的 API 变更坑点。不聊虚的，直接上代码，讲清楚为什么旧代码在新环境下会崩，以及怎么用最少的改动修复它。
坑点一：Vue 2 的 this 指向在 Vue 3 中彻底失效
现象与根本原因
这是最基础的坑，但也是转岗新人最容易忽视的。在 Vue 2 中，我们习惯在 methods 里通过 this 来访问 data 中的变量。比如我们的表白页面，有一个“开始动画”的按钮，点击后需要修改 isStart 状态来触发 Canvas 绘制。
很多旧代码是这样的：
// ❌ 错误写法：Vue 2 Options API 风格，在 Vue 3 setup 中直接照搬
export default {data() {return {isStart: false,ctx: null}},methods: {startAnimation() {// 这里的 this 指向 Vue 实例，可以访问 datathis.isStart = true;// 假设这里有一个获取 Canvas 上下文的逻辑this.ctx = document.getElementById('myCanvas').getContext('2d');// 触发渲染this.render();},render() {// 依赖 this.ctxif (!this.ctx) return;this.ctx.clearRect(0, 0, 500, 500);// ... 绘制逻辑}}
}当你把这段逻辑强行迁移到 Vue 3 的 script setup 中时，如果你还保留 this，或者试图在普通函数里通过 this 访问响应式变量，结果就是 undefined。因为 Vue 3 的 Composition API 中，setup 函数返回的上下文并不像 Options API 那样自动绑定 this。更关键的是，如果你把逻辑提取到一个独立的工具函数里，this 指向就变成了调用该函数的对象，而不是 Vue 组件实例。
正确写法与对比
在 Vue 3 中，我们直接使用 ref 或 reactive 来管理状态，函数通过闭包访问这些变量，完全不需要 this。
// ✅ 正确写法：Vue 3 Composition API 风格
import { ref, onMounted } from 'vue';export default {setup() {const isStart = ref(false);const ctx = ref(null);const startAnimation = () = {// 直接操作 ref 的 .valueisStart.value = true;const canvas = document.getElementById('myCanvas');ctx.value = canvas.getContext('2d');render();};const render = () = {// 通过闭包访问 ctx.value，而不是 this.ctxif (!ctx.value) return;ctx.value.clearRect(0, 0, 500, 500);// ... 绘制逻辑// 这里可以添加情人节相关的绘制，比如爱心轨迹ctx.value.beginPath();ctx.value.arc(250, 250, 100, 0, Math.PI * 2);ctx.value.stroke();};// 生命周期钩子也变了，不再是 mounted，而是 onMountedonMounted(() = {console.log('组件挂载完成，初始化 Canvas');});return {isStart,startAnimation};}
}核心差异：Vue 2： 依赖 this 隐式绑定，状态在 data 中，方法在 methods 中。
Vue 3： 依赖闭包显式引用，状态通过 ref 显式声明，方法直接在 setup 内部定义。避坑建议： 迁移代码时，全局搜索 this.，逐行检查其指向。如果 this 指向的是组件实例，请将其替换为对应的 ref 变量。如果 this 指向的是当前对象（如在类中），则需保留。
坑点二：Canvas 绘制性能陷阱与 requestAnimationFrame 的滥用
现象与根本原因
【情人节表白】的核心视觉效果通常是粒子效果或爱心轨迹动画。旧代码中，为了实现平滑动画，博主使用了 setInterval 来定时重绘 Canvas。
// ❌ 错误写法：使用 setInterval 进行动画循环
let animationTimer;const startAnimation = () = {// ... 初始化逻辑animationTimer = setInterval(() = {render();}, 16); // 大约 60fps
};const stopAnimation = () = {clearInterval(animationTimer);
};这种写法在低端设备上会导致严重掉帧，而且 setInterval 无法感知浏览器的刷新率。更致命的是，在 Vue 3 中，如果组件被卸载（比如用户快速切换页面），setInterval 不会自动清除，导致内存泄漏和后台持续占用 CPU。这是很多 H5 项目“看着能用，但手机发烫”的根本原因。
根据 MDN Web Docs 关于 requestAnimationFrame 的说明，浏览器会尽可能以显示器的刷新率来执行回调函数，并且会在页面不可见时自动暂停，这是性能优化的最佳实践。
正确写法与复现修复
我们需要将 setInterval 替换为 requestAnimationFrame，并确保在组件卸载时取消请求。
// ✅ 正确写法：使用 requestAnimationFrame 和 onUnmounted 清理
import { ref, onMounted, onUnmounted } from 'vue';export default {setup() {const isStart = ref(false);let animationFrameId = null;const render = () = {// 获取上下文const canvas = document.getElementById('myCanvas');if (!canvas) return;const ctx = canvas.getContext('2d');// 清除画布ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制爱心或粒子drawHeart(ctx);// 如果动画还在进行，请求下一帧if (isStart.value) {animationFrameId = requestAnimationFrame(render);}};const startAnimation = () = {isStart.value = true;render(); // 启动第一帧};const stopAnimation = () = {isStart.value = false;if (animationFrameId) {cancelAnimationFrame(animationFrameId);animationFrameId = null;}};onMounted(() = {// 初始化 Canvas 尺寸等});// ⚠️ 关键：必须在组件卸载时清理，防止内存泄漏onUnmounted(() = {stopAnimation();});return {startAnimation,stopAnimation};}
}function drawHeart(ctx) {// 具体的绘制逻辑，比如使用贝塞尔曲线画爱心ctx.beginPath();// ... 绘制代码ctx.stroke();
}核心差异：旧写法： setInterval 固定时间间隔，不感知屏幕刷新率，组件卸载后不清理。
新写法： requestAnimationFrame 同步屏幕刷新率，页面隐藏时自动暂停，onUnmounted 确保资源释放。避坑建议： 凡是涉及连续动画的代码，一律禁用 setInterval。养成习惯，只要用了 requestAnimationFrame，就必须配一个 onUnmounted 或 beforeUnmount 来 cancelAnimationFrame。
坑点三：ECharts 5 升级后的配置项变更与响应式冲突
现象与根本原因
很多【情人节表白】页面会用 ECharts 画一个“心跳曲线”或“玫瑰图”。旧代码使用的是 ECharts 4.x 版本，配置项中使用了 graphic 组件来添加静态文字或图标。
在 ECharts 5.0 中，为了优化性能，graphic 组件的行为发生了微调，更重要的是，当我们将 ECharts 实例挂载到 Vue 3 的响应式系统上时，如果直接操作 DOM 或频繁 setOption，会导致渲染循环。
常见错误是：在 watch 中直接调用 chart.setOption()，但没有处理 ECharts 实例的销毁与重建。
// ❌ 错误写法：ECharts 4 风格 + Vue 3 响应式冲突
const chart = ref(null);onMounted(() = {const dom = document.getElementById('chart');chart.value = echarts.init(dom);// 直接设置旧版配置chart.value.setOption({title: { text: '我的心跳' },// ... ECharts 4 配置});
});// 监听数据变化
watch(() = props.heartRate, (newVal) = {// 每次心跳数据变化都 setOption，且没有处理 resizechart.value.setOption({series: [{ data: [newVal] }]});
});问题在于：ECharts 5 对 graphic 的引用方式有变，旧配置可能失效。
没有处理窗口 resize 事件，导致 H5 在手机上旋转屏幕时图表变形。
组件卸载时没有 dispose ECharts 实例，导致 Canvas 残留。正确写法与完整示例
我们需要使用 ECharts 5 的推荐配置，并封装一个健壮的初始化函数。
// ✅ 正确写法：ECharts 5 兼容 + 完善的生命周期管理
import * as echarts from 'echarts';
import { ref, onMounted, onUnmounted, watch } from 'vue';export default {props: {heartRate: { type: Number, default: 60 }},setup(props) {const chartDom = ref(null);let myChart = null;const initChart = () = {if (!chartDom.value) return;// 销毁旧实例，防止重复初始化if (myChart) {myChart.dispose();}myChart = echarts.init(chartDom.value);// ECharts 5 配置，使用新的 graphic 语法或 tooltip 替代const option = {title: {text: '实时心跳',left: 'center'},xAxis: { type: 'category', data: [] },yAxis: { type: 'value' },series: [{name: '心率',type: 'line',smooth: true,data: [props.heartRate]}],// 如果是 5.0+，graphic 配置需检查兼容性graphic: [{type: 'text',left: '10',top: '10',style: { text: '💖', fontSize: 20 }}]};myChart.setOption(option);};const handleResize = () = {if (myChart) {myChart.resize();}};onMounted(() = {initChart();// 监听窗口大小变化，解决 H5 适配问题window.addEventListener('resize', handleResize);});onUnmounted(() = {// 移除事件监听window.removeEventListener('resize', handleResize);// 销毁 ECharts 实例if (myChart) {myChart.dispose();myChart = null;}});// 监听心率变化，使用 debounce 防止频繁重绘watch(() = props.heartRate, (newVal) = {if (myChart) {myChart.setOption({series: [{ data: [newVal] }]});}});return { chartDom };}
}核心差异：旧写法： 缺乏 dispose，未处理 resize，配置项可能不兼容 ECharts 5。
新写法： 完善的生命周期管理，dispose 清理实例，resize 监听适配 H5，配置项符合 ECharts 5 规范。避坑建议：永远 dispose： 任何第三方图表库，在 Vue 3 的 onUnmounted 中必须调用销毁方法。
Resize 监听： H5 项目务必监听窗口 resize 并调用图表的 resize 方法。
版本检查： 升级 ECharts 时，务必查阅官方迁移指南，特别是 graphic、tooltip 等核心组件的变更。总结与规避建议
这三个坑，看似独立，实则都指向同一个问题：缺乏对框架生命周期的敬畏。Vue 3 的 Composition API 更灵活，但也更“原始”，它不再像 Vue 2 那样帮你做很多隐式处理。你需要显式地管理每一个资源：从 ref 的创建，到 requestAnimationFrame 的取消，再到 ECharts 实例的销毁。
对于转岗的开发者来说，不要只盯着“功能实现”，更要盯着“资源释放”。一个没有内存泄漏的【情人节表白】页面，比一个炫酷但让手机发烫的页面更值得炫耀。
这个知识点你面试被问过吗？留言说说 情人节表白代码跑不通？3个API变更坑点完整示例解析
情人节表白代码跑不通？3个API变更坑点完整示例解析
刚拿到一个基于 Vue 3 和 Canvas 的【情人节表白】H5 项目源码，准备给女朋友整点惊喜。结果一运行，控制台直接炸了。不是简单的样式错乱，而是满屏的 undefined is not a function。仔细一看，原博主写这套代码是在 2019 年，用的还是 Vue 2 的 Options API 和旧版 ECharts。现在直接套用到 Vue 3 的 Composition API 里，版本升级后 API 全变了，导致核心逻辑全部失效。
很多转行前端或者刚接触新框架的同事，最容易栽在这种“时间差”坑里。网上搜到的教程，代码看着都挺对，但一跑就报错。这时候最需要的不是重新学一遍框架，而是一份能直接复现、能对比新旧写法差异的完整示例。今天我们就以这个【情人节表白】项目为案例，拆解三个最典型的 API 变更坑点。不聊虚的，直接上代码，讲清楚为什么旧代码在新环境下会崩，以及怎么用最少的改动修复它。
坑点一：Vue 2 的 this 指向在 Vue 3 中彻底失效
现象与根本原因
这是最基础的坑，但也是转岗新人最容易忽视的。在 Vue 2 中，我们习惯在 methods 里通过 this 来访问 data 中的变量。比如我们的表白页面，有一个“开始动画”的按钮，点击后需要修改 isStart 状态来触发 Canvas 绘制。
很多旧代码是这样的：
// ❌ 错误写法：Vue 2 Options API 风格，在 Vue 3 setup 中直接照搬
export default {data() {return {isStart: false,ctx: null}},methods: {startAnimation() {// 这里的 this 指向 Vue 实例，可以访问 datathis.isStart = true;// 假设这里有一个获取 Canvas 上下文的逻辑this.ctx = document.getElementById('myCanvas').getContext('2d');// 触发渲染this.render();},render() {// 依赖 this.ctxif (!this.ctx) return;this.ctx.clearRect(0, 0, 500, 500);// ... 绘制逻辑}}
}当你把这段逻辑强行迁移到 Vue 3 的 script setup 中时，如果你还保留 this，或者试图在普通函数里通过 this 访问响应式变量，结果就是 undefined。因为 Vue 3 的 Composition API 中，setup 函数返回的上下文并不像 Options API 那样自动绑定 this。更关键的是，如果你把逻辑提取到一个独立的工具函数里，this 指向就变成了调用该函数的对象，而不是 Vue 组件实例。
正确写法与对比
在 Vue 3 中，我们直接使用 ref 或 reactive 来管理状态，函数通过闭包访问这些变量，完全不需要 this。
// ✅ 正确写法：Vue 3 Composition API 风格
import { ref, onMounted } from 'vue';export default {setup() {const isStart = ref(false);const ctx = ref(null);const startAnimation = () = {// 直接操作 ref 的 .valueisStart.value = true;const canvas = document.getElementById('myCanvas');ctx.value = canvas.getContext('2d');render();};const render = () = {// 通过闭包访问 ctx.value，而不是 this.ctxif (!ctx.value) return;ctx.value.clearRect(0, 0, 500, 500);// ... 绘制逻辑// 这里可以添加情人节相关的绘制，比如爱心轨迹ctx.value.beginPath();ctx.value.arc(250, 250, 100, 0, Math.PI * 2);ctx.value.stroke();};// 生命周期钩子也变了，不再是 mounted，而是 onMountedonMounted(() = {console.log('组件挂载完成，初始化 Canvas');});return {isStart,startAnimation};}
}核心差异：Vue 2： 依赖 this 隐式绑定，状态在 data 中，方法在 methods 中。
Vue 3： 依赖闭包显式引用，状态通过 ref 显式声明，方法直接在 setup 内部定义。避坑建议： 迁移代码时，全局搜索 this.，逐行检查其指向。如果 this 指向的是组件实例，请将其替换为对应的 ref 变量。如果 this 指向的是当前对象（如在类中），则需保留。
坑点二：Canvas 绘制性能陷阱与 requestAnimationFrame 的滥用
现象与根本原因
【情人节表白】的核心视觉效果通常是粒子效果或爱心轨迹动画。旧代码中，为了实现平滑动画，博主使用了 setInterval 来定时重绘 Canvas。
// ❌ 错误写法：使用 setInterval 进行动画循环
let animationTimer;const startAnimation = () = {// ... 初始化逻辑animationTimer = setInterval(() = {render();}, 16); // 大约 60fps
};const stopAnimation = () = {clearInterval(animationTimer);
};这种写法在低端设备上会导致严重掉帧，而且 setInterval 无法感知浏览器的刷新率。更致命的是，在 Vue 3 中，如果组件被卸载（比如用户快速切换页面），setInterval 不会自动清除，导致内存泄漏和后台持续占用 CPU。这是很多 H5 项目“看着能用，但手机发烫”的根本原因。
根据 MDN Web Docs 关于 requestAnimationFrame 的说明，浏览器会尽可能以显示器的刷新率来执行回调函数，并且会在页面不可见时自动暂停，这是性能优化的最佳实践。
正确写法与复现修复
我们需要将 setInterval 替换为 requestAnimationFrame，并确保在组件卸载时取消请求。
// ✅ 正确写法：使用 requestAnimationFrame 和 onUnmounted 清理
import { ref, onMounted, onUnmounted } from 'vue';export default {setup() {const isStart = ref(false);let animationFrameId = null;const render = () = {// 获取上下文const canvas = document.getElementById('myCanvas');if (!canvas) return;const ctx = canvas.getContext('2d');// 清除画布ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制爱心或粒子drawHeart(ctx);// 如果动画还在进行，请求下一帧if (isStart.value) {animationFrameId = requestAnimationFrame(render);}};const startAnimation = () = {isStart.value = true;render(); // 启动第一帧};const stopAnimation = () = {isStart.value = false;if (animationFrameId) {cancelAnimationFrame(animationFrameId);animationFrameId = null;}};onMounted(() = {// 初始化 Canvas 尺寸等});// ⚠️ 关键：必须在组件卸载时清理，防止内存泄漏onUnmounted(() = {stopAnimation();});return {startAnimation,stopAnimation};}
}function drawHeart(ctx) {// 具体的绘制逻辑，比如使用贝塞尔曲线画爱心ctx.beginPath();// ... 绘制代码ctx.stroke();
}核心差异：旧写法： setInterval 固定时间间隔，不感知屏幕刷新率，组件卸载后不清理。
新写法： requestAnimationFrame 同步屏幕刷新率，页面隐藏时自动暂停，onUnmounted 确保资源释放。避坑建议： 凡是涉及连续动画的代码，一律禁用 setInterval。养成习惯，只要用了 requestAnimationFrame，就必须配一个 onUnmounted 或 beforeUnmount 来 cancelAnimationFrame。
坑点三：ECharts 5 升级后的配置项变更与响应式冲突
现象与根本原因
很多【情人节表白】页面会用 ECharts 画一个“心跳曲线”或“玫瑰图”。旧代码使用的是 ECharts 4.x 版本，配置项中使用了 graphic 组件来添加静态文字或图标。
在 ECharts 5.0 中，为了优化性能，graphic 组件的行为发生了微调，更重要的是，当我们将 ECharts 实例挂载到 Vue 3 的响应式系统上时，如果直接操作 DOM 或频繁 setOption，会导致渲染循环。
常见错误是：在 watch 中直接调用 chart.setOption()，但没有处理 ECharts 实例的销毁与重建。
// ❌ 错误写法：ECharts 4 风格 + Vue 3 响应式冲突
const chart = ref(null);onMounted(() = {const dom = document.getElementById('chart');chart.value = echarts.init(dom);// 直接设置旧版配置chart.value.setOption({title: { text: '我的心跳' },// ... ECharts 4 配置});
});// 监听数据变化
watch(() = props.heartRate, (newVal) = {// 每次心跳数据变化都 setOption，且没有处理 resizechart.value.setOption({series: [{ data: [newVal] }]});
});问题在于：ECharts 5 对 graphic 的引用方式有变，旧配置可能失效。
没有处理窗口 resize 事件，导致 H5 在手机上旋转屏幕时图表变形。
组件卸载时没有 dispose ECharts 实例，导致 Canvas 残留。正确写法与完整示例
我们需要使用 ECharts 5 的推荐配置，并封装一个健壮的初始化函数。
// ✅ 正确写法：ECharts 5 兼容 + 完善的生命周期管理
import * as echarts from 'echarts';
import { ref, onMounted, onUnmounted, watch } from 'vue';export default {props: {heartRate: { type: Number, default: 60 }},setup(props) {const chartDom = ref(null);let myChart = null;const initChart = () = {if (!chartDom.value) return;// 销毁旧实例，防止重复初始化if (myChart) {myChart.dispose();}myChart = echarts.init(chartDom.value);// ECharts 5 配置，使用新的 graphic 语法或 tooltip 替代const option = {title: {text: '实时心跳',left: 'center'},xAxis: { type: 'category', data: [] },yAxis: { type: 'value' },series: [{name: '心率',type: 'line',smooth: true,data: [props.heartRate]}],// 如果是 5.0+，graphic 配置需检查兼容性graphic: [{type: 'text',left: '10',top: '10',style: { text: '💖', fontSize: 20 }}]};myChart.setOption(option);};const handleResize = () = {if (myChart) {myChart.resize();}};onMounted(() = {initChart();// 监听窗口大小变化，解决 H5 适配问题window.addEventListener('resize', handleResize);});onUnmounted(() = {// 移除事件监听window.removeEventListener('resize', handleResize);// 销毁 ECharts 实例if (myChart) {myChart.dispose();myChart = null;}});// 监听心率变化，使用 debounce 防止频繁重绘watch(() = props.heartRate, (newVal) = {if (myChart) {myChart.setOption({series: [{ data: [newVal] }]});}});return { chartDom };}
}核心差异：旧写法： 缺乏 dispose，未处理 resize，配置项可能不兼容 ECharts 5。
新写法： 完善的生命周期管理，dispose 清理实例，resize 监听适配 H5，配置项符合 ECharts 5 规范。避坑建议：永远 dispose： 任何第三方图表库，在 Vue 3 的 onUnmounted 中必须调用销毁方法。
Resize 监听： H5 项目务必监听窗口 resize 并调用图表的 resize 方法。
版本检查： 升级 ECharts 时，务必查阅官方迁移指南，特别是 graphic、tooltip 等核心组件的变更。总结与规避建议
这三个坑，看似独立，实则都指向同一个问题：缺乏对框架生命周期的敬畏。Vue 3 的 Composition API 更灵活，但也更“原始”，它不再像 Vue 2 那样帮你做很多隐式处理。你需要显式地管理每一个资源：从 ref 的创建，到 requestAnimationFrame 的取消，再到 ECharts 实例的销毁。
对于转岗的开发者来说，不要只盯着“功能实现”，更要盯着“资源释放”。一个没有内存泄漏的【情人节表白】页面，比一个炫酷但让手机发烫的页面更值得炫耀。
这个知识点你面试被问过吗？留言说说