Vue.js组件，主要实现了一个简单的聊天应用界面，主要功能实现聊天记录缓存在浏览器

它的功能包括：

1. 在页面加载时，从sessionStorage中获取保存的聊天记录，如果有聊天记录就顶部显示"聊天记录"。
2. 如果用户不输入，是不能添加聊天中，用户输入消息不等于空，点击“用户”按钮后，消息会添加到聊天记录中，并清空输入框。
3. 如果客服不输入，是不能添加聊天中，客服的消息不等于空会被自动添加到聊天记录中，显示为“中间”。
4. 当刷新浏览器，有聊天记录点击"聊天记录"的消息时，会触发toChat方法，就会显示之前聊天记录
5. 用户和客服的输入数据通过双向绑定v-model与组件的data属性进行同步。
6. deepEqual的函数，用于比较两个对象（obj1和obj2）是否深度相等。函数首先检查两个对象是否相同引用，如果相同则返回true。然后，它检查两个对象是否都是null，如果是则返回false。接下来，它检查两个对象是否都是非对象类型，或者是否是全局对象（window）或者节点类型为1（通常是DOM元素），如果是则返回false。然后，它获取obj1的所有键，并检查obj2是否有相同数量的键，如果没有则返回false。最后，它遍历obj1的所有键，并递归调用deepEqual函数来比较obj1和obj2中每个键的值，如果任何值不相等，则返回false。如果所有键的值都相等，则返回true。这个函数可以用于比较两个复杂对象的结构和内容是否完全相等，而不仅仅是引用相等。

7. 实现的代码：

   <template>
     <div style="padding: 20px">
       <div
         v-for="(item, index) in data"
         :key="index"
         style="
           width: 300px;
           height: 25px;
           border: 1px solid red;
           margin-bottom: 10px;
         "
       >
         <div v-if="item.name === '客服'">
           <p style="float: left; margin-left: 10px; color: blue">
             {{ item.name }}-{{ item.inputData }}
           </p>
         </div>
         <div v-else-if="item.name === '用户'">
           <p style="float: right; margin-right: 10px; color: green">
             {{ item.name }}-{{ item.inputData }}
           </p>
         </div>
         <div
           v-else-if="item.name === '中间'"
           @click="toChat"
           style="margin: auto; text-align: center; color: black"
         >
           {{ item.name }}-{{ item.inputData }}
         </div>
       </div>
       <div style="display: flex; margin-top: 20px">
         <a-input style="width: 200px" v-model="Userinput" /><a-button
           type="primary"
           @click="user"
           style="margin-left: 10px"
         >
           用户
         </a-button>
       </div>
       <div style="display: flex; margin-top: 20px">
         <a-input style="width: 200px" v-model="Userclient" /><a-button
           type="primary"
           @click="client"
           style="margin-left: 10px"
         >
           客服
         </a-button>
       </div>
     </div>
   </template>
   <script>
   export default {
     data() {
       return {
         data: [],
         Userinput: '',
         Userclient: '',
         jsons: []
       }
     },
     created() {
       this.loadChatData()
     },
     methods: {
       loadChatData() {
         this.jsons = JSON.parse(sessionStorage.getItem('jsons'))
         if (this.jsons !== null) {
           this.addToList({ name: '中间', inputData: '聊天记录' })
         }
       },
       user() {
        
         if(this.Userinput !== ''){
           this.addToList({ name: '用户', inputData: this.Userinput })
           this.saveChatData()
           this.Userinput = ''
         }
       
       },
       addToList(item) {
         this.data.push(item)
       },
       client() {
         if(this.Userclient !== ''){
           this.addToList({ name: '客服', inputData: this.Userclient })
           this.saveChatData()
           this.Userclient = ''
         }
         
       },
       saveChatData() {
         sessionStorage.setItem('jsons', JSON.stringify(this.data))
       },
       deepEqual(obj1, obj2) {
         if (obj1 === obj2) return true
         if (obj1 == null || obj2 == null) return false
         if (
           typeof obj1 !== 'object' ||
           obj1 === window ||
           obj1.nodeType === 1 ||
           obj2 === window ||
           obj2.nodeType === 1
         )
           return false
         let keys = Object.keys(obj1)
         if (Object.keys(obj2).length !== keys.length) return false
         for (let key in obj1) {
           if (!this.deepEqual(obj1[key], obj2[key])) return false
         }
         return true
       },
       toChat() {
         let arr1 = JSON.parse(sessionStorage.getItem('jsons'))
         let arr2 = this.jsons
    //  this.deepEqual(arr1, arr2)或者  JSON.stringify(arr1) === JSON.stringify(arr2);// 如果两个数组相同，该结果将为true，否则为false
         if (this.deepEqual(arr1, arr2) != true) {
           //arr2.concat(arr1) 或者 [...arr2, ...arr1] 这两行代码在大多数情况下效果是一样的，因为它们都是将两个数组连接在一起。然而，你应该注意它们在处理原始数组时的差异。
           // concat() 方法会创建一个新的数组，而不会影响原始数组。而[...arr2, ...arr1]这种方法也会创建一个新的数组，但是它是通过解构赋值实现的，这可能会影响原始数组。
           this.data = arr2.concat(arr1).filter((item) => item.name !== '中间')
         } else {
           this.data = arr2
         }
         this.saveChatData()
       }
     }
   }
   </script>
   
   <style></style>
   

   效果展示：

   20230927_104527