共计 4423 个字符，预计需要花费 12 分钟才能阅读完成。
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') // vue3 const Profile = {template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data() { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } } Vue.createApp(Profile).mount('#mount-point')
正文完
