vue 3.0 常用api 的简介

vue3.0

生命周期

写法一和vue2.x 一致区别在于（beforeUnmount、unmount）名称不一样
写法二在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所定义的一个响应式数据

监听谁
回调函数
配置对象

<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, // 深度监听

    })

巴特西