提一个Vue.js的严重问题,data中的其中一个属性重新赋值,vue实例的指令都会重新执行,是什么情况?

Vue实例中的data属性中的其中一个属性重新赋值,关联了vue实例的指令都会重新执行,是什么情况?

如下代码,我只是想更新 msg 字段的值,但是整个id=’app’下的和Vue的指令和属性有关联的操作都会重新执行一次??

<div class="container">
    <div id="app">
        <div v-for="item in list">
            <div> {{item.name}} </div>
            <div>{{Math.random()}}</div>
        </div>
        <div>{{Math.random()}}</div>
        <div>{{msg}}</div>
        <input type="text" v-model='msg'>
    </div>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            list: [{ name: "I am Tom" }, { name: "I am Mary" }],
            msg: "hello"
        }
    })

</script>

上面代码,。只要我修改msg的值,即使v-for没有关联到msg值,v-for都会重新执行,还有其他指令包括v-text v-bind等等,都会重新执行一遍。这样不会很影响性能吗?还是我写错了? 我刚学习vue.js 。求教!

回答:

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div class="container">
        <div id="app">
            <div v-for="item in list">
                <div> {{ item.name }} </div>
                <div>computed: {{ random }}</div>
                <div>method: {{ getRandom() }}</div>
            </div>
            <div>computed: {{ random }}</div>
            <div>method: {{ getRandom() }}</div>
            <div>{{ msg }}</div>
            <input type="text" v-model='msg'>
        </div>
    </div>

    <script src="http://cdn.bootcss.com/vue/2.1.0/vue.min.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                list: [{ name: "I am Tom" }, { name: "I am Mary" }],
                msg: "hello"
            },
            methods: {
                getRandom() {
                    return Math.random()
                }
            },
            computed: {
                random() {
                    return Math.random()
                }
            }
        })
    </script>
</body>

</html>

回答:

你并没有说你是怎么修改msg的…

假如你是直接修改代码的

webpackwatch到文件变化,重新打包肯定会再执行一遍啊。

假如你是通过逻辑更新,如组件通讯等方式

按照vue的机制,是只会更新关联元素的。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注