vue3用javascript实现1、实现整体页面的布局效果实现内容 2、完成消息添加功能，字数限制效果，高亮效果等实现功能 3、完成任务添加，添加任务到列表中去，默认标记为未读消息 4、完成消息切换功能实现，效果参考图片 完成组件拆分，表单和列表拆分组件。代码

Vue3 使用 JavaScript 实现上述功能可以按照以下步骤进行：

1. **整体页面布局**:
- 使用 Vue 的 `template` 或者模板字符串结合 CSS 可以轻松地控制页面布局。你可以创建一个 `App.vue` 文件，设置一个根组件，利用 `v-for` 和 `v-bind:class` 来动态渲染布局。

<template>
  <div class="container">
    <router-view></router-view> <!-- 根据路由显示内容 -->
  </div>
</template>

<style>
.container {
  display: flex;
  // 根据需要设置其他布局样式
}
</style>

2. **消息添加功能**:
- 创建一个 `MessageForm.vue` 组件，包含输入框、字数限制计数器和高亮文本的逻辑。
- 通过 `v-model` 监听输入并验证字数。

<template>
  <form @submit.prevent="addMessage">
    <input v-model="message" maxlength="100" :class="{ 'text-highlight': isExceededLimit }" />
    <p>{{ message剩余字数 }}</p>
    <button type="submit">发送</button>
  </form>
</template>

<script>
export default {
  data() {
    return { message: '', isExceededLimit: false };
  },
  methods: {
    addMessage() {
      if (this.message.length <= 100) {
        this.$emit('message-added', this.message);
        this.message = '';
      }
    }
  }
};
</script>

3. **任务添加**:
- 创建 `TaskList.vue` 组件，监听事件从外部传递的任务，并将其添加到列表中。
- 初始化时标记所有任务为未读。

<template>
  <ul>
    <li v-for="(task, index) in tasks" :key="index" :class="{ unread: task.readStatus === 'unread' }">
      {{ task.title }}
    </li>
  </ul>
</template>

<script>
export default {
  props: ['tasks'],
  computed: {
    unreadTasks() {
      return this.tasks.filter(task => task.readStatus === 'unread');
    }
  }
};
</script>

4. **消息切换功能**:
- 可以创建一个 `MessageItem.vue` 组件，包含开关按钮实现状态切换。在点击时更改任务的 `readStatus` 属性。

<template>
  <button @click="markAsRead">{{ isRead ? '已读' : '未读' }}</button>
</template>

<script>
export default {
  data() {
    return { isRead: true };
  },
  methods: {
    markAsRead() {
      this.isRead = !this.isRead; // 切换 readStatus
      this.$emit('read-status-changed', this.isRead); // 触发外部更新
    }
  }
};
</script>

5. **组件拆分**:
- 将表单、列表和状态管理（如读状态）分开，分别创建 `FormComponent.vue`, `ListComponent.vue`, 和 `TaskManager.vue`。

现在，将这些组件组合到主 App 中，通过父组件传入数据和事件处理。记得导入相应的路由配置以便在不同路径下展示这些组件。