我在看vue官网的下述文章

计算属性和侦听器 — Vue.js

其中说到计算属性和方法在作用上是一致的

我感觉不太可能，于是把官网的代码写下来，稍微做了些调整，如下：

<template>
    <div id="example">
        <p>原始值:</p><input type="text" v-model="message">
        <p>计算属性的值: "{{ messageReversed }}"</p>
        <p>方法的运行结果: "{{ reverseMessage() }}"</p>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                message: 'Hello'
            }
        },
        computed: {
            messageReversed: function () {
                console.log("进入了computed");
                return this.message.split('').reverse().join('')
            }
        },
        methods: {
            reverseMessage: function () {
                console.log("进入了methods");
                return this.message.split('').reverse().join('')
            },
        }
    }
</script>

<style scoped>

</style>

这是一段很简单的代码，运行后的结果如下：

vue3 template中定义变量_vue3 template中定义变量

这个时候，产生下述一些疑问，并给出了自己的解释

问题1：如果我改变“输入框”里的Hello，比如，我改成abcde

那么浏览器中“方法的运行结果”后的值是否发生改变？

回答：会发生改变

问题2：为什么会发生改变？

难道methods中的方法像computed一样，也和自己使用的data对象进行了关联？

当data对象改变的时候，方法就会被执行？

回答：是的。

经过我的实验，关于<template>中的methods方法何时被执行，我总结了下述几种情况

情况1：当message的内容发生了改变————会被执行

情况2：当data中的其他属性被修改，并且在<template>界面上有所反应的时候————会被执行

情况3：当data中的其他属性被修改，但是这个属性在<template>界面上没被使用————不会执行

情况4：当通过纯JS的dom方法往浏览器上添加、改变或删除HTML元素————不会执行

抛开这些表面纷繁复杂的东西，找一个统一的、好理解的清晰规律

（下述结论未严格证明）

在执行相关操作后（手动或代码操作），vue会考虑<template>是否有刷新的必要

如果有，那么就刷新，而<template>的刷新，必然导致<template>中方法的执行

那么又来了新的问题：vue是如何判断<tempalte>有必要刷新？

回答：

相关的值或方法的运行结果的最新状态，在<template>是否是最新的！

不是最新的，则刷新<template>

最后总结：

不建议在<template>中把方法的结果作为值来展示！

感觉是个骚操作

因为如果这么做，那个方法就无法修改data函数中定义的属性

因为会形成死循环