导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

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'
});

onBeforeUnmount 和 onUnmounted

• onBeforeUnmount
  • 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的
  • 使用场景
    • 清理资源：取消定时器、解绑事件、移除监听器、关闭连接等操作，确保组件在销毁前释放所有占用的资源。
• onUnmounted
  • 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载
  • 使用场景
    • 确认销毁逻辑：通常用于记录日志、完成某些任务状态更新，或在完全销毁后执行操作（如果需要）。

App.vue

<template>
  <div>
    <Item
      v-for="item of data"
      :key="item.id"
      :item="item"
      @remove="remove"
    />
  </div>
</template>
<script>
import { ref } from 'vue';
import Item from '@/components/Item.vue';
export default {
  name: 'App',
  components: {
    Item
  },
  setup() {
    const data = ref([
      {
        id: 1,
        title: 'Lance'
      },
      {
        id: 2,
        title: 'GC'
      }
    ]);
    const remove = (id) => {
      data.value = data.value.filter(v => v.id !== id);
    }
    return {
      data,
      remove
    }
  }
}
</script>

Item.vue

<template>
  <li>
    <span>{{ item.title }}</span>
    <button @click="remove(item.id)">remove</button>
  </li>
</template>
<script>
import { onBeforeUnmount, onUnmounted } from '@vue/runtime-core';
export default {
  name: 'Item',
  props: {
    item: Object
  },
  emits: ['remove'],
  setup(props, ctx) {
    const remove = (id) => {
      ctx.emit('remove', id);
    }

    onBeforeUnmount(() => {
      console.log(`'onBeforeUnmount': ID为${props.item.id}的项「即将」被删除`);
    });
    onUnmounted(() => {
      console.log(`'onUnmounted': ID为${props.item.id}的项「正在」被删除`);
    });

     return {
      remove
    }
  }
}
</script>

onErrorCaptured

• 子组件出错，父组件可以捕获问题

Item.vue 注释掉 props item 的声明

<template>
  <li>
    <span>{{ item.title }}</span>
    <button @click="remove(item.id)">remove</button>
  </li>
</template>
<script>
import { onBeforeUnmount, onUnmounted } from '@vue/runtime-core';
export default {
  name: 'Item',
  // props: {
  //   item: Object
  // },
  emits: ['remove'],
  setup(props, ctx) {
    const remove = (id) => {
      ctx.emit('remove', id);
    }

    onBeforeUnmount(() => {
      console.log(`'onBeforeUnmount': ID为${props.item.id}的项「即将」被删除`);
    });
    onUnmounted(() => {
      console.log(`'onUnmounted': ID为${props.item.id}的项「正在」被删除`);
    });

     return {
      remove
    }
  }
}
</script>

App.vue 监听 onErrorCaptured

<template>
  <div>
    <Item
      v-for="item of data"
      :key="item.id"
      :item="item"
      @remove="remove"
    />
  </div>
</template>
<script>
import { onErrorCaptured, ref } from 'vue';
import Item from '@/components/Item.vue';
export default {
  name: 'App',
  components: {
    Item
  },
  setup() {
    const data = ref([
      {
        id: 1,
        title: 'Lance'
      },
      {
        id: 2,
        title: 'GC'
      }
    ]);
    const remove = (id) => {
      data.value = data.value.filter(v => v.id !== id);
    }
    onErrorCaptured((e) => {
      console.log(e);
    });
    return {
      data,
      remove
    }
  }
}
</script>

onRenderTracked 和 onRenderTriggered

• render 时触发 onRenderTracked
• render 重新渲染时，触发 onRenderTriggered
• 开发环境下使用

<template>
  <div>
    <Item
      v-for="item of data"
      :key="item.id"
      :item="item"
      @remove="remove"
    />
  </div>
</template>
<script>
import { onErrorCaptured, onRenderTracked, onRenderTriggered, ref } from 'vue';
import Item from '@/components/Item.vue';
export default {
  name: 'App',
  components: {
    Item
  },
  setup() {
    const data = ref([
      {
        id: 1,
        title: 'Lance'
      },
      {
        id: 2,
        title: 'GC'
      }
    ]);
    const remove = (id) => {
      data.value = data.value.filter(v => v.id !== id);
    }
    onRenderTracked((e) => {
      debugger;
    });
    onRenderTriggered((e) => {
      debugger;
    });
    return {
      data,
      remove
    }
  }
}
</script>

DOM 更新时机

import { nextTick } from 'vue'

function increment() {
  state.count++
  nextTick(() => {
    // 访问更新后的 DOM
  })
}