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的需求时,可以采用这样的方式。