VUE3.0的基础构建及数据绑定和echarts插件引入

最近vue推出了3.0，展现出 vue3.0+TS 的不可抵挡之势。所以找了一下vue3.0的免费课程，记录一下笔记。

1.工程创建

这个没什么好说的，vue create projectname 然后根据自己需求勾选，当然vue版本选择3.0，ts也选上吧，也可以后续自行安装。

2.开始使用

进入工程发现，结构目录啥的跟原来还是一样，打开router/index.ts，也是没什么变化嘛！

但是，vue从2.0到3.0，可以说是发生了很大的变化，无论从思想还是写法。比如说：

• 没有data()了，变为setup()启动函数
• 响应式数据，需要reactive()来约束
• this 消失了
• 生命周期也有变化
• 双向数据绑定原理从object.defineProperty() 改为 proxy代理

废话不说了，下面是上课的时候做的记录。这只是在Home.vue中进行了书写。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    <div>{
   
   { name }}-{
   
   { id }}-{
   
   { age }}</div>
    <button @click="change">点我</button>
    <div id="main" ref="mycharts" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script >
// import { defineComponent } from 'vue';
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

import { reactive, toRefs, onMounted, ref } from "vue";
import echarts from "echarts";
import "echarts/map/js/china";

export default {
  // setup 启动函数
  setup(props, { root }) {
    // reactive 响应式数据 状态state
    const state = reactive({
      name: "xl",
      age: 26,
      id: "1",
      // 访问dom ref
      mycharts: ref(),
    });
    // 定义函数
    //定义一个对象 存储方法
    /*  const change = () => {
      state.age += 1;
      console.log(state.age);
    }; */
    const methods = {
      change() {
        state.age += 1;
        console.log(state.age);
      },
      login() {
        console.log("login");
      },
    };

    // echart 初始化
    const initCharts = () => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(state.mycharts);

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "ECharts 引入中国地图",
        },
        tooltip: {},
        legend: {
          data: ["中国地图"],
        },
        series: [
          {
            name: "",
            type: "map",
            map: "china",
            label: {
              show: true,
              color: "red",
              fontSize: 8,
            },
            itemStyle: {
              brrderColor: "yellow",
              areaColor: "skyblue",
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    };
    // 生命周期
    onMounted(() => {
      initCharts();
    });

    // 扩展运算符... 解构{} 会破坏reactive形成的响应式双向绑定，需要 toRefs 处理
    return { ...toRefs(state), ...methods };
  },
};
</script>

本人水平有限，如有错误，还望批评指正！vue3.0会持续跟进。。。

Nothing that has meaning is easy!