开发知识点

toRaw 与 markRaw

目的是不想使用响应式对象

1. toRaw，将一个响应式对象转为普通对象，对这个普通对象的操作不会引起页面更新，提高性能。
2. markRaw，标记一个对象，使其永远不会再成为响应式对象
   • 有些值不应被设置为响应式的，例如复杂的第三方类库等
   • 当渲染具有静态数据源的大列表时，跳过响应式转换可以提高性能

示例一

动态组件 is 在接收一个组件时，明确要求不能是一个响应式对象

import { ref, markRaw } from 'vue'
import Foo from './foo/index.vue'

const list = ref([
    {
        // ...
        component: markRaw(Foo)
    }
])

示例二

Vue3 封装 echarts 时，监听窗口大小变化时，调用 echarts resize() 函数更新图表，会发现报错：
TypeError: Cannot read properties of undefined (reading 'type')
原因是，vue3默认把 echarts 实例转为响应式proxy代理，致使 resize() 无法获取 coordSys.type
解决方案

import { ref, markRaw, onMounted } from 'vue'
import * as echarts from 'echarts'
import { EChartsOption, EChartsType } from 'echarts'

const chartRef = ref()
onMounted(() => {
    chartRef.value = markRaw(echarts.init(document.getElementById("chart")))
})

shallowRef

reactive 底层其实就是通过 ref 创建的；
默认情况下，无论是 ref 还是 reactive 都是深度监听；而 shallowRef / shallReactive 都是非深度监听，只会包装第一层的数据，如果想更改多层的数据，必须先更改第一层的数据，然后在去更改其他层的数据，这样视图上的数据才会发生变化。
所以，当我们试图将一个component组件 变成响应式时，vue3会发出警告：should be avoided by marking the component with markRaw or using shallowRef instead of ref -- 用 markRaw / shallowRef 标记组件

defineProps、defineEmits、defineExpose

defineProps

声明组件 props 传值

defineEmits

子组件声明暴露的事件

defineExpose

子组件暴露出去、让父组件访问的属性

// helloword.vue
import { ref, defineExpose } from 'vue'

const count = ref(123)
defineExpose({
   count
})

// Something.vue