前端-vue3-vue3相比vue2改了啥前端vue.jsvue3

vue的初始化改了：

// 旧版 let vm = new Vue({ el: '#app', data: {} })// 新版，且data必须为function了 createApp({ data() { return {} } }).mount('#app')

常用部分的改动新增部分:vue3新增的最大亮点就是新加了setup，几乎替代了data，methods，mounted等生命周期，且setup中无法访问this

【前端-vue3-vue3相比vue2改了啥】新增了setup函数，用于减少数据的冗杂。但个人感觉就是把其他地方的数据统一放到了setup中。

import {toRefs, ref} from 'vue' export default{ porps: ['msg', 'obj'], // setup接受2个参数 // props：即上面的props，且因为是响应式，不接受es6的解构，如果希望解构，则使用vue提供的toRefs方法 // context： setup(props, context) { // 如果想通过解耦取props的值，则需要用toRefs，如果或者props.msg.value直接取值 const {obj} = toRefs(props); // 通过toRefs方法的数据如果要取值需要.value，这是因为vue3采用了Proxy console.log(obj.value); // 变量声明的方法改变了， // 需要通过ref来 // 且需要在外面import引入ref， // 且声明的变量的取值需要xx.value， // 且要实现像data中一样暴露声明的变量，需要在setup中return出去 // 比如：我声明一个变量name，需要用ref，ref中放初始值 const name = ref(''); // 如果我想要获取我声明变量的值，则需要： console.log(name.value); // '' // 如果我想要对外暴露，则需要return出去： return { name } } }

修改部分：

改动了cdn的引入，vue2的引入为，vue3是
修改了父子组件原本emit和props的通信。
父级向自己使用props传值，父级写法不变，子级在html中正常使用，但在setup中需要通过props.msg.value取值，或者用toRefs解耦const {msg} = toRefs(props)，却取值还是msg.value。
子级向父级传值，子级中增加emits: ['toFather']，emits中声明了子级调用父级的方法，执行为:context.emit('toFather', '传给父级')，而父级监听子级的传递方式不变。
具体实现如下：

// Father.vue // Son.vue
mixin混淆不再是深层混淆了，现在改为只混淆第一层

const Mixin = { data() { return { user: { id: 0, name: 1, age: 2 } } } }const old = { 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 // 匹配pagedown按键 // 匹配逗号 // 对于特殊字符"、'、/、=、> 和 .。，通过监听器的event.key实现

插槽统一，统一了普通插槽和作用域插槽，以前：this.$scopedSlots.header，现在：this.$slots.header()
v-if和v-for同时在一个元素上，v-if优先，原本v-for优先。
v-model改变：

// 旧版 // 旧版中v-model是:value和@input的简写，比如 // 简写 // 全写 // 新版 // 父级 // 子级-父级可以不用设置@update:msg="message = $event"方法，即可实现子级点击后改变父级传入的props.msg.value{{msg}}

删除部分

删除了$on，$off，$once，还有过滤器filters，vue3推荐大家使用computed代替filters。
删除了Vue.extend，改为Vue.createApp()，因为两者比较相似：

// vue2 // 创建构造器 const Profile = Vue.extend({ template: '{{firstName}} {{lastName}} aka {{alias}} ', data() { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } }) // 创建一个 Profile 的实例，并将它挂载到一个元素上 new Profile().$mount('#mount-point')// vue3 const Profile = { template: '{{firstName}} {{lastName}} aka {{alias}} ', data() { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } } Vue.createApp(Profile).mount('#mount-point')