前端-vue3-vue3相比vue2改了啥

front-end-vue3-vue3相比vue2有什么变化？对于functioncreateApp({data(){return{}}}).mount('#app')变化的共同部分新增部分：vue3最大的亮点是新增了setup，几乎取代了data和methods，已安装和其他生命周期，并且无法在设置中访问它。添加了新的设置功能以降低数据的复杂性。但是我个人的感觉是把其他地方的数据放在setup里面。import{toRefs,ref}from'vue'exportdefault{porps:['msg','obj'],//setup接受2个参数//props:上面的props，因为是响应式的，所以不接受解构es6，如果想解构，使用vue提供的toRefs方法//context:setup(props,context){//如果想通过解耦获取props的值，需要使用toRefs,iforprops.msg.value直接取值const{obj}=toRefs(props);//如果想通过toRefs方法取数据的值，需要.value，这是因为vue3使用了Proxyconsole.log(obj.value);//变量声明的方法改变了，//需要使用ref//并且需要在外部导入ref，//并且声明变量的值需要xx.value，//并且像在数据中一样暴露声明的变量,需要在setup中returnout//比如:我声明了一个变量名,我需要用到ref,把初始值放在ref中constname=ref('');//如果我想得到我声明的变量的值，我需要：console.log(name.value);//''//如果我想对外暴露，需要返回：return{name}}}添加了$attr，它是props的增强版，包含了方法。详见下文：参考：vue3组件传值之props和attrs区别//Father.vue//Son.vueprops需要声明才能赋值，attrs可以不声明使用，attrs是通过第二个参数context得到的context.attrs.xx的设置。比如此时props声明了一切，那么它就不会出现在attrs中；比如此时props没有声明onQita2，那么它会出现在attrs中：props声明的属性和方法将不再出现在attrs中。修改部分：更改了cdn的介绍，vue2的介绍是，vue3的介绍是修改了原来父子组件之间的emit和props通信。parent使用props给自己传值，parent的写法不变，child在html中可以正常使用，但是setup中需要通过props.msg.value获取值，或者使用toRefs解耦const{msg}=toRefs(props)，但值仍然是msg.value。child传值给parent，emits：['toFather']被添加到child，emits声明了child调用parent的方法，执行是：context.emit('toFather','passtotheparent')，而父级监听子级的传递方式不变。具体实现如下：//Father.vue//Son.vuemixin混淆不再是深度混淆，现在只改了第一层混淆。constMixin={data(){return{user:{id:0,name:1,age:2}}}}constold={mixins:[Mixin],data(){return{user:{id:2}}},mounted(){console.log(this.user);}}//旧版本：{id:2,name:1,age:2}//新版本：{id:2}全局变量设置由Vue.prototype.xx更改为Vue.config.globalProperties.xx修改keyCodes,原来支持键盘代码，现在只支持名称：//旧版本//新版本：同时匹配q和Q//匹配向下翻页按钮//匹配逗号//用于特殊字符",',/,=,>and...，通过监听器的event.key，实现slot统一，commonslot和scopeslot统一，之前：this.$scopedSlots.header，现在：this.$slots.header()v-如果andv-for同时在同一个元素上，v-if优先，原v-for优先。v-modelchange://旧版本//在旧版本中，v-model是:value和@input的简写，例如//简写//Fullwrite//newversion//parent//child-parent不能设置@update:msg="message=$event"方法，可以改变子点击

删除部分删除$on、$off、$once、filters，推荐通过vue3我们使用计算而不是过滤器。删除了Vue.extend，改为Vue.createApp()，因为两者类似：//vue2//CreateconstructorconstProfile=Vue.extend({template:'

{{firstName}}{{lastName}}aka{{alias}}

',data(){return{firstName:'Walter',lastName:'White',alias:'Heisenberg'}}})//创建Profile实例并将其挂载到一个元素newProfile().$mount('#mount-point')//vue3constProfile={template:'

{{firstName}}{{lastName}}aka{{alias}}

',data(){return{firstName:'Walter',lastName:'White',别名:'Heisenberg'}}}Vue.createApp(Profile).mount('#mount-point')