Vue 入门到实战 八

第8章 组合API与响应性

目录

[8.1 响应性](#8.1 响应性)

[8.1.1 什么是响应性](#8.1.1 什么是响应性)

[8.1.2 响应性原理](#8.1.2 响应性原理)

[8.2 为什么使用组合API](#8.2 为什么使用组合API)

[8.3 setup组件选项](#8.3 setup组件选项)

[8.3.1 setup函数的参数](#8.3.1 setup函数的参数)

[8.3.2 setup函数的返回值](#8.3.2 setup函数的返回值)

[8.3.3 使用ref创建响应式引用](#8.3.3 使用ref创建响应式引用)

[8.3.4 setup内部调用生命周期钩子函数](#8.3.4 setup内部调用生命周期钩子函数)

[8.4 提供/注入](#8.4 提供/注入)

[8.4.1 provide方法](#8.4.1 provide方法)

[8.4.2 inject方法](#8.4.2 inject方法)

[8.5 模板引用](#8.5 模板引用)

[8.6 响应式计算与侦听](#8.6 响应式计算与侦听)

[8.6.1 响应式计算](#8.6.1 响应式计算)

[8.6.2 响应式侦听](#8.6.2 响应式侦听)

---

8.1 响应性

8.1.1 什么是响应性

响应性是一种允许我们以声明式的方式去适应变化的一种编程范例。Vue.js如何追踪数据的变化呢？在生成Vue.js实例时，使用带有getter和setter的处理程序遍历传入的data，将其所有property转换为Proxy对象。Proxy代理对象，顾名思义，在访问对象前增加一个中间层，通过中间层做一个中转，通过操作代理对象，实现目标对象的修改。Proxy对象对于用户来说是不可见的，但在内部，它使Vue.js能够在property值被访问或修改的情况下进行依赖跟踪和变更通知。

【例8-1】property转换为Proxy对象。

<script>
    const data = {
        uname: 'chenheng',
        age: 90
    }
    const handler = {
        get(target, name, receiver) {
            alert('执行get方法')
            //Reflect.get 方法查找并返回 target 对象的 name 属性，如果没有该属性，则返回 undefined
            return Reflect.get(...arguments)
        },
        set(target, name, value, receiver) {
            alert('执行set方法')
            //Reflect.set 方法设置 target 对象的 name 属性等于 value。
            return Reflect.set(...arguments)
        }
    }
    const proxy = new Proxy(data, handler)
    alert(proxy.uname)    //执行get方法
    proxy.uname = 'hhhhh' //执行set方法
    alert(proxy.uname)    //执行get方法
</script>

target

要包装的目标对象Proxy。它可以是任何类型的对象，包括本机数组，函数甚至其他代理

handler

一个对象，其属性是定义对代理p执行操作时的行为的函数

proxy监听数组

proxy可以监听属性的新增删除操作

proxy监听深层次嵌套对象

8.1.2 响应性原理

reactive()方法和watchEffect()方法是Vue3中响应式的两个核心方法，reactive()方法负责将数据变成响应式代理对象，watchEffect()方法的作用是监听数据变化去更新视图或调用函数。

【例8-2】reactive()方法和watchEffect()方法的应用。

8.2 为什么使用组合API

通过创建Vue.js组件，可以将接口的可重复部分及其功能提取到可重用的代码段中，从而使应用程序可维护且灵活。然而，当应用程序非常复杂（成百上千组件）时，再使用组件的选项（data、computed、methods、watch）组织逻辑，可能导致组件难以阅读和理解。如果能够将与同一个逻辑相关的代码配置在一起将有效解决逻辑复杂、可读性差等问题。这正是使用组合API的目的。

8.3 setup组件选项

Vue组件提供setup选项，供开发者使用组合API。setup选项在创建组件前执行，一旦props被解析，便充当组合式API的入口点。由于在执行setup时尚未创建组件实例，因此在setup选项中没有this。这意味着，除了props之外，无法访问组件中声明的任何属性，包括本地状态、计算属性或方法。

setup选项是一个接受props和context参数的函数。此外，从setup返回的所有内容都将暴露给组件的其余部分（计算属性、方法、生命周期钩子、模板等等）。

8.3.1 setup函数的参数

（1）setup函数中的第一个参数（props）

setup函数中的props是响应式的，当传入新的属性时，它将被更新。

【例8-3】在setup函数中，参数props是响应式的。

但是，因为props是响应式的，不能使用ES6解构，将会消除props的响应性。如果需要解构props，可以在setup函数中使用toRefs函数来完成此操作。

【例8-4】在setup函数中，使用toRefs函数创建props属性的响应式引用。

toRef是把对象的某个属性改成响应式的数据，toRefs是把整个对象改成响应式数据

（2）setup函数中的第二个参数（context）

context上下文是一个普通的JavaScript对象，它暴露组件的4个属性：attrs、slots、emit以及expose。

setup(props, context) {

// Attribute (非响应式对象，等同于 $attrs)

console.log(context.attrs)可以获取父组件的传递归来的参数hobby，但是一定需要注释props

// 插槽 (非响应式对象，等同于 $slots)

console.log(context.slots)

// 触发事件 (方法，等同于 $emit)

home.vue

<template>
  <Demo @zemit="showemit"></Demo>
</template>

<script>
import Demo from "@/components/demo.vue";
export default {
  components: {
    Demo,
  },
  setup() {
    function showemit(val) {
      alert(`触发context.emit事件，收到参数是：${val}`);
    }
    return {
        showemit,
    };
  },
};
</script>

demo.vue

<template>
  <p>个人信息</p>
  <p>姓名：{
  
  { person.name }}</p>
  <p>年龄：{
  
  { person.age }}</p>
  <button @click="zevent">zemit事件</button>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "Home12",
  emits: ["zemit"],
  setup(props, context) {
    console.log("1", props);
    // console.log("context.attrs", context.attrs);
    console.log("context.attrs", context.emit);
    const person = reactive({
      name: "刘巍",
      age: 18,
    });
    function zevent() {
      context.emit("zemit", '南昌大学');
    }
    return {  
      person,
      zevent,
     
    };
  },
};
</script>

8.3.2 setup函数的返回值

（1）对象

如果setup返回一个对象，则可以在组件的模板中访问该对象的属性。

【例8-5】在该实例中，setup函数返回一个对象。

<template>
  <h1>一个人的信息</h1>
  <h3>职业：{
  
  { job.type }}</h3>
  <h3>薪水：{
  
  { job.salary }}</h3>
  <h3>爱好：{
  
  { hobby }}</h3>
  <h3>测试数据的值：{
  
  { job.a.b.c }}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {reactive} from 'vue'

export default {
  name: 'App',
  setup() {
    //数据
    let job = reactive({
      type: 'SAP工程师',
      salary: '60k',
      a: {
        b: {
          c: 666
        }
      }
    })

    let hobby = reactive(['篮球', '说泡', '旅游'])
  //counts changeInfo = ()=>{...}
    function changeInfo() {
      job.type = "管理咨询顾问"
      job.salary = "100k"
      job.a.b.c = 999
      hobby[0] = '学习'
    }

    return {
      job,
      hobby,
      changeInfo
    }
  }
}
</script>

（2）渲染函数

setup还可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态。

【例8-6】实现【例8-5】的功能，要求setup返回渲染函数。

8.3.3 使用ref创建响应式引用

1．声明响应式状态

要为JavaScript对象创建响应式状态，可以使用reactive()方法。reactive()方法接收一个普通对象然后返回该对象的响应式代理。示例代码如下：

const book = Vue.reactive({ title: '好书' })

reactive()方法响应式转换是"深层的"即影响对象内部所有嵌套的属性。基于ES的 Proxy实现，返回的代理对象不等于原始对象。建议使用代理对象，避免依赖原始对象。

2．使用ref创建独立的响应式值对象

ref接受一个参数值并返回一个响应式且可改变的ref对象。ref对象拥有一个指向内部值的单一属性.value。示例代码如下：

const readersNumber = Vue.ref(1000)

console.log(readersNumber.value) //1000

readersNumber.value++

console.log(readersNumber.value) // 1001

当ref作为渲染上下文的属性返回（即在setup()返回的对象中）并在模板中使用时，它会自动开箱，无需在模板内额外书写.value。

8.3.4 setup内部调用生命周期钩子函数

在setup内部，可通过在生命周期钩子函数前面加上"on"来访问组件的生命周期钩子函数。因为setup是围绕beforeCreate和created生命周期钩子函数运行的，所以不需要显式地定义它们。换句话说，在这些钩子函数中编写的任何代码都应该直接在setup函数中编写。这些on函数接受一个回调函数，当钩子函数被组件调用时将会被执行。示例代码如下：

setup() {

// mounted时执行

onMounted(() => {

console.log('Component is mounted!')

})

}

8.4 提供/注入

通过4.3.4节可知，使用provide和inject可实现组件链传值。也就是说，父组件可以作为其所有子组件的依赖项提供程序，而不管组件层次结构有多深，父组件有一个provide选项来提供数据，子组件有一个inject选项来使用这个数据。（跨组件的数据传递）

现在，在组合API中，也可以使用provide方法和inject方法实现传值，但两者都只能在当前活动实例的setup()期间调用。

8.4.1 provide方法

首先，从vue显式导入provide方法；然后，在setup()中使用provide方法定义每个property。

provide方法有两个参数：

l name：代表字符串类型的属性名称；

l value：代表任意类型的属性值。

8.4.2 inject方法

首先，从vue显式导入inject方法；然后，在setup()中使用inject方法注入每个property值。

inject方法有两个参数：

l name：被注入的属性名称（字符串类型）；

l defaultValue：默认值（可选）。

假设我们有一个祖先组件 app，一个中间组件 one，以及一个后代组件 two。我们希望从 app传递一个数据到 two。

app.vue

<template>
   <one></one>
</template>

<script setup>
// import HelloWorld from './components/HelloWorld.vue'
// import setup from './components/setup.vue'
// import setup1 from './components/setup1.vue'
import one from './components/one.vue'
import { provide } from 'vue';
const hcm = 'payroll';
provide('sap', hcm)
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

one.vue

<template>
  <two/>
</template>

<script setup>
import two from '../components/two.vue';
</script>

two.vue

<template>
  <div :class="theme">
    我是SAP {
  
  { theme }} 顾问.
  </div>
</template>

<script setup>
import { inject } from 'vue';

const theme = inject('sap', 'time'); // 'time' 是默认值，如果 provide 没有提供 'theme'
</script>

<style scoped>
.dark {
  background-color: black;
  color: white;
}

.light {
  background-color: white;
  color: black;
}
</style>

8.5 模板引用

在使用组合API时，响应式引用和模板引用的概念是统一的。为了获得对模板内元素或组件实例的引用，可以声明一个ref并从setup()返回。

【例8-8】在模板中使用ref引用响应式对象。

8.6 响应式计算与侦听

8.6.1 响应式计算

使用响应式计算方法computed有两种方式：传入一个getter函数，返回一个默认不可手动修改的ref对象；传入一个拥有get和set函数的对象，创建一个可手动修改的计算状态。

【例8-9】返回一个默认不可手动修改的ref对象。

<template>
    <div>{
  
  {count}}</div>
</template>

<script>
import{ref,computed} from 'vue';
 
export default {
  setup() {
    const count = ref(1)
    const account = computed(()=> count.value + 1)
    console.log(account.value)
     account.value++
    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  }
}
</script>

【例8-10】返回一个可手动修改的ref对象。

<template>
    <div>{
  
  {count}}</div>
</template>

<script>
import{ref,computed} from 'vue';
 
export default {
  setup() {
    const count = ref(1)
    const account = computed({
        get:()=> count.value + 1,
        set:(val)=> {
            count.value = val - 1
        },
   } )
   account.value = 1
   console.log(count.value)
    return {
      count
    }
  }
}
</script>

8.6.2 响应式侦听

可使用响应性侦听watchEffect方法，对响应性进行侦听。该方法立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。（监听所有属性）

【例8-11】响应性侦听watchEffect方法的使用。

监听属性变化

<template>
  <div>
    <input type="text" v-model="obj.name"> 
  </div>
</template>

<script>
import{reactive,watchEffect} from 'vue';
 
export default {
  setup() {
    let obj = reactive(
      {name:'vivi'}
    );
    watchEffect(()=>{
         console.log('name:',obj.name)
    })
    return {
      obj
    }
  }
}
</script>

停止监听

<template>
  <div>
    <input type="text" v-model="obj.name"> 
    <button @click="stopWatchEffect">停止监听</button>
  </div>
</template>

<script>
import{reactive,watchEffect} from 'vue';
 
export default {
  setup() {
    let obj = reactive(
      {name:'vivi'}
    );
  const stop1 =  watchEffect(()=>{
    console.log('name',obj.name)
   })
   const stopWatchEffect = ()=>{
    console.log('停止监听')
       stop1(); // ...当该侦听器不再需要时
   }
    return {
      obj,
      stopWatchEffect,
    }
  }
}
</script>

副作用

使用 onInvalidate 清理计时器，每次 count 变化时，watchEffect 会重新执行，在此之前 onInvalidate 会先清理掉之前的计时器，避免重复创建计时器导致内存泄漏。

注意：**如果在 watchEffect 没有直接使用 count.value ，那么它的变化就不会触发副作用函数重新执行，**从而不会调用 onInvalidate 清理之前的计时器

<template>
  <div>
    <p>当前计数: {
  
  { count }}</p>
    <button @click="count++">增加计数</button>
  </div>
</template>
<script>
import { ref, watchEffect } from 'vue';
export default {
  setup() {
    const count = ref(0);
    watchEffect((onInvalidate) => {
      // 在函数内直接读取 count.value，确保它被追踪，这一步很重要！！！
      console.log(`副作用函数执行，count 值为: ${count.value}`);
      const timer = setInterval(() => {
        console.log(`计时器中 count 的值: ${count.value}`);
      }, 1000);
      onInvalidate(() => {
        console.log('清除计时器 timer');
        clearInterval(timer);
      });
    });
    return {
      count,
    };
  },
};
</script>