getCurrentInstance 获取当前组件实例

<template>
</template>
<script>
import { getCurrentInstance } from 'vue';
export default {
  name: 'App',
  setup() {
    const instance = getCurrentInstance();
    console.log(instance);
  }
}
</script>

setup 读取值

import { getCurrentInstance, ComponentInternalInstance } from 'vue';
 
const { appContext } = <ComponentInternalInstance>getCurrentInstance()
 
console.log(appContext.config.globalProperties.$env);
 
// 推荐第二种方式
 
import {ref,reactive,getCurrentInstance} from 'vue'
const app = getCurrentInstance()
console.log(app?.proxy?.$filters.format('js'))

options api 和 composition api 区别

import { onMounted } from 'vue';
export default {
  mounted() {}, // options api
  setup() {
    onMounted(() => {}); // composition api
  }
}

beforeCreate 和 created 由 setup 代替

• setup 就相当于 beforeCreate 和 created
  • 之前 vue2 中要写在这俩钩子中的内容，都应放进 setup 中去
• 下面钩子函数都应该写在 setup 中
  • 各种钩子函数中的回调，都会在 钩子函数 执行的同时立即执行

onBeforeMount、onMounted 和 onBeforeUpdate、onUpdated

• onBeforeMount
  • 在组件 DOM 实际渲染安装之前调用。在这一步中，根元素还不存在
• onMounted
  • 在组件的第一次渲染后调用，该元素现在可用，允许直接 DOM 访问
• onBeforeUpdate
  • 数据更新时调用，发生在虚拟 DOM 打补丁之前
• onUpdated
  • DOM更新后，updated 的方法即会调用

<template>
  <div>{{ count }}</div>
</template>
<script>
import {
  getCurrentInstance,
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  watchEffect
  } from 'vue';
export default {
  name: 'App',
  setup() {
    const count = ref(0);
    setTimeout(() => {
      count.value = 1;
    }, 1000);
    watchEffect(() => {
      console.log('watchEffect count value:', count.value);
    });
    onBeforeMount(() => console.log('onBeforeMount'));
    onMounted(() => console.log('onMounted'));
    onBeforeUpdate(() => console.log('onBeforeUpdate'));
    onUpdated(() => console.log('onUpdated'));
    return {
      count
    }
  }
}
</script>

把 watchEffect 中的 flush 设置为 post 时，watch在 beforeUpdate 之后执行

watchEffect(() => {
  console.log('watchEffect count value:', count.value);
}, {
  flush: 'post'
});