This is the fourth day of my participation in the wenwen Challenge

This article mainly shares some details of vue3’s new features, modifications and deletions that were not mentioned in the previous article. You can learn more about VUe3 in detailThe official documentation

Component V-Model supports parameters

In Vue2. X, if we want to pass a value to a child component, we have to pass it in separately. Vue3.x directly passes the parameter in the form of V-model: XXX and synchronizes data with the modifier. Sync

The component supports multiple V-Models

Previously, only one V-Model could be written on a component. Now, in VUe3, v-Models can be written multiple times. There is no longer a limit to one v-Model

Setup’s this points to the problem

Previously, vue2 used the optional API to declare variables and store data in data and write methods in Methods. You can use this to store things in data in methods. However, vue3 now uses the combined API, which is written uniformly in setup. Since data and methods cannot be used in setup functions, in order to avoid errors in using Vue, this is changed to undefined in setup functions

<template>
  <div>XMJ</div>
</template>
<script>
export default {
  name: 'App'.setup() {
    console.log(this); // undefined}}</script>
Copy the code

Function parameters

props

Receive all data passed by the component and be responsive.

<template>
  <div>XMJ</div>
</template>
<script>
export default {
  name: 'App'.props: {
      title: {
          type: String}},setup(props) {
    console.log(props.title)
  }
}
</script>

Copy the code

Note that the props data cannot be destructed, otherwise the reactive data will be invalid

<template>
  <div>XMJ</div>
</template>
<script>
export default {
  name: 'App'.props: {
      title: {
          type: String}},setup({ title }) {
    console.log(title) // Reactive data will be invalidated}}</script>

Copy the code

context

This parameter provides a context object that selectively exposes properties from the original 2.x.

  • attrs
  • slots
  • emit
<template>
  <div>XMJ</div>
</template>
<script>
export default {
  name: 'App'.props: {
      title: {
          type: String}},setup(props, { attrs, slots, emit } ) {
    console.log(attrs) 
  }
}
</script>

Copy the code

Above, attrs and slots are proxies for the corresponding item on the internal component instance, ensuring that the value is still up to date after updates. So you can use deconstruction syntax here.

The return value

You can render the setup function return value onto the page. However, the setup return value must be an object, otherwise returning other values will render invalid.

Readonly

This method receives an object that is read-only by default. The deep object is read-only, no matter how many layers of properties are nested.

WatchEffect

This method takes a function and executes it immediately, re-executing the function when the variables in the function change. This method does not get the original value, only the changed value.

import { ref, watchEffect } from "vue"
export default {
 name: 'test'.setup() {
    let name = ref("XMJ");
    let age = ref(23);
    watchEffect(() = > {
        name.value; / / to monitor the name
        age.value;  / / to monitor the age
        
        console.log(name.value)
        console.log(age.value)
    })
    
    setTimeout(() = > {
        name.value = "Front end"
    }, 5000)

    setTimeout(() = > {
        age.value = 18
    }, 1000)
  }
}
</script>

Copy the code

If you want to listen for a value, you need to write it in the function, otherwise the listen will not work

Cancel to monitor

Sometimes we want to cancel listening after triggering certain conditions. The return value of watchEffect can then be executed.

import { ref, watchEffect } from "vue"
export default {
 name: 'test'.setup() {
    let name = ref("XMJ");
    let age = ref(23);
    let stop = watchEffect(() = > {
        name.value; / / to monitor the name
        age.value;  / / to monitor the age
        
        console.log(name.value)
        console.log(age.value)
    })
    
    setTimeout(() = > {
        name.value = "Front end"
    }, 5000)

    setTimeout(() = > {
        age.value = 18;
        setTimeout(stop, 300)},1000)
  }
}
</script>
Copy the code

Watch

Watch is equivalent to this.$watch in vue2. x. Watch needs to listen for specific data. In contrast to the WatchEffect, Watch allows us

  • Lazy function execution
  • Make it clearer which state changes trigger listeners
  • You can listen for values before and after changes

Provide && Inject

This method is the same as provide and inject of vue2. x. However, new to Vue3, these two methods can only be used in setup.

  • Provide: Accepts two parameters, the firstkeyValue, secondvalueValue to be passed
  • Inject: receives two parameters, the first beingprovidethekeyValue, default The second parameter is optional, you can set the default value (when not foundkeyValue, set a default value)

isReadonly isRef isReactive

  • isReadonly: Used to check whether the data is readable. Returns aBooleantype
  • isRef: Is used to check whether the data isrefResponsive data. Returns aBooleantype
  • isReactive: Is used to check whether the data isreacttiveResponsive data. Returns aBooleantype
Copy the code

Remove filters

Removed filter in Vue3. X, no longer supported. Use computed instead is recommended. Post an example from the official website

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountInUSD }}</p>
</template>

<script>
  export default {
    props: {
      accountBalance: {
        type: Number.required: true}},computed: {
      accountInUSD() {
        return '$' + this.accountBalance
      }
    }
  }
</script>
Copy the code

Template is no longer restricted to a root node

Vue3. X will no longer have a single root node in the restricted template, and the root component can have any number of elements

Custom V-Model modifiers

In Vue3. X, we have added customizable modifiers, such as built-in methods provided by the Api. Trim, the new feature, is also customizable. Here’s an example of writing a modifier that converts a string to uppercase

One thing in particular: if your V-model parameter is STR, all the values received in the component will start with STR, such as the strModifiers in the props

Deprecate the on, off, once instance methods

Vue3. X has removed the $ON, $OFF, and $once instance methods, and the application instance no longer implements the event-triggering interface.

<script>
	created() {
        console.log(this.$on, this.$once, this.$off) // undefined undefined undefined
	}
</script>
Copy the code

Custom instruction changes

The custom specification in Vue3. X has changed slightly, see below.

  • bind –> beforeMountOccurs after the directive is bound to an element. It only happens once
  • inserted –> mountedThe element is inserted into the parentDOMafter
  • beforeUpdate: Vue3.xNewly added, this is called before the element is updated,
  • componentUpdated –> updated
  • beforeUnmount : Vue3.xNewly added, will be called before the element is unloaded

–unbind–> unmounted

The last

vue3Basic and finished learning, the changes are not very big in terms of use, but the underlying code construction is written from the new, learning and updating the learning experience article is not easy, hope to finish reading friends can click