Vue2组件数据更新后未触发渲染问题求助

我帮你定位到了两个导致组件无法触发渲染的核心问题，下面逐一说明并给出修复方案：

问题1：模板中错误使用this访问组件属性 #

Vue模板的作用域已经直接绑定到组件实例，因此在模板里访问组件的响应式属性时，不需要添加this.前缀。你当前的模板里写了v-bind:src="this.src"，这会导致Vue无法正确识别这个响应式绑定，即便this.src的数据已经更新，视图也不会同步刷新。

正确的写法应该去掉this.，直接使用属性名：

template: '<div><h3>Hello {{name}} {{src}}</h3><img :src="src" /></div>'

（注：:src是v-bind:src的简写形式，Vue中推荐使用这种更简洁的写法）

问题2：组件data函数定义不符合Vue规范 #

Vue组件的data必须是一个无参数的函数，因为这个函数是由Vue内部调用的，不会传入你自定义的name和src参数。虽然这个问题不会直接导致渲染失败，但会造成代码逻辑混乱，不符合Vue的组件开发规范，需要修正：

data: function() {
    return {
        name : "Image1",
        src : "https://via.placeholder.com/250"
    }
},

修复后的完整组件代码 #

Vue.component('framer-deal', {
    data: function() {
        return {
            name : "Image1",
            src : "https://via.placeholder.com/250"
        }
    },
    created: function () {
        eventHub.$on('clickedImage', this.updateimage)
    },
    methods:{
        updateimage : function(imgsrc) {
            this.src = imgsrc;
            this.name = imgsrc;
            console.log("thumbnail", this.$data.name)
        }
    },
    template: '<div><h3>Hello {{name}} {{src}}</h3><img :src="src" /></div>'
})

为什么这样修改后就能正常渲染？ #

当你去掉模板中的this.后，Vue的响应式系统可以正确追踪src和name属性的变化。一旦updateimage方法更新了这两个属性，Vue会立即检测到数据变更，并自动触发组件的重新渲染，视图也就会同步显示最新的数据了。

内容的提问来源于stack exchange，提问作者PHearst