Vue initialization has been changed:

// let vm = new Vue({el: '#app', data: Function createApp({data() {return {}}).mount('#app')Copy the code

Changes to common parts

What’s new: The highlight of vue3 is the addition of Setup, which almost replaces data, Methods, Mounted and other life cycles. This is not accessible in SETUP

  • A setup function has been added to reduce data clutter. But my personal feeling is to unify data from other places into setup.

    <template>
    <! Or use $emit to send a value to the parent.
    <button @click=$emit('toFather', 'value to parent ')></button>    
</template>import {toRefs, ref} from 'vue' export default{ porps: [' MSG ', 'obj'], // setup accepts two parameters: // props, and because it is responsive, does not accept es6 struct, if you want to do so, use the toRefs method provided by vue // context: Setup (props, context) {// If we want to decouple the props, we need toRefs, const {obj} = toRefs(props); // If we want to decouple the props, we need toRefs. Vue3 uses Proxy console.log(obj. Value); vue3 uses Proxy console.log(obj. // The value of the declared variable must be xx. Value. // The value of the declared variable must be xx. Const name = ref("); const name = ref("); // If I want to get the value of my declared variable, I need console.log(name.value); // if I want to expose it, I need to return: return {name}}}Copy the code

  • $attr, which is an enhanced version of props and contains methods, was added as follows:

    Reference: The difference between props and attrs for vuE3 components

    // 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('information');
      const getMsgFromSon = (val) = > {
        console.log(val)
      };
​
      const ck = () = > {
        console.log(1)};return {
        message,
        getMsgFromSon,
        ck
      }
    }
  }
</script>
​
​
​
​
// Son.vue
<template>
  <div>
    <span>{{msg}}</span>
    <button @click="clickFn">button</button>
    <button @click="onQita2">Button 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'.'Message to parent')};console.log(props.msg)
      console.log(props.onQita)
      console.log(props, context);
      return {
        clickFn
      }
    }
  }
</script>
​

Copy the code

    • Props needs to be declared. Attrs is used without declaring. Attrs is context.attrs.

      If props were declared, attrs would not appear:

      If the props did not declare onQita2, attrs would appear:

    • Properties and methods declared by props will no longer appear in attrs.

Modified parts:

  • Changed the introduction of CDN, vue2 introduction is , vue3 is

  • Modified the original communication between emit and props for the parent component.

    Const {MSG} = toRefs(props) {MSG} = props (props) const {MSG} = toRefs(props) {MSG.

    Add emits: [‘toFather’] to the child and emits to declare that the child will call the parent as context.emit(‘toFather’, ‘to parent ‘). The parent will listen to the child in the same way.

    The concrete implementation is as follows:

    // 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('information');
      const getMsgFromSon = (val) = > {
        console.log(val)
      };
      return {
        message,
        getMsgFromSon,
      }
    }
  }
</script>
​
​
​
// Son.vue
<template>
  <div>
    <span>{{msg}}</span>
    <button @click="clickFn">button</button>
    <! Or use $emit to send a value to the parent.
    <button @click=$emit('toFather', 'value for parent ')">Button 2</button>
  </div>
</template>
​
<script>
  export default {
    name: "Son".props: {
      msg: String
    },
    emits: ['toFather'].setup(props, context) {
      const clickFn = () = > {
        context.emit('toFather'.'Message to parent')};console.log(props, context);
      return {
        clickFn
      }
    }
  }
</script>
Copy the code

  • Mixin is no longer deep mixin, but only the first layer

    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}}Copy the code

  • Global variables are set by the Vue. Prototype. Xx to the Vue. Config. GlobalProperties. Xx.

  • Changed keyCodes to support only names instead of keyboard codes:

    13="subimit"/> // New: matches both q and q <input @keyup.q="quit"/> // Matches pageDown <input @ keyup. Page - down = "quit" / > / / matches a comma < input @ keyup., = "quit" / > / / for the special characters ", ', /, =, >, and.. , via the listener's event.keyCopy the code

  • This.$scopedslots.header () now: this.$slots.header()

  • V-if and V-for are on the same element, v-if takes precedence, and v-for takes precedence.

  • V – model changed:

    // V-model is short for :value and @input, <Father :value="title" @input="title"></Father :value="title" @input="title" If (MSG ="message"></Father>) {// update: MSG ="message = $event" Value <div> <span>{{MSG}}</span> < button@click ="$emit('update: MSG ', </button> </div>Copy the code

Delete some

  • Removes $ON, $off, $once, and filters. Vue3 recommends using computed instead of filters.

  • Delete vue.extend and change to vue.createApp () because they are similar:

    // vue2 // create constructor const Profile = vue.extend ({template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data() { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg'}}}) // Create a Profile instance, 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')Copy the code