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属性
　　　　}

　　}

 

 

　//入住博客第一篇文章，如果觉得有帮助请帮忙点个赞什么的，如果觉得不好请谅解，小菜比，全靠自己摸索====难受，有什么问题也可以跟我留言，如果我有过类似经历会更新博客回答你的问题