vue 中使用 this 更新数据的一次问题记录

下面我就来详细讲解一下“vue 中使用 this 更新数据的一次问题记录”的完整攻略。

问题描述

在 Vue 应用中，开发者在更新数据时经常使用 this 关键字来代表当前组件的实例进行更新。然而，在一些特定的情况下，将 data 中的某个值赋值给 this 关键字绑定的变量，可能会导致另一个值意外地被更新。

分析原因

这个问题的根本原因在于，在 JavaScript 的函数作用域中，this 关键字可能会出现未绑定的情况。具体地说，在某些情况下，this 可能指向全局对象，而不是 Vue 组件实例对象，导致执行 this.variable = data 时，使用的是全局变量，而不是组件实例绑定的变量。

解决这个问题的一种通用方式是使用 bind 方法来将 this 绑定到组件实例上。这样，即便在函数调用时 this 的值被错误地绑定到了全局对象上，this.variable = data 仍然能够成功地更新组件数据。

示例说明

下面我们来看两个示例说明这个问题的具体原因以及如何进行bind绑定。

示例1

示例1中，我们有一个组件定义，然后我们在改变this.data变量的值时，会发现this.data一直为undefined:

<template>
    <div>{{count}}</div>
</template>

<script>
    export default {
        data() {
            return {
                count: 0
            }
        },
        methods: {
            updateCount() {
                this.count += 1
                console.log(this.count)
            },
            start() {
                setInterval(this.updateCount, 1000)
            }
        },
        mounted() {
            this.start()
        }
    }
</script>

在这个示例中，我们希望每隔一秒钟更新一次 count 的值并输出当前的值。然而，在实际运行中，我们会发现计数器一直没有变化，并输出 undefined，而不是期望的计数器值。

这个问题的原因是 setInterval 调用了 updateCount 方法，使得其执行上下文的 this 值指向了全局对象。在这种情况下，updateCount 方法中的 this.count 实际上是访问了全局对象上的一个变量，而不是组件实例的变量。解决这个问题最简单的方法就是使用函数绑定（bind）来确保 this 始终指向组件实例。

我们可以将 start 方法修改为以下的形式：

start() {
    setInterval(this.updateCount.bind(this), 1000)
}

这里我们通过使用 bind 方法，让 updateCount 方法始终绑定到这个 Vue 组件实例上。在这个绑定过程中，this 的值被设定为当前 Vue 组件实例，因此可以确保 this.count 访问的是组件实例上的 count 变量。

示例2

示例2中，我们有一个组件定义，然后我们在改变 this.name1 和 this.name2 的值时，发现 this.name1 改变后 this.name2 被修改了，说明我们的赋值操作对其他的变量产生了影响：

<template>
    <div>{{name1}}{{name2}}</div>
</template>

<script>
    export default {
        data() {
            return {
                name1: '',
                name2: ''
            }
        },
        mounted() {
            var name = 'Tom'
            this.name1 = name
            this.name2 = name
            name = 'Jerry'
            console.log(this.name1) // Tom
            console.log(this.name2) // Jerry
        }
    }
</script>

在这个示例中，我们希望将初始值分别赋给 name1 和 name2，并且将它们初始化都为 Tom。然而，在实际运行中，我们会发现输出值不是我们期望的结果。这里的问题是，name1 和 name2 的赋值操作实际上只是指向了同一个字符串，而不是把字符串的值复制到整个绑定的变量中。因此，当name变量的值被修改时，name1 和 name2 都会受到影响。

解决这个问题最简单的方法是使用 Object.assign 或者展开运算符来复制字符串变量的值。在我们的示例中，我们可以这样修改代码：

mounted() {
    var name = 'Tom'
    this.name1 = Object.assign('', name)
    this.name2 = Object.assign('', name)
    name = 'Jerry'
    console.log(this.name1) // Tom
    console.log(this.name2) // Tom
}

这里我们使用 Object.assign 来将 Tom 字符串复制给 this.name1 和 this.name2，而不是简单地指向同一个字符串。这样，在 name 变量的值被修改时，this.name1 和 this.name2 依然保持原样，不会被修改。