watch避坑，使用computed进行处理数据

业务场景：在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，将显示完整的文本。