vue3.5 探索
- 3.5 更新内容
HelloWorld.vue
A.vue
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++" ref="count_btn">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
<!-- 3. defineProps 获取就是响应式的了 -->
<A :count2="count"></A>
</div>
</template>
<script setup>
import A from './A.vue'
import { ref } from 'vue'
const count = ref(0)
// vue3.5 新特性
// 1. usdId 可以获取一个唯一的id
import { useId } from 'vue'
const id1 = useId()
const id2 = useId()
console.log('id1:', id1)
console.log('id2:', id2)
// 2. useTemplateRef 替换 ref 变量名称可以任意指定了
import { useTemplateRef, onMounted } from 'vue'
const count1 = useTemplateRef('count_btn')
const { msg} = defineProps({
msg: String,
})
console.log('msg:', msg)
onMounted(() => {
console.log('count1:', count1.value)
})
// 4. 优化了内存和大数据操作
</script>
<template>
<div>
mycountis {{ count2 }}
myCount is {{ myCount }}
</div>
</template>
<script setup>
import { computed, watchEffect } from 'vue';
const {count2} = defineProps({
count2: Number
})
const myCount = computed(() => {
return count2 + 100
})
watchEffect(() => {
console.log('count2 触发了:', count2)
})
</script>
<style lang="">
</style>