vue3.0的變化

初涉vue3.0，下面是我在demo中遇到的一些問題(我是用的vue-cli進行開發)

【1】main.js中配置

 vue2.x   
 Vue.prototype.$baseURL="https://www.xxxxxx.online/mxs/"

 vue3.0
 const app = createApp(App); 　 
 app.config.globalProperties.$baseURL="https://www.xxxxxx.online/mxs/"

 //vue3.0中main.js里面已經沒有Vue，取代用的是createApp(App);

 

【2】this的問題

　　vue2.x  === 可以在生命周期中通過this來獲取當前實例；

　　vue3.x  === 已經沒有this指向;    

　　首先引入  import { getCurrentInstance } from "vue";

　　再在setup 中   const { proxy } = getCurrentInstance();這里proxy就可以得到幾乎等同於this的作用  

　 //補充說明：有的文章說用 const { ctx } = getCurrentInstance();但是這樣打包后會報錯，用proxy就可以完美避免

 

【3】數據聲明的變化

　　import { ref } from "vue";

　　setup() {

　　　　let str1 = "str1";  
      //如果只是在setup內部調用，不在頁面渲染的數據可以直接生命；

　　　　let str2 = ref(str1);      
      //需要在頁面渲染的數據用ref包裹，這樣才能在后期修改變量值時，頁面同步絢爛

　　　　str2.value = "我改變了！"    
      //變量值被ref包裹時，想要修改得通過 變量名.value來修改否則會報錯

　　　　return {
　　　　　　str2
　　　　}

　　}

 

【4】this.$emit的改變

　　vue2.x  ===  子組件    this.$emit("handleFun",data);

　　vue3.x  ===  setup(props,context) {
　　　　　　　　　　　　context.emit("handleFun",data);   //vue3.0 setup自帶兩個參數props,context可以直接使用注意這里emit沒有$符號，父組件中還是同樣的方式操作
　　　　　　　　   }

 

 

【5】props的用法

　　vue2.x  === props:["attr1","attr2"];   

　　vue3.x ===

　　html部分

　　<div  v-for(item,index) in attr2 :key="index"  :style="{ 'color' : attr1 }" >

　　script部分　　

　　import { toRefs } from "vue";

 

　　props:{

　　　　attr1:String,

　　　　attr2:Object

　　},

　　setup(props) {

　　　　const  { attr1 , attr2 } = toRefs(props);　　//需要在setup讀取props中屬性值時使用，如果直接在html使用同vue2.x中一樣直接使用即可

　　　　const iNeed1 = attr1.value;     //使用時得用 .value 來讀取屬性值

　　　　const iNeed2 = attr2.value

　　　　return{
　　　　　　props　　//記得此處不return props ，template中將接受不到props屬性
　　　　}

　　}

 

 

　//入住博客第一篇文章，如果覺得有幫助請幫忙點個贊什么的，如果覺得不好請諒解，小菜比，全靠自己摸索====難受，有什么問題也可以跟我留言，如果我有過類似經歷會更新博客回答你的問題