1、参照
const test = ref<number>(8)2、反応性
const testObj = reactive({
test001: '',
test002: ''
})3、propsとdefineEmit
defineProps({
icon: String,
});
const emit = defineEmits(['change', 'update:value', 'format-error']);
emit('update:value', v);4、時計
// 当count改变时触发
watch(count, (val, oldVal) => {
console.log(val, oldVal);
});
5、ウォッチエフェクト
setup() {
const count = ref(0);
watchEffect(() => {
console.log(count.value); // 初始化时会执行一次
});
setTimeout(() => {
count.value += 1; // 值变化时又执行了一次
}, 1000);
}違い:
watchEffect は依存関係を自動的に収集しますが、watch は特定の変数を監視することを明示的に指定します。watch は
新しい値と古い値を取得できますが、watchEffect は最新の値しか取得できません。 watchEffect は
初期化中に 1 回実行され、計算されたものと同様です。
6、計算済み
const sayHello = computed(() => {
console.log('computed', count.value);
return `我是${name.value},${count.value}岁`;
});computed と watchEffect についての同じ点は、依存関係が自動的に収集され、値が更新されたときにコールバックがトリガーされ、初期化呼び出しが行われることです。
ただし、初期化をトリガーするタイミングが異なります。計算された値が使用されていない場合、コールバックはトリガーされません。コールバックは値が使用された場合にのみトリガーされますが、watchEffect はセットアップ中に初期化されます。
7、toRefとtoRefs
<template>
<h2>姓名：{
{name}}</h2>
<h2>年龄：{
{age}}</h2>
<h2>地址：{
{addr.province}}-{
{addr.city}}</h2>
<button @click="name='zhangsan'">修改名字</button>
</template>
<script lang='ts'>
import { reactive, toRefs } from 'vue'
export default {
setup() {
const user = reactive<any>({
name: '张三',
age: 19,
addr: {
province: '河南',
city: '郑州'
}
})
return {
name: toRef(obj,"name"),
...toRefs(user)
}
}
}
</script>リアクティブ オブジェクト内のすべてのプロパティを個別のリアクティブ データに変換すると、オブジェクトは通常のオブジェクトになります toRefs は toRef のバッチ操作です