鍍金池/ 問答/HTML/ Vue的re-render的一些疑惑

Vue的re-render的一些疑惑

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Re-render</title>

    </head>

    <body>
        <div id="app">
            <div v-for="(item, index) in items" :key="index">
                <input v-if="index === 0" v-model="formData[item.key]" v-bind="item">
                <p v-else>{{item.key}}：{{Date.now()}}</p>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            new Vue({
                el: '#app',
                data: function() {
                    return {
                        items: [{
                            key: 'input'
                        }, {
                            key: 'Re-render'
                        }],
                        formData: {
                            input: ''
                        }
                    }
                }
            })
        </script>
    </body>
</html>

如上代碼。

我在div上加了key，而且有變化的也只是formData的內容，可是當我輸入框值發(fā)生變化時，p的內容還是被re-render了。

那么想問的就是怎么理解這個過程中Vue的patch計算呢？

還有我不想P也re-render，該怎么辦呢？

回答
編輯回答
艷骨

可以看看這個：

https://cn.vuejs.org/v2/guide...

P標簽被rerender的原因是Date.now()是一個method，雖然它沒有被定義在實例的methods里面。
而method會在每一次template重新渲染的時候觸發(fā)。

如果不想P也rerender，可以用computed。

2018年2月19日 10:25