持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

CustomRef

作用

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制

现在实现在 input 中输入，h2 标签中延迟半秒显示的功能：

看代码：

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

<script>
import {customRef} from 'vue'

export default {
  name: 'App',
  setup() {
    //const keyword = ref("hello")//使用vue提供的ref
    function myRef(value) {
      return customRef((track, trigger) => {
        let timer;
        return {
          get() {
            console.log(`有人从myRef读取数据了，我把${value}给它了`);
            track()//通知vue追踪数据的变化
            return value
          },
          set(newValue) {
            console.log(`有人把myRef的数据改了：${newValue}`);
            clearTimeout(timer)
            timer = setTimeout(() => {
              value = newValue
              trigger()//通知vue重新解析模板
            }, 500)

          }
        }
      })
    }

    const keyword = myRef("hello")//使用程序员自己写的ref
    return {
      keyword
    }
  }
}
</script>

provide 和 inject

作用

实现祖与后代组件间通信

套路

父组件有一个 provide 选项来提供数据。子组件有一个 inject 选项来开始使用这些数据

具体写法

1.祖组件中

setup(){
	......
	let car = reactive({name:"奔驰',price: '40万'})
	provide( "car",car)
	......
}

2.孙组件中

setup(){
	......
	const car = inject('car')
	return {car}
	......
}

我们来写一个例子，App 中包含 Child，Child 中包含 Son App 中有一个数据，要传给 Son App.vue

<template>
  <div class="app">
    <h3>我是App组件(祖){{ name }}--{{ price }}</h3>
    <Child/>
  </div>
</template>

<script>
import Child from "@/components/Child";
import {reactive, toRefs,provide} from "vue";

export default {
  name: 'App',
  components: {
    Child
  },
  setup() {
    let car = reactive({name: "奔驰", price: "40w"})
    provide("car",car)//给自己的后代组件提供数据
    return {...toRefs(car)}
  }
}
</script>

<style>
.app {
  background-color: gray;
  padding: 10px;
}
</style>

Child.vue

<template>
  <div class="child">
    <h3>我是Child组件(子)</h3>
    <Son/>
  </div>
</template>

<script>
import Son from "@/components/Son";
export default {
  name: 'Child',
  components:{
    Son
  }
}
</script>

<style>
.child {
  background-color: skyblue;
  padding: 10px;
}
</style>

Son.vue

<template>
  <div class="son">
    <h3>我是Son组件(孙){{car.name}}--{{car.price}}</h3>
  </div>
</template>

<script>
import {inject} from 'vue'

export default {
  name: 'Son',
  setup(){
    const car = inject('car')
    return {car}
  }
}
</script>

<style>
.son {
  background-color: orange;
  padding: 10px;
}
</style>

响应式数据的判断

isRef：检查一个值是否为一个ref 对象

isReactive：检查一个对象是否是由reactive创建的响应式代理

isReadonly：检查一个对象是否是由readonly创建的只读代理

isProxy：检查一个对象是否是由reactive或者readonly方法创建的代理

<template>
  <h3>我是App组件</h3>
</template>

<script>
import {isProxy, isReactive, isReadonly, isRef, reactive, readonly, ref, toRefs} from "vue";

export default {
  name: 'App',
  setup() {
    let car = reactive({name: "奔驰", price: "40w"})
    let sum = ref(0)
    let car2 = readonly(car)

    console.log(isReactive(car));//true
    console.log(isRef(sum));//true
    console.log(isReadonly(car2));//true
    console.log(isProxy(car));//true
    console.log(isProxy(car2));//true
    console.log(isProxy(sum));//false

    return {...toRefs(car)}
  }
}
</script>

Composition API的优势

Composition API是在 Vue3 中提出来的，Vue2 中的是 Options API(配置式的API)

Options API存在的问题 使用传统 Optilons API中，新增或者修改一个需求，就需要分别在 data，methods，computed 里修改

composition API的优势 我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起（借助hook）