小满Vue3第四十章（Vue响应性语法糖）

前言：感谢大家辛苦了，迎来了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>