Home Vue Vue3

# 1.ref (reference 引用) 基本使用

App 为根组件 下面 Home 例子都被此组件引用

vue
// App.vue 
<template>
  <div>
    <home></home>
  </div>
</template>
<script>
import Home from "./Home.vue";
export default {
  components: {
    Home,
  },
};
</script>
<style scoped>
</style>
vue
// Home.vue 
<template>
  <div>
    <!-- 当我们在 template 模板中使用 ref 对象，它会自动进行浅层解包，所以可直接写 counter -->
    <h2>{{ counter }}</h2>
    <button @click="increment">+1</button>
  </div>
</template>
<script>
import { ref } from "vue";
console.log(ref); // 打印出也是一个函数
export default {
  setup() {
    //counter 变成一个 ref 的可响应式的引用
    let counter = ref(100);
    console.log(counter); // 打印出是 RefImpl1 对象
    // 执行五次 increment 参考结果 increment5
    const increment = () => {
      // 在逻辑代码里是没有自动解包功能的，要通过 counter.value 来获取
      //counter++;  错误的写法，ref 对象不能 ++
      counter.value++;
      console.log(counter.value);
    };
    return {
      counter,
      increment,
    };
  },
};
</script>
<style scoped>
</style>
参考结果：


step_ref


# 2. 使用变量包裹 ref 对象


vue
// Home.vue  
<template>
  <div>
    <!-- 当我们在 template 模板中使用 ref 对象，它会自动进行浅层解包，所以可直接写 counter -->
    <h2>info.counter.value：{{ info.counter.value }}</h2>
    <!-- 不过现在可以不需要 value 来获取了，直接写结果也是一样的 -->
    <h2>info.counter：{{ info.counter }}</h2>
    <button @click="increment">+1</button>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const counter = ref(100);
    // 当使用变量 info 把 ref 包裹起来时
    const info = {
      counter,
    };
    const increment = () => {
      // 在逻辑代码里是没有自动解包功能的，要通过 counter.value 来获取
      counter.value++; // 这里是正常 ++ 的
      // info.counter++; // NaN
      // 这里使用 info.counter.value++ 也是能正常 ++ 的
      info.counter.value++;
      // 打印出 info.counter 也是一个 RefImpl 对象
      console.log("info.counter:", info.counter); // 这里是无法通过 info.counter++ 的
      // 可以看出这里还是需要使用 value 来获取
      console.log("info.counter.value:", info.counter.value);
      console.log("---------------------------------");
    };
    return {
      info,
      counter,
      increment,
    };
  },
};
</script>
<style scoped>
</style>
参考结果：


step_ref