vue计算属性

Posted 2022-06-18 c546170667

computed处理一些复杂的逻辑会很有用，相信大家有个疑问，该属性和methods有什么区别？
computed是基于它的缓存依赖，只有相关依赖发生时才会重新取值而methods在重新渲染时，函数总会重新调用执行。

<template>
  <div>
    <h1>原始字符串：message</h1>
    <h2>计算后反转的字符串：reversedMessage</h2>
    <input type="text" v-model="message" />
    <button @click="getdate()">getdata</button>
  </div>
</template>
<script>
import  all  from "q";
export default 
  data() 
    return 
      message: "夜魔"
    ;
  ,
  computed: 
    reversedMessage: function() 
      return this.message
        .split("")
        .reverse()
        .join("");
    
  ,
  methods: 
    getdate() 
      alert(this.message);
    
  
;
</script>

以上代码无法满足我的要求，改天在完善一下，或者哪位大神可以帮我完善一下，毕竟用后端的思想又是难以理解前端。