vue3:圣诞糖果 ref-Sugar 初体验

vue3:ref-Sugar 体验

体验项目-传送门个人感觉ref-Sugar 这颗糖很甜，简化了.value的这种书写方式；

github:ref-Sugar-rfc

升级最新编译器

如图所示：我们的项目为vite-app,当前package.json中vue版本以及compiler-sfc版本均为^3.0.4；

执行版本更新命令

npm i vue@next -S 

npm i @vue/compiler-sfc -D复制代码

当前最新版本即为 ^3.0.4

新建RefSugar.vue组件；如下所示：

<template>
    <div>
    <span>refSugar </span>    
    <button @click="inc">{{ count }}</button>
    <div>the computed variable pulsOne: {{pulsOne}}</div>
    </div>
</template>

<script setup>
import {watch,computed} from 'vue'
// declaring a variable that compiles to a ref
ref: count = 1
ref:pulsOne=computed(()=>count+1);

function inc() {
  // the variable can be used like a plain value
  count++
}


// access the raw ref object by prefixing with $
console.log($count.value)

watch($count,()=>{
    console.log(count);
})
</script>

<style scoped>

</style>复制代码

在app.vue引入组件