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