Vue3轻量化使用

前言

最近有一个小需求，需要快速实现图表的可视化。看了一圈的技术方案，最终选定了网页端的Echarts配合ES6来实现。因为是个小功能，所以没有考虑创建专门的web工程来做。
拉取数据的时候，感觉到原生的ES6处理输入和界面很不方便，就想到的使用Vue3做增强，说干就干。

1. 准备环境

这里我使用的是js module的开发方式
第一步是从CDN网站下载vue的es库，放到本地，加快开发速度，方便。

//字节跳动CDN https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.esm-browser.js
//cdnjs https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.esm-browser.js
//https://unpkg.com/vue@3/dist/vue.esm-browser.js

import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

同时下载Echarts的js文件库，

2. 开始编程

接下来其实就是常规操作了。
按照官方的示例，分别初始化Echarts的canvas和Vue的appdom。
这里需要注意，如果同时使用Echarts和Vue，把他们的Dom放在不同的div下，防止初始化时的互相干扰。(工程经验，具体原理没研究)

<body>
    <div>
        <canvas id="main" width="500px" height="500px" />
    </div>
    <div>
        <div id="app"></div>
    </div>
</body>

vue的使用如下。
这里我使用的是组合式的方式。和原生ES6的fetch之间做数据交换，我使用的是ref()。
创建Module中的全局ref变量。在创建vue实例时，setup()把对应的ref变量返回出去。
同时，使用watch监听ref变化。

这样，vue和原生的ES6就可以互相传递数据，互相调用了。

<script type="module">
    import { createApp, ref, watch } from "./lib/vue.esm-browser.js";

    // vue和原生ES6之间传递消息的桥梁
    const teamid = ref("Raw js Vue Test")
    const title = ref("None Team")


    // 方式一: watch监听，让vue驱动原生ES6函数
    watch(teamid, (newVal) => {
        title.value = `Team id: ${newVal}`
        console.log("team: ", newVal);
        RawFunction()
    })


    const app = createApp({
        setup() {
            return { title }
        },
        methods: {
            // 方式二: 内部方法直接调用原生ES6函数，让vue驱动原生ES6动作
            DoAction() {
                console.log("DoAction");
                RawFunction()
            }
        }
    })
    app.mount('#app')

    function RawFunction(params) {
        console.log("RawFunction");
        // Echats的数据获取，更新等异步操作
        // 可以放到原生的ES6中去处理
    }

    // 方式一: 原生ES6向vue内部传值
    let url = "data/result.json"
    fetch(url).then(res => res.json()).then(data => {
        console.log(data);
        teamid.value = data.team_id
    })
</script>

3. 总结

这种组合方式属于是快速开发，快速验证。
这种开发的缺点也很明显，加载速度会慢，需要在浏览器端做渲染，只适合开发阶段前期验证，或者快速实现某些GUI的需求时，可以采用这样的方式。

posted @ 2025-08-04 14:31  Xdesigner  阅读(7)  评论(0)    收藏  举报