VueJS 渲染没有被调用

Question

At work we are working with VueJS and we want to render one element with the contents from a 2D array. This needs 2 for loops to iterate through which isn't possible with a template. We found out we can do this with the render() function.

Our code (but simplified a bit) is:

export default {
    name: 'od-table',
    data() {
        return {
            testData: []
        }
    },
    render() {
        console.log("render function")
    }
};

When we include this component in the project the render function doesn't get called. I can see the component has loaded because I can read the test-data. No logs or any other sign the render function has been called.

It could be it's an obvious mistake since we have never got this working before, but since this is something we have to use for this problem we would like to know what is wrong with the code.

Answer 1

Given it worked when you recreated your component file from scratch, the issue might have been that in your original file you had mistakenly left a section. That's what happened to me. If your component comes with its own <template> , it will be used for rendering and your render() function will never get called at all.

Answer 2

Any particular reason why you're using render ? You might be looking for mounted .

Here is a complete list of lifecycle hooks for Vue.js 2.0. https://v2.vuejs.org/v2/api/#Options-Lifecycle-Hooks

Answer 3

我仍然不知道出了什么问题，但是删除组件并在新文件中复制旧代码似乎可以解决问题。