vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue computed顺序、watch顺序、响应次数

vue中computed顺序、watch顺序、响应次数使用

作者:秦时明月之安康

这篇文章主要介绍了vue中computed顺序、watch顺序、响应次数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

先看代码

<template>
  <div class="hello">
    <button style="font-size: 40px;" @click="change">改变值</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    console.log("data");
    return {
      a: 1,
      a2: 1
    };
  },
  watch: {
    a() {
      console.log("watch a");
    },
    b() {
      console.log("watch b");
    },
    c() {
      console.log("watch c");
    },
    a2() {
      console.log("watch a2");
    }
  },
  computed: {
    b() {
      console.log("computed b");
      return this.a + 1;
    },
    c() {
      console.log("computed c");
      return this.b + this.a;
    },
    d() {
      console.log("computed d");
      return this.a + 1;
    }
  },
  methods: {
    change() {
      console.log("-");
      this.a2 += 1;
      console.log("--");
      this.a += 1;
      console.log(this.c);
      console.log("---");
    }
  }
};
</script>

<style scoped lang="less"></style>

输出结果

页面渲染完成的输出

点击按钮的输出

跟你的预期一致么?如果不一致,为什么?

分析过程

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文