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

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

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

罕用局部的改变

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

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

罕用局部的改变

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复