十五、ECharts可视化库的使⽤

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")
    }
  }
}

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

 4、全局Mixin

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

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

类似于 Mixin

extends demo：

 

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

  函数的参数:

  setup函数有两个参数：

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

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

  attrs: 所有的非 prop 的attribute

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

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

9、setup 的返回值

可以在模板template中被使用

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

 

 setup 返回值的使用：

10、setup源码的阅读

runtime-core

11、响应式api  reactive的使用 

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

12、ref api

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

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

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

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

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

14、readonly 只读的api

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

 
<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>