关于Vue methods方法触发原理，在什么情况下methods会触发全部的方法？为什么？跟Vue的虚拟DOM有关吗？

Question

文档和很多视频都说，methods和computed的区别是，在触发methods里其中一个方法时，methods中其他的方法也会被触发。但是实际操作中发现，并不是所有情况下都会全部触发……各位大佬能解释一下吗？是我写的不对还是我理解的不对？
上代码：

    <div id="computed">
        <button v-on:click="age++">age点击</button>
        <button v-on:click="name++">name点击</button>
        <p>age : {{ showAge() }}, {{ a() }}</p>
        <p>name : {{ showName() }}, {{ b() }}</p>
        <p>{{ c() }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#computed',
            data: {
                name: 15,
                age: 5,
            },
            methods: {
                showAge () {
                    console.log('age');
                    return this.name;
                },
                showName () {
                    console.log(this.name)
                },
                a () {
                    console.log('a')
                },
                b () {
                    console.log('b')
                },
                c () {
                    console.log('c')
                }
            }
        })

例如上面的代码和图片，点击age按钮，在控制台可以看出age是在增加的,页面上的age显示的其实是静态的name属性的值，这时候methods里的方法一个也不会被调用。
但是操作name按钮时，在showName()方法中打印对应的name值，并且不渲染到页面，会发生方法全被触发的情况。
所以methods全被触发的条件是什么呢？可能我上面的问题描述的不清楚，然后我把两个方法都改成与data属性值无关的语句，如下：

showAge () {
    console.log('age')
},
showName () {
    console.log('name')
},

然后发现方法全都不会被触发，所以全部触发的条件是：在方法中要涉及到data属性，而且该属性与上一次相比发生变化，是这样吗？
还没有结束……我有尝试了另一种写法，想在方法中做运算，在模板语法中调用方法，但是发现方法自执行并且报错了：

    <div id="computed">
        <button v-on:click="showAge()">age点击</button>
        <button v-on:click="showName()">name点击</button>
        <p>age : {{ showAge() }}, {{ a() }}</p>
        <p>name : {{ showName() }}, {{ b() }}</p>
        <p>{{ c() }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#computed',
            data: {
                name: 15,
                age: 5,
            },
            methods: {
                showAge () {
                    this.age += 1;
                    console.log(this.age);
                },
                showName () {
                    this.name += 1;
                    console.log(this.name);
                },
                a () {
                    console.log('a')
                },
                b () {
                    console.log('b')
                },
                c () {
                    console.log('c')
                }
            }
        })

这是为什么呢？是因为第一次渲染页面的时候，发现data属性值改变，页面数据发生变化，进行重载，然后又变化又重载……是这个原因吗？有没有大佬能告诉我它的运行原理啊[哭泣]

Answer 1

“在触发methods里其中一个方法时，methods中其他的方法也会被触发”。

这个结论是在哪个地方看到的？没有这个说法啊，是不是你看错还是理解错了。

Answer 2

页面上的函数都是在渲染页面的时候执行的。
但是在你点击age按钮的时候。age值是被修改了，由于页面中没有使用age，页面没有重新渲染。所以页面上的方法都不会被执行。
点击name按钮，name属性++，由于调用的showAge在页面上引用了name属性，所以需要重新渲染页面。

所以没有什么methods方法都被执行了一说，只是看你页面渲染的时候调用了什么而已

Answer 3

请问这个问题有结果了吗？