Vue 爬坑

1 

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue"  class="test-baz"/>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.test-baz {
  color: red;
}
</style>

父组建里面的test-baz并不会被字组建HelloWorld用到，字组建只会用它自己里面的test-baz样式。

2  vue中getter函数理解

在JavaScript中箭头函数 () => x.value + y.value 是一个匿名函数，并不是getter函数。

  在Vue中，watch 函数用于观测一个表达式或函数（通常称为“getter”）的变化。当这个表达式的值发生变化时，watch 中定义的回调函数会被触发。因此，尽管上面提到的箭头函数 () => x.value + y.value 本身并不是一个严格意义上的JavaScript getter函数（如在对象属性定义中的那种），在Vue框架的上下文中，它可以被视作一个“getter”功能的实现，因为它用来获取并计算状态（即 x.value 和 y.value 的和）。

  这里的匿名箭头函数 ( ) => x.value + y.value 被Vue用作一个getter来监控依赖项（x.value 和 y.value）的变化。当这些依赖项的值发生变化导致计算结果（即两者的和）改变时，Vue就会调用第二个参数中的回调函数，打印出新的求和结果。因此，在Vue的语境下，将其称为一个“getter函数”是为了强调其观测数据变化并响应的功能，而非严格遵循JavaScript语言中getter的定义。