关于前端:前端vue3vue3相比vue2改了啥

34次阅读

共计 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')

正文完
 0