vue3中的组件实例和计算属性

一、组件实例的获取

1.通过getCurrentInstance进行获取组件实例（获取的是代理对象），通过其中的proxy中取到实例对象，但是值得注意的是，确保组件实例对象创建完成以后再去调用，否则不能执行。（可以在onMounted生命周期钩子中使用）

<template>
  <main>
    this is home.{{msg}}{{lsb}}
  </main>
</template>

<script >
  export default{
  name:'homeview',
  data:()=>({
   msg:'kk',
   lsb:'123'
  }),
  methods:{
    date(){
      console.log('abc');
    }
  }
}


</script>

<script setup>
  
  import {getCurrentInstance, onMounted} from 'vue';
  onMounted(()=>{
    var obect=getCurrentInstance();
     obect.proxy.date();
  });

 

</script>

二、计算属性

vue3中的计算属性和vue2中的关键词相同，也是通过computed关键词进行使用，用法有一点点小小变化，如下边代码（不需要写在export defalut中了）

<template>

<div>
    this is about{{allname}}
</div>
<button @click="btn">换名字</button>
</template>

<script setup>
import {ref} from 'vue';
import { computed } from '@vue/reactivity';

let firstname=ref('星星');
let lastname=ref('寒');

let allname=computed(()=>{
    
    return  lastname.value+firstname.value;
 });
function btn(){
    lastname.value='大';
    firstname.value="明星";
}



</script>