Vue3.0 Overview (2) – New features of Vue3.0

Continuation of the previous article juejin.cn/post/697549… This article mainly introduces the new features of Vue3.0 that we haven’t finished before. Let’s learn them together.

isRef()

IsRef () is an object created to determine whether a value isRef() and returns a Boolean value

<template>
  <div id="nav">
    <p>{{novel}}</p>
  </div>
</template>
<script>
  import {  isRef, reactive, ref } from 'vue';
  export default {
    setup(){
      let novel = ref('stupid bird');
      let list = reactive([]);
      console.log(isRef(novel));//true
      console.log(isRef(list));//false
      return {
        novel,
      }
    }
  }
</script>
Copy the code

isReactive()

IsReactive () is an object created to check whether a value is created by reactive(). The return value is a Boolean, similar to isRef().

roRef()

ToRef is similar to $set() and can dynamically add attributes to the original object.

toRefs()

ToRefs () is a function that converts a reactive object created by Reactive () into a normal object, where each property is reactive data of type REF ().

<template>
  <div id="nav">
    <p>{{novel}}</p>
    <p>{{name}}</p>
  </div>
</template>
<script>
  import {   reactive, toRef, toRefs } from 'vue';
  export default {
    setup(){
      let novel = reactive({name:'stupid bird'});
      const {name} = toRefs(novel);
      const age = toRef(novel,'age');
      setTimeout(() = > {
        age.value = 25;
      }, 500);
      return {
        novel,
        name
      }
    }
  }
</script>
Copy the code

Difference between roRef() and toRefs()

ToRef converts an attribute of an object to responsive data, while toRefs converts all attributes of the entire object to responsive data.

Computed attribute computed

Computed properties in Vue3.0 are also implemented using computed methods and do not change.

<template>
  <div id="nav">
    <p>{{ novel }}</p>
    <p>{{ name }}</p>
    <p>{{ getData }}</p>
  </div>
</template>
<script>
  import { computed, reactive, toRef, toRefs } from 'vue';
  export default {
    setup(){
      let novel = reactive({name:'stupid bird'});
      const {name} = toRefs(novel);
      let age = toRef(novel,'age');
      setTimeout(() = > {
        age.value = 25;
      }, 500);
      const getData = computed(() = >{
        if(age.value === 25) {return `${name.value} - ${age.value}At the age of `;
        }else{
          return ` name is${name.value}`; }})return {
        novel,
        name,
        getData
      }
    }
  }
</script>
Copy the code

Listener watch

The watch method provides two methods as arguments, the first returning the data to listen for and the second a callback.

Listen for the data source declared with ref

<template>
  <div id="nav">
    <p>{{ novelNum }}</p>
    <p>
      <button @click="lowFun">To reduce</button>
      <button @click="addFun">increase</button>
    </p>
  </div>
</template>
<script>
  import { ref, watch } from 'vue';
  export default {
    setup(){
      let novelNum = ref(5);
      const lowFun = () = >{
        novelNum.value--;
      }
       const addFun = () = >{
        novelNum.value++;
      }
      watch(() = >novelNum.value,(val) = >{
        if(val>10){
          alert('Too large');
          novelNum.value = 10;
        }else if(val<0){
          alert('Value too small');
          novelNum.value = 0; }})return {
        novelNum,
        lowFun,
        addFun
      }
    }
  }
</script>
Copy the code

Listen to data sources declared with Reactive

<template>
  <div id="nav">
    <p>{{ novel }}</p>
  </div>
</template>
<script>
import {  reactive, watch } from 'vue';
  export default {
    setup(){
      let novel= reactive({name:'stupid bird'.age:25});
      setTimeout(() = > {
        novel.age = 18;
      }, 500);
      watch(() = >novel.age,(val,prevVal) = >{
        console.log('Changed value'+val);
        console.log('Change previous value'+prevVal);
      })
      return {
        novel
      }
    }
  }
</script>
Copy the code

Context CTX

Instead of using this in Vue3.0, you can use CTX to get the router and store of the current page

Obtain the current Router

ctx.$router.currentRoute
Copy the code

Access to the store

ctx.$store.state
Copy the code

The life cycle

Lifecycle is also introduced on demand in Vue3.0, used in the setup() function. BeforeCreate and Created are gone.

<template>
  <div id="nav">
  </div>
</template>
<script>
  import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated,  onBeforeUnmount, onUnmounted, onErrorCaptured } from 'vue';
  export default {
    setup(){
      onBeforeMount(() = > {
        console.log("onBeforeMount");
      });
      onMounted(() = > {
        console.log("onMounted");
      });
      onBeforeUpdate(() = > {
        console.log("onBeforeUpdate");
      });
      onUpdated(() = > {
        console.log("onUpdated");
      });
      onBeforeUnmount(() = > {
        console.log("onBeforeUnmount");
      });
      onUnmounted(() = > {
        console.log("onUnmounted");
      });
      onErrorCaptured(() = > {
        console.log("onErrorCaptured");
      });
      return{}}}</script>
Copy the code