锐客网


首页 > 科技 > it技术 > >

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

『锐客网摘要_前端-vue3-vue3相比vue2改了啥』vue的初始化改了: // 旧版let vm = new Vue({el: '#app',data: {}})// 新版,且data必须为function了createApp({data() {return {}}}).mount('#app') 常用部分的改动 新增部分:vue3新增的最大亮点就是新加了setup,几...


按关键词阅读: 前端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 } } }

  • 新增了$attr,它是props的加强版,且包含方法,具体可以看下面:
    参考资料:vue3 组件传值之 props 与 attrs 的区别
    // Father.vue // Son.vue

    • props需要先声明才能取值,attrs不用声明就可以用,attrs是通过setup第二个参数context取的context.attrs.xx
      比如此时props把所有都声明了,那么attrs中就不会出现:
      前端-vue3-vue3相比vue2改了啥
      文章图片

      又比如此时props不声明onQita2,那么attrs中就会出现:
      前端-vue3-vue3相比vue2改了啥
      文章图片

    • props声明过的属性和方法,attrs中不会再出现。
修改部分:
  • 改动了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')

    来源:( 未知 )

    声明:本文是由网友投稿,文中所阐述的观点不代表本网的立场。



    本文网址【锐客网】http://www.readke.com/c/10142Y52R021.html

    原题:前端-vue3-vue3相比vue2改了啥


    上一篇:docker 安装redis

    下一篇:深度干货|云原生分布式数据库 PolarDB-X 的技术演进