vue3 新特性$ref,$computed，$的本质，源码解析

在Vue 3中，$ref、$computed和$不是Vue 3的新特性，而是Composition API的一部分。

1. $ref: 用于直接访问组件实例。在模板中使用ref属性，在JavaScript中通过this.$refs访问。
2. $computed: 用于定义计算属性，它们会基于响应式依赖进行缓存。
3. $: 是一个响应式引用的简写，通常与setup()函数中的ref()或reactive()一起使用。

下面是一个简单的例子，展示如何在Vue 3中使用$ref和$computed:

<template>
  <div>
    <input v-model="message" />
    <p>{{ fullMessage }}</p>
  </div>
</template>
 
<script>
import { ref, computed, onMounted } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello, ');
    
    // 使用$ref
    onMounted(() => {
      console.log(message.value); // 直接访问message的值
    });
    
    // 使用$computed
    const fullMessage = computed(() => message.value + 'Vue 3!');
    
    return {
      message,
      fullMessage
    };
  }
};
</script>

在这个例子中，message是一个响应式引用，我们使用ref()创建它。fullMessage是一个计算属性，我们使用computed()创建它。在模板中，我们通过v-model绑定message，通过插值表达式显示fullMessage。

源码解析这部分涉及较多，但大致可以分为以下几个步骤：

1. 创建一个响应式引用，例如ref()或reactive()。
2. 使用computed()创建计算属性。
3. 在setup()函数中返回响应式引用和计算属性，以便它们可以在模板中使用。

注意：$在Vue 3中通常是setup()函数的上下文引用，并不是一个特殊的API。在模板中，你可以直接使用模板引用(ref attribute)来访问子组件实例或DOM元素。