vue2的data()this指向和vue3区别

今天在这里我探讨了3种情况：

1.脚手架创建的vue2,写法也是vue2

2.脚手架创建的vue3,但写法是vue2

3.脚手架创建的vue3,写法也是vue3

1.脚手架创建的vue2,写法也是vue2

<script>
export default {
    data(){
        return {
            d:this
        }
        
    },
    mounted(){
        console.log("vue2this",this.d)
    }
}
</script>

 显而易见，vue2的data函数里的this是vue实例

2.脚手架创建的vue3,但写法是vue2

<script>
export default {
    data(){
        return {
            d:this
        }
        
    },
    mounted(){
        console.log("是vue3,但写法是vue2的this",this.d)
    }
}
</script>

这打印是Proxy

3.脚手架创建的vue3,写法也是vue3

<script lang="ts" setup>
import { onMounted } from 'vue'
onMounted(() => {
  console.log('vue3的this', this)
})
</script>

 

没错，vue3的this是undefined,那我们要如何得到vue3的实例呢，getCurrentInstance()，在这里给大家介绍下这个方法，官网说：它只能在setup和生命周期钩子函数里使用,但是但是!!!这个方法它只能在开发环境下，不能在生产环境下使用！！！也别想着在vue3中依赖this的写法!

<script lang="ts" setup>
import { getCurrentInstance } from 'vue'
  console.log('vue3的getCurrentInstance()方法', getCurrentInstance())
</script>