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

一、组件实例的获取

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

 
<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中了）

 
<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>