前言：感谢大家辛苦了，迎来了vue系列的第四十章。
小提示 本章内容所讲的东西都是实验性的产物 暂时不要再生产环境使用，自己开发玩可以使用，不过大体框架应该不会变了。
要求 vue版本 3.2.25 及以上
1.开启配置（开启之后才能使用新特性）
vite 开启 reactivityTransform
import { fileURLToPath, URL } from 'url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' // https://vitejs.dev/config/ export default defineConfig({ server: { port: 3000 }, plugins: [ vue({ reactivityTransform:true }), vueJsx()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, })
如果你是 vue-cli
// vue.config.js module.exports = { chainWebpack: (config) => { config.module .rule('vue') .use('vue-loader') .tap((options) => { return { ...options, reactivityTransform: true } }) } }
第一个例子 $ref
在之前ref 修改值 和 获取值 都要.value 一下 感觉很繁琐，不想用.value 我们可以使用vue3的新特性$ref 。
我们可以直接使用$ref 宏函数 就不需要.value 了。能帮我们快速书写，但是宏函数是基于运行时的他最终还是会转换成ref 加.value 只不过vue帮我们做了这个操作了
<template> <div> <button @click="add">add</button> </div> <h2> {{count}} </h2> </template> <script setup lang='ts'> import { $ref } from 'vue/macros' let count = $ref(0) const add = () => { count++ } </script> <style> </style>
当然跟ref 有关的函数都做处理 都不需要.value了
- ref -> $ref
- computed -> $computed
- shallowRef -> $shallowRef
- customRef -> $customRef
- toRef -> $toRef
2.$ref 的弊端
应为他编译之后就是 count.value 并不是一个ref对象所以watch 无法监听而且会抛出一个警告
[Vue warn]: Invalid watch source: 0 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. at <App>
<template> </template> <script setup lang='ts'> import { reactive, ref, toRefs,watch } from 'vue'; import { $ref} from 'vue/macros' let count = $ref<number>(0) watch(count,(v)=>{ console.log(v) }) setInterval(()=>{ count++ },1000) </script> <style> </style>
解决这个问题需要$$ 符号 就是再让他编译的时候变成一个ref 对象不加.value
<template> </template> <script setup lang='ts'> import { reactive, ref, toRefs,watch } from 'vue'; import { $ref,$$ } from 'vue/macros' let count = $ref<number>(0) watch($$(count),(v)=>{ console.log(v) }) setInterval(()=>{ count++ },1000) </script> <style> </style>
3.解构
在之前我们解构一个对象使用toRefs 解构完成之后 获取值和修改值 还是需要.value
vue3 也提供了 语法糖 $() 解构完之后可以直接赋值
<template> <div> {{name}} </div> </template> <script setup lang='ts'> import { reactive, toRefs } from 'vue' import {$} from 'vue/macros' const obj = reactive({ name: '小满' }) let { name } = $(obj); setTimeout(()=>{ name = '大满' },2000) </script> <style> </style>
