vue 3.0 常用API 的介绍

vue3.0

生命周期

1. 写法一 和vue2.x 一致 区别在于（beforeUnmount、unmount）名称不一样
2. 写法二 在setup 中使用， 需要引用
   
   如： import { onBeforeMount } from ‘vue’
   
   Setup(){ onBeforeMount( () =>{} ) }

Hook

Hook：是一个函数、把setup函数中的组合api进行了封装，类似于vue2中的mixin，

Src目录下新建hooks文件夹 里面写各种逻辑的hook

toRef 和 torefs

在使用 reactive 创建对象后， 在模板中使用对象中的属性， 会多次书写 对象的名称。可以使用这两个api 来把要使用的 单独定义出来

const hero = reactive({
  name: 'zhangsan',
  age: 23,
  family: {
    mather: 'dd'
  }
})
const name = toRef(hero, 'name')
const namgChange = () => {
  hero.name = 'lisi'
}

<h1>{{hero.name}}</h1>
<h1>{{name}}</h1>
<button @click="namgChange">
  变化
</button>

上面列子中对hero.name 修改和对 name修改时同等效果的

上面toRef 一次只能处理一个属性

toRefs 一次能处理多个属性

import { toRefs } from "vue";
 setup() {
return {
     ...toRefs(Hero)
    }
}

toRaw

操作场景 用于读取响应式数据，后续操作不会引起页面数据变化

将一个由reactive生成的响应式对象转为普通对象（ref生成的不行）

markRaw

标记一个对象永远不作为响应式对象

用法 markRaw(需要标记的对象)

customRef

创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制，customRef里面需要写一个函数，函数接收两个参数，并且应该返回一个带有 get 和 set 的对象

track () 在get中通知vue追踪return出去的数据变化

tigger() 在set中改完数据后 通知vue重新解析模板

<template>
  <input v-model="keyword" />
  <h3>{{keyword}}</h3>
</template>

<script>
import { customRef } from "vue";
export default {
  name: 'Testvue',
  setup() {
    function myref(value,time = 1000) {
      let timer;
      return customRef((track, tigger) => {
        return {
          get() {
            track() // 通知vue追踪value的变化
            return value
          },
          set(newValue) {
            clearTimeout(timer)
            timer = setTimeout(() =>{
              value = newValue
              tigger() // 改完数据后 通知vue重新解析模板
            }, time)
          }
        }
      })
    }
    let keyword = myref('hello', 500)
    return {
      keyword
    }
  }
};
</script>

provide 和 inject

父组件用provide提供数据 后代组件用inject使用数据

父组件

<template>
  <input v-model="keyword" />
  <h3>{{keyword}}</h3>
  <hellochild></hellochild>
</template>

<script>
import { customRef, provide } from "vue";
import hellochild from './hellochild.vue'
export default {
  name: 'Testvue',
  components: {
    hellochild
  },
  setup() {
    function myref(value,time = 1000) {
      let timer;
      return customRef((track, tigger) => {
        return {
          get() {
            track() // 通知vue追踪value的变化
            return value
          },
          set(newValue) {
            clearTimeout(timer)
            timer = setTimeout(() =>{
              value = newValue
              tigger() // 改完数据后 通知vue重新解析模板
            }, time)
          }
        }
      })
    }
    let keyword = myref('hello', 500)
    provide('keyword', keyword)
    return {
      keyword
    }
  }
};
</script>

子组件

<template>
  <div>
    我是组件件， 看下 父组件的 keyword {{keyword}}
  </div>
</template>
<script setup>
import {inject} from 'vue'
let keyword = inject('keyword')
</script>

Computed计算属性

有简写和完整写法之分，完整写法考虑读写

   // 计算属性 简写 -- 单纯的读取
    person.fullName = computed(() => {
      return person.firstName + person.lastName
    })

    // 计算属性完整写法 --- 考虑修改
    person.fullName = computed({
      get() {
        return person.firstName + person.lastName
      },
      set(value) {
        const nameArr = value.split('-')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]
      }
    })

watchEffect

不用指明监听那个属性的变化，回调函数中用到哪个属性，就监听那个属性变化

watch监听

监听ref所定义的一个响应式数据

1. 监听谁
2. 回调函数
3. 配置对象

<template>
  <h3>当前数值：{{ sum }}</h3>
  <button @click="sum++">增加</button>
</template>
<script>
import { ref, watch } from "@vue/runtime-core";
export default {
  setup() {
    let sum = ref(0);
    watch(
      sum,
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      {
        immediate: true, // 立即监听
        deep: true, // 深度监听
      }
    );
    return {
      sum,
    };
  },
};
</script>

监听ref 所定义的多个响应式数据

当监听多个响应式数据时，将多个数据放在一个数组里面，这样监听的newValue和oldValue都也都是也数组的形式呈现

<template>
  <h3>当前数值：{{ sum }}</h3>
  <button @click="sum++">增加</button>
  <h3>标题：{{ title }}</h3>
  <button @click="title+='~'">增加</button>
</template>
<script>
import { ref, watch } from "@vue/runtime-core";
export default {
  setup() {
    let sum = ref(0);
let title = ref("hi~");
// 监听多个
watch(
      [sum,title],
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      {
        immediate: true, // 立即监听
        deep: true, // 深度监听
      }
    )
    return {
      sum,
      title,
    };
  },
};
</script>

监听reactive 所定义的响应式数据的全部属性

无法正确获取oldValue，并且强制开启了深度监听。

监听reactive 所定义的某个属性

第一个参数要以回调函数返回写法

<template>
  <h3>姓名：{{Hero.username}}</h3>
  <h3>年龄：{{Hero.age}}</h3>
  <button @click="Hero.age++">改变年龄</button>
  <button @click="Hero.username += '~'">改变姓名</button>
</template>
<script>
import { reactive, watch } from "@vue/runtime-core";
export default {
  setup() {
    let Hero = reactive({
      username: '李四',
      age: 18,
      job: {
        j1: {
          speak: '你好'
        }
      }
    })
    // reactive所定义的响应式数据的某个属性
    watch(
      ()=>Hero.age, // 以回调形式拿到监听的属性
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      {
        immediate: true, // 立即监听
        deep: true, // 深度监听
      })
    return {
     Hero
    };
  },
};
</script>

监听reactive 所定义的数据的多个属性

如果监听的属性嵌套层次比较深 则需要开启深度监听

watch(
      [()=>Hero.username, ()=>Hero.age, () =>Hero.job], // 以回调形式拿到监听的属性
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      {
        immediate: true, // 立即监听
        deep: true, // 深度监听
    })