import {   Fragment as _Fragment,   createElementBlock as _createElementBlock,   createElementVNode as _createElementVNode,   defineComponent as _defineComponent,   openBlock as _openBlock,   toDisplayString as _toDisplayString,   ref, } from "/node_modules/.vite/deps/vue.js?v=23bfe016";  const _sfc_main = _defineComponent({   __name: "index",   setup() {     const msg = ref("Hello World");     console.log(msg.value);     const __returned__ = { msg };     return __returned__;   }, });  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {   return (     _openBlock(),     _createElementBlock(       _Fragment,       null,       [         _createElementVNode("p", null, _toDisplayString($setup.msg), 1),         _createElementVNode(           "button",           {             onClick:               _cache[0] ||               (_cache[0] = ($event) => ($setup.msg = "Hello Vue3")),           },           "change msg"         ),       ],       64     )   ); } _sfc_main.render = _sfc_render; export default _sfc_main;

vue文件编译后的代码主要分为两块：_sfc_main和_sfc_render。

• _sfc_main中主要是setup方法，这个是vue的<script setup lang="ts">部分编译后的样子。从上面可以看到在编译后的setup方法中，访问msg变量时依然使用了msg.value，并且在setup方法中return了{ msg }对象。

• _sfc_render就是我们熟悉的render函数，在render函数中渲染p标签部分的内容是：_toDisplayString($setup.msg)。很明显这个toDisplayString就是一个将输入值转换为字符串的函数，并没有处理.value。

  $setup.msg中的$setup.，我想你猜到了应该和前面这个setup方法中return的{ msg }对象有关，但是又不是直接使用setup方法中return的{ msg }对象，因为使用setup中的msg变量需要使用.value，在编译后的render函数中并没有帮我们自动生成一个.value，比如这样的代码：$setup.msg.value。

  同样的在render函数中，button的click事件给msg变量赋值时也没有帮我们生成一个类似于这样的代码：$setup.msg.value = "Hello Vue3"，而是$setup.msg = "Hello Vue3"。

  从render函数中可以看出在template中使用ref变量无需使用.value，并不是编译时就已经在代码中生成了.value，比如$setup.msg.value，而是通过Proxy的方式去实现的。

render函数

在render函数中读和写msg变量都变成了$setup.msg，而这个$setup对象又是调用render函数时传入的第四个参数。现在我们需要搞清楚调用render函数时传入的第四个参数到底是什么？给render函数打一个断点，刷新页面，此时代码走到了断点里面，如下图：

右边的Call Stack表示当前函数的调用链，从调用链中可以看到render函数是由一个名为renderComponentRoot的函数调用的。

点击Call Stack中的renderComponentRoot，代码会跳转到renderComponentRoot函数中，在我们这个场景中简化后的renderComponentRoot函数代码如下：

function renderComponentRoot(instance) {   const {     props,     data,     setupState,     render: render2,     // 省略...   } = instance;    render2.call(     thisProxy,     proxyToUse,     renderCache,     props,     setupState,     data,     ctx   ); }

 同理在Call Stack中可以看到调用setup方法的是callWithErrorHandling函数，点击Call Stack中的callWithErrorHandling，代码会跳转到callWithErrorHandling函数中。代码如下：

function callWithErrorHandling(fn, instance, type, args) {   try {     return args ? fn(...args) : fn();   } catch (err) {     handleError(err, instance, type);   } }

function setupStatefulComponent(instance) {   const Component = instance.type;   const { setup } = Component;   const setupResult = callWithErrorHandling(setup, instance);   handleSetupResult(instance, setupResult); }

function handleSetupResult(instance, setupResult) {   instance.setupState = proxyRefs(setupResult); }

function proxyRefs(objectWithRefs) {   return isReactive(objectWithRefs)     ? objectWithRefs     : new Proxy(objectWithRefs, shallowUnwrapHandlers); }

const shallowUnwrapHandlers = {   get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)),   set: (target, key, value, receiver) => {     const oldValue = target[key];     if (isRef(oldValue) && !isRef(value)) {       oldValue.value = value;       return true;     } else {       return Reflect.set(target, key, value, receiver);     }   }, };