Vue3 中 template 中的神奇魔法！

文章预览

前言 众所周知，vue3的template中使用ref变量无需使用 .value 。还可以在事件处理器中进行赋值操作时，无需使用 .value 就可以直接修改ref变量的值，比如： change msg 。你猜vue是在编译时就已经在代码中生成了 .value ，还是运行时使用Proxy拦截的方式去实现的呢？注：本文中使用的vue版本为 3.4.19 。 看个demo 看个简单的demo，代码如下：    {{ msg }}    "msg = 'Hello Vue3'">change msg "ts">
import { ref } from "vue";

const msg = ref("Hello World");

console.log(msg.value);
上面的代码很简单，在script中想要访问 msg 变量的值需要使用 msg.value 。但是在template中将 msg 变量渲染到p标签上面时就是直接使用 {{ msg }} ，在 click 的事件处理器中给 msg 变量赋新的值时也没 ………………………………