在 Vue 3.0 中，实例方法是直接在组件实例上调用的方法。以下是一些常见的实例方法：

1. $mount()

$mount() 方法手动挂载一个未挂载的 Vue 实例。在 Vue 3.0 中，不再推荐在组件中使用 $mount() 方法，因为通常情况下组件是通过编译器自动挂载的。
const app = Vue.createApp({ /* options */ });
const vm = app.mount('#app');

2. $destroy()

在 Vue 3.0 中，$destroy() 方法已被移除。组件的销毁通常由 Vue 的内部机制自动处理。

3. $forceUpdate()

$forceUpdate() 强制组件重新渲染。在 Vue 3.0 中，推荐使用响应式数据来触发重新渲染，而不是依赖于 $forceUpdate()。
export default {
  setup() {
    const forceUpdate = Vue.ref(0);

    const updateComponent = () => {
      forceUpdate.value += 1;
    };

    return {
      forceUpdate,
      updateComponent,
    };
  },
};

4. $nextTick()

$nextTick() 方法用于在 DOM 更新后执行回调函数。在 Vue 3.0 中，推荐使用 nextTick 函数，它是 Vue 的全局函数。
export default {
  setup() {
    const message = Vue.ref('Hello, Vue 3.0!');

    const updateMessage = () => {
      message.value = 'Updated message';

      Vue.nextTick(() => {
        console.log('DOM updated');
      });
    };

    return {
      message,
      updateMessage,
    };
  },
};

5. $emit()

$emit() 方法用于触发组件的自定义事件。
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', 'Event data');
    },
  },
};

6. $watch()

在 Vue 3.0 中，$watch() 方法已经被移除。使用 watch 函数来设置响应式数据的观察。
export default {
  setup() {
    const count = Vue.ref(0);

    Vue.watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    return {
      count,
    };
  },
};

7. $el

在 Vue 3.0 中，$el 属性仍然存在，但通常不推荐直接使用。
export default {
  mounted() {
    console.log(this.$el); // 当前组件的根元素
  },
};

8. $refs

$refs 属性用于访问具有 ref 特性的子组件和元素。
<template>
  <div ref="myDiv">This is a div</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv); // 对应的 DOM 元素
  },
};
</script>

这些实例方法和属性提供了一些用于在组件中进行操作的手段。在 Vue 3.0 中，一些实例方法发生了变化，例如 $destroy() 被移除，而一些新的函数和推荐使用的方式也被引入，以更好地适应 Composition API 的特点。在使用这些方法时，请查阅 Vue 3.0 的文档以获取最新的信息。


转载请注明出处：http://www.zyzy.cn/article/detail/574/Vue 3.0