vue的初始化改了：
// 旧版let vm = new Vue({ el: '#app', data: {}})// 新版，且data必须为function了createApp({ data() { return {} }}).mount('#app')罕用局部的改变
新增局部:vue3新增的最大亮点就是新加了setup，简直代替了data，methods，mounted等生命周期，且setup中无法访问this
新增了setup函数，用于缩小数据的繁杂。但个人感觉就是把其余中央的数据对立放到了setup中。
<template> <!-- 或者应用$emit给父级传值 --> <button @click="$emit('toFather', '传给父级的值')"></button> </template>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 } }}
新增了$attr，它是props的加强版，且蕴含办法，具体能够看上面：
参考资料：vue3 组件传值之 props 与 attrs 的区别
// Father.vue<template> <div> <Son :msg="message" @toFather="getMsgFromSon" @qita="ck" :onQita="ck" @qita2="ck"></Son> </div></template><script> import Son from './Son.vue' import {ref} from 'vue' export default { name: "Father", components: { Son, }, setup() { const message = ref('信息'); const getMsgFromSon = (val) => { console.log(val) }; const ck = () => { console.log(1) }; return { message, getMsgFromSon, ck } } }</script><style scoped></style>// Son.vue<template> <div> <span>{{msg}}</span> <button @click="clickFn">按钮</button> <button @click="onQita2">按钮2</button> </div></template><script> export default { name: "Son", props: { msg: String, onQita: Function, onQita2: Function }, emits: ['toFather'], setup(props, context) { const clickFn = () => { context.emit('toFather', '传给父级的信息') }; console.log(props.msg) console.log(props.onQita) console.log(props, context); return { clickFn } } }</script><style scoped></style>props须要先申明能力取值，attrs不必申明就能够用，attrs是通过setup第二个参数context取的
context.attrs.xx。比方此时props把所有都申明了，那么attrs中就不会呈现：
又比方此时props不申明onQita2，那么attrs中就会呈现：
- props申明过的属性和办法，attrs中不会再呈现。
批改局部：
- 改变了cdn的引入，vue2的引入为
<script src="https://unpkg.com/vue"></script>，vue3是<script src="https://unpkg.com/vue@next"></script> 批改了父子组件本来emit和props的通信。
父级向本人应用props传值，父级写法不变，子级在html中失常应用，但在setup中须要通过props.msg.value取值，或者用toRefs解耦
const {msg} = toRefs(props)，却取值还是msg.value。子级向父级传值，子级中减少
emits: ['toFather']，emits中申明了子级调用父级的办法，执行为:context.emit('toFather', '传给父级')，而父级监听子级的传递形式不变。具体实现如下：
// Father.vue<template> <div> <Son :msg="message" @toFather="getMsgFromSon"></Son> </div></template><script> import Son from './Son.vue' import {ref} from 'vue' export default { name: "Father", components: { Son, }, setup() { const message = ref('信息'); const getMsgFromSon = (val) => { console.log(val) }; return { message, getMsgFromSon, } } }</script>// Son.vue<template> <div> <span>{{msg}}</span> <button @click="clickFn">按钮</button> <!-- 或者应用$emit给父级传值 --> <button @click="$emit('toFather', '给父级的值')">按钮2</button> </div></template><script> export default { name: "Son", props: { msg: String }, emits: ['toFather'], setup(props, context) { const clickFn = () => { context.emit('toFather', '传给父级的信息') }; console.log(props, context); return { clickFn } } }</script>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，本来反对键盘码，当初只反对名了：
// 旧版<input @keyup.13="subimit"/>// 新版:同时匹配q和Q<input @keyup.q="quit"/>// 匹配pagedown按键<input @keyup.page-down="quit"/>// 匹配逗号<input @keyup.,="quit"/>// 对于特殊字符"、'、/、=、> 和 .。，通过监听器的event.key实现
- 插槽对立，对立了一般插槽和作用域插槽，以前：
this.$scopedSlots.header，当初：this.$slots.header() - v-if和v-for同时在一个元素上，v-if优先，本来v-for优先。
v-model扭转：
// 旧版// 旧版中v-model是:value和@input的简写，比方// 简写<Father v-model="title"></Father>// 全写<Father :value="title" @input="title"></Father>// 新版// 父级<Father v-model:msg="message"></Father>// 子级-父级能够不必设置@update:msg="message = $event"办法，即可实现子级点击后扭转父级传入的props.msg.value<div> <span>{{msg}}</span> <button @click="$emit('update:msg', '传给父级的信息')">按钮</button></div>
删除局部
- 删除了
$on，$off，$once，还有过滤器filters，vue3举荐大家应用computed代替filters。 删除了
Vue.extend，改为Vue.createApp()，因为两者比拟类似：// vue2// 创立结构器const Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data() { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } }})// 创立一个 Profile 的实例，并将它挂载到一个元素上new Profile().$mount('#mount-point')// vue3const Profile = { template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data() { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } }}Vue.createApp(Profile).mount('#mount-point')