vue3.0抽离公共方法，在需要的组件中使用

// message.js
import { ref, watch } from "vue";
export function message() {
 let msg = ref(123);
 watch(msg, (newVal) => {
 console.log("msg changed", newVal);
 });
 const changeMessage = () => {
 msg.value = "new Message";
 };
 return { msg, changeMessage };
}

<template>
 <div class="counter">
 <p>count: {{ count }}</p>
 <p>NewVal (count + 2): {{ countDouble }}</p>
 <button @click="inc">Increment</button>
 <button @click="dec">Decrement</button>
 <p>Message: {{ msg }}</p>
 <button @click="changeMessage()">change message</button>
 </div>
</template>
<script>
import { ref, computed, watch } from 'vue'
import { message } from './common/message'
export default {
 setup() {
 let count = ref(0)
 const countDouble = computed(() => count.value * 2)
 watch(count, newVal => {
  console.log('count changed', newVal)
 })
 const inc = () => {
  count.value += 1
 }
 const dec = () => {
  if (count.value !== 0) {
  count.value -= 1
  }
 }
 let { msg, changeMessage } = message()
 return {
  count,
  msg,
  changeMessage,
  inc,
  dec,
  countDouble
 }
 }
}
</script>