十五、ECharts可视化库的使⽤

时间:2022-10-17 07:58:25

1、composion API 的认识

vue3兼容vue2的写法

composion API 需要熟练掌握

2、Mixin 相同的代码逻辑进行抽取

  • Mixin 提供了非常灵活的方式,来分发vue组件中的可复用功能
  • 一个Mixin 对象可以包含任何组件选项
  • 当组件使用Mixin对象时,所有Mixin对象的选项将被 混合 进入该组件本身的选项中

Mixin 混入demo:

demoMix.js

export const demoMix = {
  data(){
    return {
      title:"hello mixin"
    }
  },
  created(){
    console.log("mixin 执行了")
  },
  methods:{
    foo(){
      console.log("foo click")
    }
  }
}

十五、ECharts可视化库的使⽤

3、【合并规则】如果mixin 和当前组件的选项发生了冲突,如何处理?

十五、ECharts可视化库的使⽤

 4、全局Mixin

  • 全局的Mixin 可以使用 app 的方法 mixin 来完成注册
  • 一旦注册,全局混入的选项将会影响每一个组件

十五、ECharts可视化库的使⽤

5、extends 【仅做了解,用的很少】

类似于 Mixin

extends demo:

十五、ECharts可视化库的使⽤

 十五、ECharts可视化库的使⽤

extends 和 mixin 在vue3中用的会越来越少的

6、composition API

vue2 是 Options API

vue3 是 Composition API

setup() 是真正去编写 Composition API 的地方

6.1、Options API 的弊端:【可读性差】

当我们实现一个功能时,这个功能对应的代码逻辑会被拆分到各个属性中

当我们的组件变得更大,更复杂时,逻辑关注点的列表就会增长,那么同一个功能的逻辑就会被拆分的很分散

尤其对于那些一开始就没有编写这些组件的人来说,这个组件的代码是难以阅读和理解的(阅读组件的其他人)

7、Options API的基本使用

写在setup函数中

8、setup函数:【setup函数中不能使用this】

setup 函数实在created前面调用的

setup 函数里面不能使用this

十五、ECharts可视化库的使⽤

  函数的参数:

  setup函数有两个参数:

  •   第一个参数: props  【父组件传递过来的属性】
  •   第二个参数: context

  函数的返回值 context 包含三个属性

  attrs: 所有的非 prop 的attribute

  slots: 父组件传递过来的插槽(这个在以render函数返回时会有作用,后面会讲到)

  emit : 组件内部需要发出事件时会用到emit (因为我们不能访问this,所以不可以通过this.$emit发出事件)

十五、ECharts可视化库的使⽤

9、setup 的返回值

可以在模板template中被使用

也就是说可以通过setup的返回值来代替data选项

 十五、ECharts可视化库的使⽤

 setup 返回值的使用:

十五、ECharts可视化库的使⽤

10、setup源码的阅读

runtime-core

11、响应式api  reactive的使用 

reactive 的返回值在被使用时会被劫持,会用proxy

十五、ECharts可视化库的使⽤

12、ref api

reactive  对传入的类型有限制,要求必须传入一个对象或者数组类型

如果传入一个基本数据类型会报警告

ref会返回一个可变的响应式对象,该对象作为一个响应式的引用,维护着它内部的值,这就是ref名称的来源

它内部的值是在ref的value属性中被维护的

十五、ECharts可视化库的使⽤

13、模板中的解包是浅层解包,reactive可响应式对象,可以解包

14、readonly 只读的api

readonly 会返回原生对象的只读代理(也就是它依然还是一个Proxy,这是一个proxy的set方法被劫持,并不能对齐进行修改)

<template>
  <div>
    <h2>homeChild</h2>
    <button @click = "updateState">updateState</button>
  </div>
</template>

<script>
  import { reactive, ref, readonly } from 'vue'

  export default {
    setup(){
      const info1 = {name:"why"};
      const readonlyInfo1 = readonly(info1);

      const info2 = reactive({
        name:"zhangsan"
      })
      const readonlyInfo2 = readonly(info2);

      const info3 = ref("why");
      const readonly3 = readonly(info3)
      let updateState = ()=>{
        // readonly2.name = "yxx"
        readonly3.value = "yxx"
      }

      return {
        updateState
      }
    }
  }
</script>

<style scoped>

</style>