Javascript Vue失去反应性

我不明白为什么这个简单的事情不反应。 看来我错过了一些Vue的基础

<template>
    <div>
        {{connection_status}}
    </div>
</template>
<script>
export default {
    data() {
        return {
            connection_status: 'loading',
        };
    },
    created() {
        Echo.connector.socket.on('connect', function(){
            this.connection_status = 'connected'; 
            console.log(this.connection_status );   
        });
        Echo.connector.socket.on('disconnect', function(){
            this.connection_status = 'disconnected'; 
            console.log(this.connection_status );   
        });
    },  
}
</script> 

但是在第页

loading

当断开连接时也会触发相同的事件。 在控制台中：

disconnected

第页

loading

---

如果我理解文档，你应该使用挂载的钩子而不是创建的钩子：

如果我理解文档，你应该使用挂载的钩子而不是创建的钩子：

你的问题是回调函数中的钩子没有引用Vue实例。您应该改用箭头函数

created() {
        Echo.connector.socket.on('connect', ()=>{
            this.connection_status = 'connected';
            console.log(this.connection_status );   
        });
        Echo.connector.socket.on('disconnect', ()=>{
            this.connection_status = 'disconnected'; 
            console.log(this.connection_status );   
    });
},

或者您可以将其分配给一个变量并在回调函数中使用

created() {
        const vm = this;
        Echo.connector.socket.on('connect', function(){
            vm.connection_status = 'connected';
            console.log(vm.connection_status );   
        });
        Echo.connector.socket.on('disconnect', function(){
            vm.connection_status = 'disconnected'; 
            console.log(vm.connection_status );   
    });
},

您的问题是回调函数中的这一部分不引用Vue实例。您应该改用箭头函数

created() {
        Echo.connector.socket.on('connect', ()=>{
            this.connection_status = 'connected';
            console.log(this.connection_status );   
        });
        Echo.connector.socket.on('disconnect', ()=>{
            this.connection_status = 'disconnected'; 
            console.log(this.connection_status );   
    });
},

或者您可以将其分配给一个变量并在回调函数中使用

created() {
        const vm = this;
        Echo.connector.socket.on('connect', function(){
            vm.connection_status = 'connected';
            console.log(vm.connection_status );   
        });
        Echo.connector.socket.on('disconnect', function(){
            vm.connection_status = 'disconnected'; 
            console.log(vm.connection_status );   
    });
},

---

在javascript中，函数是一个对象。使用函数{}定义了一个新的对象作用域，并因此定义了一个新的作用域。您正在将该值指定给函数上的connection_status属性，而不是vue组件

最佳实践是使用箭头函数，除非您需要一个新的函数作用域，因为箭头函数从定义它们的作用域继承了这个作用域

Echo.connector.socket.on'connect'，=>{ this.connection_status='connected'； console.logthis.connection_状态； }; Echo.connector.socket.on'disconnect'，=>{ this.connection_status='disconnected'； console.logthis.connection_状态； };

---

在javascript中，函数是一个对象。使用函数{}定义了一个新的对象作用域，并因此定义了一个新的作用域。您正在将该值指定给函数上的connection_status属性，而不是vue组件

最佳实践是使用箭头函数，除非您需要一个新的函数作用域，因为箭头函数从定义它们的作用域继承了这个作用域

Echo.connector.socket.on'connect'，=>{ this.connection_status='connected'； console.logthis.connection_状态； }; Echo.connector.socket.on'disconnect'，=>{ this.connection_status='disconnected'； console.logthis.connection_状态； };