vue2和vue3中ref的区别

我们常用的vue2中ref是添加在元素上的  通过this.$refs 来获取到他的这个元素dom

<div id="app">
    <input type="text" ref="text">
</div>

var app = new Vue({ 
    methods:{
        demo() {
            this.$refs.text.value = 'Hello!'
        }
    }
})

而在vue3中写法也是类似的 放弃了this.$refs的写法 官方文档中

 

<div id="app">
    <input type="text" ref="text">
</div>

<script>

export default {
    setup() {
        const text = ref(null)

        onMounted(() => {
            console.log(text.value);
        })

        return { text }
}

<script>

//以下是vue3的新写法

<script setup>
    const text = ref(null)

    onMounted(() => {
        console.log(text.value);
    })

<script>