“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

1. Global API transfer

There are many global apis and configurations in Vue 2.x

  • Such as registering global components, registering global directives, etc
  • Vue.component('',{
  data:()=>({
    name:'zhao'
  }),
  template:'<a>{{name}}</a>'
})
Copy the code

The API has been tweaked in Vue3.0

Adjust the global API, Vue. XXX, to the application instance (app)

2. X Global API (Vue) 3. X Instance API (APP)
Vue.config.xxx app.config.xxx
Vue.config.producyionTip (Vue prompt) remove
Vue.component app.component
Vue.directive app.directive
Vue.mixin app.mixin
Vue.use app.use
Vue.prototype app.config.globalProperties

2. Other changes

  • The class name of vUE transition changes to vue 3.0

    .v-enter-from,

    .v-leave-to{

    opacity:0;

    }

    .v-enter-from,

    .v-leave-to{

    opacity:1;

    }

    Remove keyCode as v-ON modifier,

    Remove the V-on. native modifier

    Bind events in the parent component

    <sun
  v-on:close="hand"
  v-on:click="hands"
></sun>
Copy the code

    Declare custom events in child components

    export default {
  emits:['close'],
  }
Copy the code

Remove the filter

In general, vuE3’s new features can include the following:

“Performance” : Performance optimization

Tree-shaking Support: Supports Tree shaking

Composition API: Composition API

Fragments, Teleport, Suspense: New components

Better TypeScript support: Better TypeScript support

Custom Renderer API: Custom Renderer

That’s all the new features of Vue3. Let’s take a look at the differences between MVVM and MVC frameworks:

The MVC pattern

  • View

    Receives user actions and passes instructions to the Controller

  • Controller

    The controller performs business logic according to user actions and requires the model to change.

  • Model

    The Model layer sends new data to the View, the user gets feedback, and the Model layer stores the data presented by the View layer

The MV-VM mode View layer is used to receive user requests (DOM manipulation, Ajax, etc.). The ViewModel listens for changes in the state of the request at the View layer and changes in the data at the Model layer. There is two-way data binding between the ViewModel and the Model layer. The Model layer listens for changes in the ViewModel. Follow View -> Controller ->Model ->View MVVM Model cannot operate View layer data can communicate bidirectionallyCopy the code

Change Controller layer to ViewModel layer

  • The View layer is used to receive user requests (DOM events, Ajax, etc.)
  • The ViewModel listens for changes in the View layer request state and changes in the Model layer data state
  • Data is bidirectional binding between ViewModel and Model, and the Model layer listens for changes in ViewModel – essential difference between MVC and MVVM
  • MVC mode, data is one-way communication,
  • Follow the View -> Controller -> Model -> View direction
  • MVVM mode, data can be two-way communication

At this point, it should be mentioned that Vue3.2 has been released.

In the Vue log, it reads:

Vue version 3.2 includes many important new features and performance improvements, but does not contain major changes.

3. New single-file component features

< Script Setup > is a compile-time syntax sugar that greatly improves productivity when using the Composition API within SFC.

Originally vue3.0 exposed variables had to return to be used in the template

<script>
import A from './AAA.vue'
import B from './BBB.vue'
export default {
  setup (props) {
  	return {
  	  well: Math.random(),
  	  A,
  	  B
  	}
  }
}
</script>
Copy the code

Here is an example component that uses the two new features together:

<script setup> import { ref } from 'vue' const color = ref('red') </script> <template> <button @click="color = color ===  'red' ? 'green' : 'red'"> Color is: {{ color }} </button> </template> <style scoped> button { color: v-bind(color); } </style>Copy the code

Now here is a new writing method in Vue3.2, not too much update in 3.2, so it is also easy to learn and master ~