The introduction

This paper records the differences between 2.* and 3.0 for the author’s own understanding, mainly to help the author understand 3.0, not rigorous teaching, if there is inaccurate, please do not blame, learn from each other.

start

First of all, based on my own reading of the document, I divided the overall differences in the use of Vue into four parts based on my understanding of the framework, and then I will write according to the order.

  • configuration
  • API
  • Component/instruction
  • Combination of the API

configuration

app.config

First look at the official introduction

We can then mount options under the current object

  • errorHandler
  • warnHandler
  • globalProperties
  • isCustomElement
  • optionMergeStrategies
  • performance

One difference from the 2.* version is globalProperties and isCustomElement

globalProperties

According to the official introduction of a situation, is actually to do some global attribute methods, can be replaced 2.* the original two ways of doing

  • Global allmixin
// main.js
const allMixin = {
    data () {
        return {
            someConfig: 'xxxx'}},methods: {
        someFn () {
            console.log('I am someFn')}}}// global mixin
Vue.mixin(allMixin)

// xxx.vue
console.log(`all mixin data have someConfig ${vm.someConfig}`)
// Print 'all mixin data have someConfig XXXX '
vm.someFn()
// 'I am someFn'
Copy the code

The goal of global blending is to add some options to the global configuration of Vue. Status and method can be replaced by globalProperties

  • Prototype inheritance vue.property.xxxx
// main.js
Vue.prototype.$config = {
    someConfig: 'xxxx'.someFn: () = > {
        console.log('I am someFn')}}// xxx.vue
console.log(`all mixin data have someConfig ${vm.$config.someConfig}`)
// Print 'all mixin data have someConfig XXXX '
vm.$config.someFn()
// 'I am someFn'
Copy the code

This is similar to the official use case of globalProperties, which uses the JS prototype inheritance method to find the corresponding property method through the prototype search

app.config.globalProperties.foo = 'bar'

app.component('child-component', {
  mounted() {
    console.log(this.foo) // 'bar'}})Copy the code

In fact, we will find that it is quite close to our second method, but the author has a brief look at the implementation of the method is still not quite the same, scan the source code should be through this or our VM proxy get interception processing, direct value judgment ~, Another point is that the globalProperties name actually conveys semantics, making it easier for other developers to read the code.

isCustomElement

First let’s take a look at the official introductionFrom the introduction, it seems, is to provide an interface to pass a filtering methods, convenient Vue screening components of custom components, the author think of before a particular application scenario, simple to share with you, we are WeChat drainage business needs, need from WeChat drainage to specific APP, here will involve WeChat ability in the open platformWechat webpage jump APP functionDuring development, it was discovered that it could not be used directly in single-file componentswx-open-launch-appThis problem can be avoided with the following code under the new capability

app.config.isCustomElement = tag= > tag.startsWith('wx-')
Copy the code

IsCustomElement provides an extension of third-party custom components, making the DOM structure more semantic

emits

This is a big change, as in 2.*, the sub-component events are sent through vm.$emit(…). But the event name itself is not agreed, and there is no corresponding return check. In this context, the parameters returned by the event actually need to be verified. After all, in this scenario, there is no way to ensure that the given parameters are exactly what we expect (of course, you can use TS to do related static type checking), but it is not a perfect solution. The emits provided in 3.0 actually increases the reliability of our overall components, depending on how well people follow the specification and use it.

Let’s take a look at the specific use case of emits

const app = Vue.createApp({})

// Array syntax
app.component('todo-item', {
  emits: ['check'].created() {
    this.$emit('check')}})// Object syntax
app.component('reply-form', {
  emits: {
    // There is no validation function
    click: null.// with validation functions
    submit: payload= > {
      if (payload.email && payload.password) {
        return true
      } else {
        console.warn(`Invalid submit event payload! `)
        return false}}}})Copy the code

renderTracked

The new declaration cycle mainly refers to the situation that data is tracked in the rendering stage, as shown in the following case

vue.template

<template>
  <div class="home">
    {{test}}
    {{test1}}
  </div>
</template>
Copy the code

vm.option

export default defineComponent({
  data () {
    return {
      test: '1'.test1: '2'
    }
  },
  renderTracked (event) {
    console.log(event)
  }
})
Copy the code

So we get the following output on the console

Through the above content, we can know which attribute is specifically tracked in the rendering stage, and then we can check the corresponding elements that should not be tracked or elements that should be tracked are not tracked

renderTriggered

In the same way, the current life cycle represents attributes triggered during rendering

API

defineComponent

The name is used to define a component, but the underlying object is either directly returned or constructed as a setup declaration cycle

// packages/runtime-core/src/apiDefineComponent.ts
export function defineComponent(options: unknown) {
  return isFunction(options) ? { setup: options, name: options.name } : options
}
Copy the code

Function on Vue official actually also made response description

defineAsyncComponent

Define an asynchronous component. In fact, we had a similar experience with vue-Router lazy loading, but the Vue API can help us define related components at a smaller granularity

defineAsyncComponent, resolveDynamicComponent, resolveDirective

You can analyze the corresponding content by name, but at present the purpose is not particularly clear, interested partners can browse the official documents, senior leaders welcome message education

createRenderer

Custom render constructor, which is actually left open for cross-ends. After all, the existing host environment has been more changeable, such as weex cross-segment support ah, of course, this is my humble opinion, different views welcome to discuss

Component/instruction

teleport

To understand

, think briefly of the use of slot.

is a way to inject templates from outside a component as follows

<! -- Children -->
<template>
    <div class="children-wrap">
        <slot />
    </div>
</template>

<! -- Parent template -->
<template>
    <children>
        <div>I'm from the parent component</div>
    </children>
</template>

<! -- Final render -->
<div class="children-wrap">
    <div>I'm from the parent component</div>
</div>
Copy the code

Then actually is < teleport > is, in turn, from the inside as outside give ~, but after I test, in fact is not like similar to the effect of the slot, mainly is no way to move to the parent component defined in the template, can only transfer to the class/id/tag in the HTML document. Of course, there is a certain significance, such as the official said

Of course, there are other scenarios besides modal boxes, such as layout operations, head, bottom, drawer components, etc.

v-is

The official API of this command has been stated more clearly ~, here it is only mentioned without explanation, click here to see

Combination of the API

This is basically the biggest change in 3.0, and it is best to record usage in a dedicated release

This issue first so, everyone goodbye ~ have a question welcome to leave a message to discuss, according to this article to carry on the technical study of the students, not responsible!