定时器

getBoundingClientRect()：告诉你元素在视口中的几何位置，方便做定位、碰撞检测等。 getComputedStyle()：告诉你元素实际应用的样式值，方便获取px值或其他值（比如padding、border宽度）。

const rect = element.getBoundingClientRect();
console.log(rect.top, rect.left, rect.width, rect.height);

const style = getComputedStyle(element);
console.log(style.paddingTop); // "10px"
console.log(style.width);      // "100px"

::: 铺满窗口示例

<template>
  <div class="app-container" ref="appContainer">
      <el-card class="app-panel">

      </el-card>
  </div>
</template>

<style scoped>
.app-panel{
  height: var(--app-top-offset);
}

</style>

<script>

export default {
  name: "TEST",
  data() {

    };
  },
  mounted() {
    this.setTabsHeight(); // 页面加载时计算高度
    window.addEventListener("resize", this.setTabsHeight); // 监听窗口大小变化
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.setTabsHeight); // 组件销毁时移除监听器
  },
  methods: {
    setTabsHeight() {
      //得到浏览器视口高度：window.innerHeight
      //得到 appContainer 的 margin top
      const tabsHeight = window.innerHeight - this.$refs.appContainer.getBoundingClientRect().top;
      //得到 appContainer 的所有经过计算后的实际样式值
      const style = window.getComputedStyle(this.$refs.appContainer);
      //得到 appContainer 的panningBottom 和 panningTop
      const panelHeight = tabsHeight-parseFloat(style.paddingTop)-parseFloat(style.paddingBottom)
      // 通过style.setProperty设置CSS变量
      document.documentElement.style.setProperty('--app-top-offset', `${panelHeight}px`);
    },
  },
};
</script>

:::

定时器

setInterval(()=>{
    let message = "开始学习了！" + new Date().toString()
    console.log(message)
},1000)

Object.defineProperties 双向绑定原理

    let age= 19
    let  person =  {
        name:"小米",
        sex:"女",
    }

    console.log(person)
    Object.defineProperties(person,{
        age: {
            get() {
                console.log("得到年龄");
                return age;
            },
            set(val) {
                console.log("年龄变化");
                age = val;
            }
        }
    })