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  ，html中将接受不到props属性

　　　　}

　　}

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