computed＆methods&watch

chonger_feifei

已于 2022-03-26 16:42:58 修改

阅读量104

点赞数

分类专栏： VUE 文章标签： vue

于 2022-03-24 13:04:58 首次发布

本文链接：https://blog.csdn.net/chonger_feifei/article/details/123708384

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用场合：
一个值的改变，会影响多个值（或处理多件事），使用watch（为了观察一个值）
多个值的改变，为了得到一个结果，使用computed（为了得到一个值）

methods

其中的函数，页面重新渲染时重新执行
改变data中的任一数据就会重新渲染

<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return {
        message:'hello world',
        count: 2,
        price: 5,
      };
    },    
    methods: {
      getTotal() {
        return Date.now();
        // return this.count * this.price;
      },
    },
    template: `<div>
    {{getTotal()}}
    </div> `,
  });
  const vm = app.mount("#root");
</script>

在这里插入图片描述

computed

其中的函数，依赖的内容变更时重新执行
解析：total()依赖的是count属性，故message属性值改变，不重新计算；只有count属性值改变才重新计算

  <body>
    <div id="root"></div>
  </body>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message:'hello world',
          count: 2,
          price: 5,
        };
      },     
      computed: {
        total() {
          // 技巧：时间戳可以看出来是否右重新计算
          return Date.now() + this.count;
          // return this.count * this.price;
        },
      },
      template: `<div>
      {{total}}
      </div> `,
    });
    const vm = app.mount("#root");

在这里插入图片描述

watch

  <body>
    <div id="root"></div>
  </body>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          count: 2,
          price: 5,
        };
      },
      // 监听price属性值的变化
      watch: {
        price() {
          setTimeout(() => {
            console.log("price changed");
          }, 3000);
        },
      },
      computed: {
        total() {
          return this.count * this.price;
        },
      },
      template: `<div> {{total}}</div> `,
    });
    const vm = app.mount("#root");
  </script>

在这里插入图片描述

2）在watch中写一般函数

  <body>
    <div id="root"></div>
  </body>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          count: 2,
          price: 5,
          newTotal: 10,
        };
      },
      watch: {
        price(current, prev) {
          this.newTotal = current * this.count;
        },
      },
      template: `<div> {{newTotal}}</div> `,
    });
    const vm = app.mount("#root");