Vue学习：9.watch监听器

"watch" 监听器是一种在 Vue.js 中用于监视数据变化并执行相应操作的机制。它是 Vue 实例的一个选项，允许你监视指定的数据，并在数据变化时执行特定的逻辑。通常情况下，"watch" 监听器用于响应数据的变化，例如当数据发生变化时执行异步操作、触发其他方法或更新其他数据等。

简单写法：

watch: {
    // 当数据发生变化时，触发执行
    数据属性名(newValues, oldValue){
    业务逻辑或者异步操作
  }
}

完整写法：

"watch" 监听器的完整写法可以包含更多的选项和配置。比如：deep: true 对复杂类型深度检测；immediate: true 初始化时立即执行一次等。

watch: {
    count: {
      handler(newValue, oldValue) {
        // 在这里执行逻辑操作
      },
      immediate: true, 
      deep: true 
    }
}

实例：传译器

实现功能：

主体部分是两个文本域，左侧接受输入，右侧实时更新以显示根据左侧输入内容生成的“传译”结果。

思路：

左侧文本域使用v-model绑定用户输入，右侧监听左侧输入，然后延时显示。

代码：

html：

<div id="app">
        <h3>翻译</h3>
        <textarea v-model="words" name="input" rows="10"></textarea>
        <textarea name="output" rows="10">{{ result }}</textarea>
</div>

js：

<script>
        const app = new Vue({
            el: '#app',
            data: {
                words: '',
                result: '',
                timer: null
            },
            // 监听器：当数据发生变化，立马运行
            // 防抖：延时操作
            watch :{
                words(newValues){
                    clearInterval(this.timer),
                    this.timer = setInterval(()=>{
                        this.result = newValues
                    },1000)
                }
            }
            
        })
</script>

补充：

实例中数据会频繁变化，每次数据变化就立即更新界面，会导致频繁的重绘，从而影响性能。通过设置定时器，可以将多次更新合并成一次，减少了界面的重绘次数，提高了性能。

setInterval()使用：

setInterval() 是 JavaScript 中的一个函数，用于在指定的时间间隔内重复执行指定的代码。它的基本语法如下：

setInterval(function, milliseconds);

• function：要执行的函数或要执行的代码块。
• milliseconds：时间间隔，以毫秒为单位。表示 function 被执行的时间间隔。

setInterval()方法会在每个间隔周期内重复执行指定的函数，直到 clearInterval() 方法被调用或页面被关闭。如果你想停止定时器的执行，可以使用 clearInterval() 函数。