最近、主にいくつかのレスポンシブ最適化ソリューションを紹介するために、vue の公式 Web サイトが更新されました。
以下は、公式サイトで更新されたナレッジポイントのまとめです。
1. シンタックス シュガー -- レスポンシブ変数 $ref()
以前は単純なレスポンシブ データを定義するために ref() を使用していましたが、それを使用する場合は .value を保持する必要があり、さらに面倒になります。
$ref() は この問題を解決します。
栗：
let count=$ref(0) //使用$ref()定义数据
function increment() {
count++ //此处就不需要再count.value了
}実際、$ref() の使い方はとても簡単なので、注意する必要があるのは次の点だけです。
ref ($ref、$computed など) を返すすべてのリアクティブ API には、$ で始まる対応するマクロ関数があります。
次のように：
2. $() によるデストラクチャリング
リアクティブで定義されたデータは、 破壊/直接代入が発生すると失われることは誰もが知っています! ! !
ref/reactive 構造損失応答性の欠点に対応して、$() がリリースされました。
栗 1: フックによって解体された応答タイプ
//引入自定义的hooks函数
import { useMouse } from '@vueuse/core'
//解构出x,y 并且使用$()包裹赋予响应式。
const { x, y } = $(useMouse())
//这样解构出来的x,y都是响应式的了。
console.log(x, y)
//注意:
x 如果已经是一个 ref,则会简单地返回它本身，而不会再创建新的 ref。
如果一个被解构的值不是 ref (例如是一个函数)，也仍然可以使用，这个值会被包装进一个 ref，因此其他代码都会正常工作。レスポンシブな小道具の解体
<script setup> での defineProps の使用に
は、2 つの問題点があります。これは、結果の変数が反応せず、更新されないため、defineProps の戻り値を分解できないことを意味します。
2.
型 ベースの 、これらの props のデフォルト値を宣言するのは便利ではありません。このために withDefaults() API を提供していますが、それでも使いにくいです。
defineProps を分解で使用すると、コンパイル時の変換を適用することでこれらの問題を回避できます。
栗：
<script setup lang="ts">
//定义props的类型
interface Props {
msg: string
count?: number
foo?: string
}
//从defineProps中解构值，并且默认赋值可以使用，解构时起别名也可以使用。
const {
msg,
// 默认值正常可用
count = 1,
// 解构时命别名也可用
// 这里我们就将 `props.foo` 命别名为 `bar`
foo: bar
} = defineProps<Props>()
//监听打印
watchEffect(() => {
// 会在 props 变化时打印
console.log(msg, count, bar)
})
</script>
3. $ref() の構文シュガーに関する問題
リアクティブ変数を使用すると、.value に悩まされることはなくなりますが、関数間でリアクティブ変数を渡すときに「応答損失」の問題が発生する可能性もあります。次のように：
応答の喪失 --
シナリオ 1: 関数をパラメーターとして渡す
//此处x是限制了个Ref类型，并且又需要是number类型的参数
function trackChange(x: Ref<number>) {
watch(x, (x) => {
console.log('x 改变了！')
})
}
//定义一个响应式对象
let count = $ref(0)
//传入count错误
trackChange(count) // 无效！
//分析原因:
1.因为在执行trackChange(count)的时候，
其实代码被编译成了:trackChange(count.value)
2.这里的 count.value 是以一个 number 类型值的形式传入，然而 trackChange 期望接收的是一个真正的 ref,所以传入的类型错误。
シナリオ 2: 関数の戻り値として
//如果将响应式变量直接放在返回值表达式中会丢失掉响应性：
function useMouse() {
let x = $ref(0)
let y = $ref(0)
// 不起效！
return {x,y}
}
//分析原因:
1.上面的语句实际上被编译为了:
return {
x: x.value,
y: y.value
}
2.实际上是把一个number类型的值返回出去了，而不是返回真正的 ref。次に、この 2 つのシナリオで $$() が登場しました
4. 関数間の受け渡し時の応答性を保つ --$$()
応答性が失われる上記のシナリオについて、vue はそれを解決するために $$() を起動しました.最初にシナリオ 1 の解決策を見てみましょう.
シナリオ 1 を解決するには:
let count = $ref(0)
//trackChange(count) 此处不要再这样了
//而是变成$$()进行包裹,
++ trackChange($$(count))
//$$() 的效果就像是一个转义标识：$$() 中的响应式变量不会追加上 .value。
シナリオ 2 を解決するには:
function useMouse() {
let x = $ref(0)
let y = $ref(0)
// 返回的时候用$$()进行包裹,,修改后起效
return $$({
x,
y
})
}
//$$() 调用时任何对响应式变量的引用都会保留为对相应 ref 的引用構造化されていない小道具で $$() を使用する
$$() は、リアクティブ変数でもあるため、構造化されていない小道具でも機能します。
//定义声明props
const { count } = defineProps<{ count: number }>()
//使用$$()对结构出的props进行包裹
passAsRef($$(count))
5. 注: レスポンシブ シンタックス シュガーは明示的に有効にする必要があります!!!
5.1 Vite -- vite.config.js で開く
// vite.config.js
export default {
plugins: [
vue({
reactivityTransform: true
})
]
}
5.2 TS 統合 -- env.d.ts で開く
TS も使用している場合は、TS での表示も有効にする必要があります。
<reference types="vue/macros-global" />PS: vue/macros からマクロ関数を明示的にインポートする場合、このようにグローバルに宣言する必要はありません。
さっさと練習しろ、デイ兄弟、練習しないとダメだ！
私をサポートすることを忘れないでください、わかりました、ペアで良いことを願っています~~~~~~