Vue3.0初步了解（2）-Vue3.0新特性

续接上篇文章 juejin.cn/post/697549… ，这篇文章主要还是介绍之前没说完的Vue3.0的新特性，我们一起来学习吧。

isRef()

isRef()是用来判断某个值是否为ref()创建出来的对象，返回值是boolean类型

<template>
  <div id="nav">
    <p>{{novel}}</p>
  </div>
</template>
<script>
  import {  isRef, reactive, ref } from 'vue';
  export default {
    setup(){
      let novel = ref('笨鸟');
      let list = reactive([]);
      console.log(isRef(novel));//true
      console.log(isRef(list));//false
      return {
        novel,
      }
    }
  }
</script>
复制代码

isReactive()

isReactive()是用来判断某个值是否为reactive()创建出来的对象，返回值是boolean类型，具体使用和isRef()相似。

roRef()

toRef类似于$set()的作用，可以动态的在原对象中添加动态属性。

toRefs()

toRefs()是将reactive()创建出来的响应式的对象转化为普通对象的函数，转化后的对象上每一个属性都是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:'笨鸟'});
      const {name} = toRefs(novel);
      const age = toRef(novel,'age');
      setTimeout(() => {
        age.value = 25;
      }, 500);
      return {
        novel,
        name
      }
    }
  }
</script>
复制代码

roRef()和toRefs()的区别

toRef是将一个对象的某个属性转化为响应式数据，toRefs是将整个对象的所有属性都转化为响应式数据。

计算属性computed

Vue3.0中的计算属性也是通过computed方法来实现的，并没有改变。

<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:'笨鸟'});
      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}岁`;
        }else{
          return `姓名是${name.value}`;
        }
      })
      return {
        novel,
        name,
        getData
      }
    }
  }
</script>
复制代码

监听器watch

watch方法提供两个方法作为参数,第一个返回要监听的数据,第二个是回调。

监听用ref声明的数据源

<template>
  <div id="nav">
    <p>{{ novelNum }}</p>
    <p>
      <button @click="lowFun">减少</button>
      <button @click="addFun">增加</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('数值过大');
          novelNum.value = 10;
        }else if(val<0){
          alert('数值过小');
          novelNum.value = 0;
        }
      })
      return {
        novelNum,
        lowFun,
        addFun
      }
    }
  }
</script>
复制代码

监听用reactive声明的数据源

<template>
  <div id="nav">
    <p>{{ novel }}</p>
  </div>
</template>
<script>
import {  reactive, watch } from 'vue';
  export default {
    setup(){
      let novel= reactive({name:'笨鸟',age:25});
      setTimeout(() => {
        novel.age = 18;
      }, 500);
      watch(()=>novel.age,(val,prevVal)=>{
        console.log('改变之后的值'+val);
        console.log('改变之前的值'+prevVal);
      })
      return {
        novel
      }
    }
  }
</script>
复制代码

上下文ctx

vue3.0中不再使用this,可以使用ctx获取当前页面的router和store

获取当前router

ctx.$router.currentRoute
复制代码

获取store

ctx.$store.state
复制代码

生命周期

Vue3.0中生命周期也是按需引入的，在setup()函数里面使用。beforeCreate和created没有了。

<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>
复制代码