业务场景：在vue中监听el-input 中的字数有没有超过60，如果超过60字时将60后面的字变为 “>>” 符号，以此实现预览苹果手机推送摘要场景。

• 错误：开始的逻辑是使用watch监听，检查length超过60直接 加上符号，如下：

  watch: {dataInfo: {handler(val) {if(val.length>60) {this.dataInfo.description = val.concat('>>')}},deep: true}
  }// ERROR: You may have an infinite update loop in watcher with expression。
  // 看了一下错误知道了，犯了初级错误，一边监听一边更改值，会直接陷入死循环。
  

• 解决：使用 computed计算属性进行监听赋值，具体如下：

  1. 在 data 中定义一个用于保存输入文本的变量（例如 textInput），并初始化为空字符串。
  2. 在 el-input 组件上使用 v-model 指令将输入的文本绑定到 textInput 变量：

  <el-input v-model="textInput"></el-input>
  

  3. 创建一个计算属性（例如 trimmedText）来截取前60个字符并添加 “>>” 符号：

  computed: {trimmedText() {if (this.textInput.length > 60) {return this.textInput.substring(0, 60) + ">>";} else {return this.textInput;}}
  }
  

  1. 在模板中使用计算属性 trimmedText 来显示处理后的文本：

  <p>{{ trimmedText }}</p>
  

  这样，当在 el-input 中输入的文本长度超过60时，计算属性 trimmedText 会自动截取前60个字符并在末尾添加 “>>” 符号。如果输入的文本长度不超过60，将显示完整的文本。