Vue use js const and Vue Reactivity All In One

Vue use js const and Vue Reactivity All In One

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <section>
      <div v-if="creativeLimit > 0">vue use js const ok ✅</div>
      <div v-else>vue use js const bug ❌❌❌</div>
    </section>
    <!-- <div v-if="isOverLimit">vue use js const bug ❌❌</div> -->
    <!-- <div>creativeLimit = {{ creativeLimit }}❌</div> -->
    <div>getCreativeLimit = {{ getCreativeLimit }}✅</div>
    <section>
      <div v-if="isOverLimit">
        vue use js const with computed property ok ✅
      </div>
      <div v-else>vue use js const bug ❌</div>
    </section>
    <section>
      <div>constValue = {{ constValue }}</div>
      <div>obj.constValueReactive = {{ obj.constValueReactive }}</div>
    </section>
  </div>
</template>

<script>
const creativeLimit = 15;

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      creativeMaxNums: 15,
      obj: {},
      arr: [],
    };
  },
  computed: {
    // 不能直接使用 const, 定义的变量，必须放到 computed 或 data 或 methods 里面间接使用；??? 因为不是 data 初始化里面的，就不是响应式的
    // 那 TM 还不如直接使用 computed 属性
    getCreativeLimit() {
      return creativeLimit;
    },
  },
  mounted() {
    // const
    console.log("creativeLimit =", creativeLimit);
    // data const ??? 性能问题 （vue 会使用 defineProperty 进行监听）
    console.log("❌ this.creativeMaxNums =", this.creativeMaxNums);
    // computed const
    console.log("✅ this.getCreativeLimit =", this.getCreativeLimit);
    // data const ??? (非响应式)
    this.constValue = 2021;
    console.log("✅ this.constValue =", this.constValue);
    // data const ??? (响应式)
    // this.$set(this.$data, "constValueReactive", 2021);
    // this.$set(this.constValueReactive, "constValueReactive", 2021);
    // console.log("✅ 响应式 this.constValueReactive =", this.constValueReactive);
    this.$set(this.obj, "constValueReactive", 2021);
    console.log(
      "✅ 响应式 this.obj.constValueReactive =",
      this.obj.constValueReactive
    );
    console.log("\n old this.$data =", this.$data);
    setTimeout(() => {
      // console.log("\n this =", this);
      console.log("\n new this.$data =", this.$data);
      // const
      console.log("creativeLimit =", creativeLimit);
      // data const ??? 性能问题 （vue 会使用 defineProperty 进行监听）
      console.log("❌ this.creativeMaxNums =", this.creativeMaxNums);
      // computed const
      console.log("✅ this.getCreativeLimit =", this.getCreativeLimit);
      // data const ??? (非响应式)
      console.log("✅ this.constValue =", this.constValue);
      // data const ??? (响应式)
      // console.log(
      //   "✅ 响应式 this.constValueReactive =",
      //   this.constValueReactive
      // );
      console.log(
        "✅ 响应式 this.obj.constValueReactive =",
        this.obj.constValueReactive
      );
    }, 3000);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
</style>

utils

// vue-use-js-const-and-vue-reactivity-all-in-one => Vue use js const and Vue Reactivity All In One

// 驼峰命名，自动转换

refs

https://codesandbox.io/s/vue-use-js-const-and-vue-reactivity-all-in-one-1k98b

https://codesandbox.io/s/vue-use-js-const-and-vue-reactivity-all-in-one-1k98b?file=/src/components/HelloWorld.vue

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---