Rumah > Artikel > hujung hadapan web > Vue中computed与methods的区别详解

Vue中computed与methods的区别详解

亚连asal: 2018-05-29 10:34:282357semak imbas

这篇文章主要介绍了Vue中computed与methods的区别详解，现在分享给大家，也给大家做个参考。

Vue中computed可以用来简单的拼接需要展示的数据

computed and methods

拼接展示数据的任务, 也可以用methods完成, 但当页面的数据变化时, methods中的方法会被重新调用(产生不必要的性能消耗), 而methods内的方法只有和自身有关的数据变化时才会被调用

一个简单的实例

computed只在初始化时被调用

methods会在数据变化时被调用, 即使变动的数据与自身无关

测试源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>computed的使用</title>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
  <p id="root">
  </p>
  <script>
    var vm = new Vue({
      el: "#root",
      data: {
        name: "zhaozhao",
        age: 13,
        hobby: &#39;Python&#39;,
        nameAgeStyle: {
          fontSize: "20px",
          color: "#0c8ac5"
        }
      },
      template: `<p>
        <p v-bind:style="nameAgeStyle">computed方式渲染: {{nameAndAge}}</p>
        <p v-bind:style="nameAgeStyle">methods 方式渲染: {{getNameAndAge()}}</p>
        <br>
        <input type="text" v-model="hobby">
        <p>爱好: {{hobby}}</p>
        <p>{{noUse()}}</p>
        </p>`,
      computed: {
        nameAndAge: {
          get(){
          console.log(&#39;调用computed&#39;);
          return `${this.name} ==> ${this.age}`;
          }
        }
      },
      methods: {
        getNameAndAge() {
          console.log(&#39;调用methods&#39;);
          return `${this.name} ==> ${this.age}`;
        },
        noUse(){
          console.log("=methods==nouse==");
        }
      }
    })
  </script>
</body>
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

利用js实现前后台传送Json的示例代码

vue中Npm run build 根据环境传递参数方法来打包不同域名

JS获取url参数,JS发送json格式的POST请求方法

Atas ialah kandungan terperinci Vue中computed与methods的区别详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：如何使用AngularJS日期格式化Artikel seterusnya：怎样操作Node升级版本

Artikel berkaitan

Lihat lagi