vue3.0实战,vue3例子,vue3.0用法,vue3jsx,vue3.0 教程,vue3使用教程
Vue 3.0 实例方法是指挂载在 Vue 实例上的一些方法，可以通过 this 访问。这些方法是 Vue 提供给开发者使用的常用工具，用于管理组件状态、处理数据等。

以下是几个常用的 Vue 3.0 实例方法及其简要说明：

1. $watch：监视一个表达式或函数并在值变化时执行回调函数。
javascript
// 声明实例
const vm = Vue.createApp({
data() {
return {
message: 'Hello, Vue!'
}
},
created() {
// 监视 message 变化，并在每次变化时打印消息
this.$watch('message', (newVal, oldVal) => {
console.log(message changed from ${oldVal} to ${newVal})
})
}
}).mount('#app')


2. $emit：触发当前实例上的事件。
html
<!-- 组件模板 -->
<template>
<button @click="handleClick">点击我触发事件</button>
</template>

<script>
export default {
methods: {
handleClick() {
// 触发名为 "my-event" 的事件，同时传递参数
this.$emit('my-event', 'example arg')
}
}
}
</script>


3. $refs：访问组件子元素或父元素。
html
<!-- 组件模板 -->
<template>
<div ref="myDiv">这是一个 div 元素</div>
</template>

<script>
export default {
mounted() {
// 访问子元素
console.log(this.$refs.myDiv)
// 修改子元素样式
this.$refs.myDiv.style.color = 'red'
}
}
</script>


这些实例方法只是 Vue 3.0 提供的众多工具之一，更多详细内容可以查阅官方文档。