VueJS调用HeaderreRender函数提示HeaderRender未定义如何解决

• 你把HeaderreRender函数定义在了Vue组件配置对象的外部，属于独立的全局作用域函数。JS执行函数内代码时，会顺着作用域链查找HeaderRender变量：这个函数自身没有声明该变量，全局作用域也不存在这个变量，自然会抛出ReferenceError。
• 存在额外的隐忧：组件data中定义的HeaderRender是组件实例的私有属性，本身就不在外部函数的可访问范围内；就算你提前解决了变量找不到的问题，外部函数里的this默认指向全局对象（非严格模式下）或者undefined（严格模式下），根本不会指向当前Vue组件实例，后续执行this.$nextTick同样会报错。

不要把组件的业务方法定义在组件配置外部，把重渲染逻辑挪到组件的methods选项中即可。在methods里定义的方法，Vue会自动把this绑定为当前组件实例，可以直接访问data里的响应式属性、实例挂载的$nextTick等方法。

修复后的完整代码如下：

export default {
  name: 'Home',
  components: {
    HeaderItem,
  },
  data() { 
    return {
      HeaderRender: true,
    };
  },
  methods: {
    HeaderreRender() {
      this.HeaderRender = false;
      this.$nextTick(() => {
        this.HeaderRender = true;
      });
    }
  }
}

模板中保持原有写法<HeaderItem v-if="HeaderRender" />即可，需要触发组件重渲染时，在组件内部通过this.HeaderreRender()调用对应方法就行。

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