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

news2024/9/27 9:27:14

业务场景：在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>
```
1. 创建一个计算属性（例如 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，将显示完整的文本。