19.vue 3.setup、ref、reactive、计算属性、watch、watchEffct、生命周期、hook、toRef、toRefs、shallowReactive、shallo

1.setup：Vue3.0中一个新的配置项，值为一个函数。

• 1-1.新的 setup 选项在组件被创建之前执行，一旦 props 被解析完成，它就将被作为组合式 API 的入口。
• 1-2.setup 调用发生在数据(data)、方法(methods)、计算属性(computed)被解析之前，所以无法它们在 setup 中被获取。
• 1-3.setup 函数的两种返回值：
  • ①若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。
  • ②若返回一个渲染函数：则可以自定义渲染内容。
• 1-4.尽量不要与 Vue2.x 配置混用：
  • ①Vue2.x配置（data、methods、computed…）中可以访问到setup中的属性、方法。
  • ②但在 setup 中不能访问到 Vue2.x配置（data、methods、computed…）。
  • ③如果有重名, setup 优先。
  • ④setup 不能是一个 async 函数，因为返回值不再是 return 的对象, 而是 promise, 模板看不到 return 对象中的属性。（后期也可以返回一个 Promise 实例，但需要 Suspense 和异步组件的配合）
• 1-5.在beforeCreate之前执行一次，此时 this 是 undefined。
• 1-6.setup的参数：
  • ①props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
  • ②context：上下文对象：
    • α：attrs: 值为对象，包含：组件外部传递过来，但没有在 props 配置中声明的属性, 相当于this.$attrs。
    • β：slots: 收到的插槽内容, 相当于 this.$slots。
    • γ：emit: 分发自定义事件的函数, 相当于 this.$emit。

2.ref 定义一个响应式引用的数据。

• 2-1.ref 接收参数并将其包裹在一个带有 value 属性的对象中返回，然后可以使用该属性访问或更改响应式变量的值。
• 2-2.语法：const xxx = ref(initValue)：使用 const 可以避免 xxx 变量改变指针，却可以修改引用的属性。
• 2-3.创建一个包含响应式数据的引用对象(简称 ref 对象)。
• 2-4.基本数据类型：会变成 ref 对象，操作需要使用 ref 对象上的 value 属性。xxx.value形式。

setup() {
  let name = ref('lbh');
  let age = ref(18);
  function changeInfo() {
    name.value = '李四';
    age.value = 48;
  }
  return {
    name, age, changeInfo
  }
}

• 2-5.对象数据类型：job 变量会变成 ref 对象，ref 对象属性 value 将变成 Proxy 对象，有属性是对象(例如 job对象中的 skill )时，属性同样会变成 Proxy 对象。xxx.value.property形式或xxx.value.property.property形式。

setup() {
  let job = ref({
    type: 'web前端工程师',
    salary: '18K',
    skill: {
      name: 'javaScript',  
    }
  })
  function changeInfo() {
    job.value.type = 'UI设计师'
    job.value.salary = '60K'
    job.value.skill.name = 'Vue'
  }
  return {
    job, changeInfo
  }
}

• 2-6.模板中读取数据：
  • ①基本类型数据不需要 xxx.value，直接：<div>{{xxx}}</div>
  • ②对象数据类型也不需要 xxx.value，直接：<div>{{xxx.property}}</div>
• 2-7.原理：
  • ①接收的数据可以是：基本类型、也可以是对象类型。
  • ②基本类型的数据：响应式依然是靠 Object.defineProperty() 的 get 与 set 完成的。
  • ③对象类型的数据：内部“求助”了Vue3.0中的一个新函数 reactive 函数。根上使用了 Proxy。

3.reactive：定义一个对象类型的响应式数据（基本类型不要用它，要用 ref 函数）。

• 3-1.语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）reactive定义的响应式数据是“深层次的”，即不管嵌套多深，都会将数据变成响应式的。

import { reactive } from 'vue'
export default {
  name: 'App',
  setup(){
    //数据
    let person = reactive({
      name:'张三',
      age:18,
      job:{
        type:'前端工程师',
        salary:'30K',
        a:{
          b:{
            c:666
          }
        }
      },
      hobby:['抽烟','喝酒','烫头']
    })
    function changeInfo(){
      person.name = '李四'     // 不需要person.value
      person.age = 48
      person.job.type = 'UI设计师'
      person.job.salary = '60K'
      person.job.a.b.c = 999
      person.hobby[0] = '学习' // 可以操作数组
    }
    return {
      person,
      changeInfo
    }
  }
}

• 3-2.内部基于 ES6 的 Proxy 实现响应式(数据劫持)，通过 Reflect 操作源对象内部数据。

4.计算属性。

• 4-1.computed函数：与Vue2.x中computed配置功能一致。
• 4-2.语法：

import {computed} from 'vue'
setup(){
  //数据
  let person = reactive({
    firstName: '淡忘'，
    lastName: '梅'
  })  
  //计算属性简写:
  let 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]
    }
  })
  return {
    person,
    fullName
  }
}

5.watch函数：

• 5-1.监视 reactive 定义的响应式数据时：oldValue 无法正确获取、强制开启了深度监视（deep配置失效）。
• 5-2.监视reactive定义的响应式数据中某个属性时：deep 配置有效。
• 5-3.监视 ref 定义的响应式数据：基本类型数据不需要加 value。对象类型数据需要添加 value (相当于监听 reactive 定义的数据)或 监听属性添加 deep: true。

import {ref, watch} from 'vue'
setup(){
  let sum = ref(0)
  watch(sum,(newValue, oldValue)=>{
    console.log('sum变化了', newValue, oldValue)
  },{immediate: true})
}

• 5-4.监视多个 ref 定义的响应式数据：

import { ref, watch } from 'vue'
setup(){
  let sum = ref(0)
  let msg = ref('你好啊')
  watch([sum, msg],(newValue, oldValue)=>{
    console.log('sum或msg变化了', newValue, oldValue)
  },{immediate:true})
}

• 5-5.监视 reactive 定义的响应式数据：
  • ①若 watch 监视的是 reactive 定义的响应式数据，则无法正确获得 oldValue。
  • ②若 watch 监视的是 reactive 定义的响应式数据，则强制开启了深度监视。

import { reactive, watch } from 'vue'
setup(){
  let person = reactive({
    name:'张三',
    age:18,
    job:{
      j1:{
        salary:20
      }
    }
  })
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了', newValue, oldValue) // oldValue与 newValue一致
  },{immediate:true, deep:false}) //此处的deep配置不再奏效，强制深度监听。
}

• 5-6.监视 reactive 定义的响应式数据中的某个属性：第一个参数得写成一个函数返回的形式。

import { reactive, watch } from 'vue'
setup(){
  let person = reactive({
    name:'张三',
    age:18,
    job:{
      j1:{
        salary:20
      }
    }
  })
  watch(()=>person.name,(newValue,oldValue)=>{
    console.log('person的job变化了', newValue, oldValue)
  },)
}

• 5-7.监视多个 reactive 定义的对象下面的基本类型属性的响应式数据。使用函数返回的形式并以数组形式添加多个。

import { reactive, watch } from 'vue'
setup(){
  let person = reactive({
    name:'张三',
    age:18,
    job:{
      j1:{
        salary:20
      }
    }
  })
  watch([()=>person.name, ()=>person.age], (newValue,oldValue)=>{
    console.log('person的name或age变化了',newValue,oldValue)
  },)
}

• 5-8.特殊情况：监视的是 reactive 定义的对象下面的对象属性(监听响应对象数据的下多层某个属性)的响应式数据，需要添加 deep 属性。

import { reactive, watch } from 'vue'
setup(){
  let person = reactive({
    name:'张三',
    age:18,
    job:{
      j1:{
        salary:20
      }
    }
  })
  watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
  },{deep: true}) //此处由于监视的是 reactive 定义的对象中的某个属性，所以deep配置有效，不设置 deep 则监听不到。
}

6.watchEffct函数。既要指明监视的属性，也要指明监视的回调。

• 6-1.watchEffect的规则是，不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
• 6-2.watchEffect与computed区别：
  • ①computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
  • ②watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。
• 6-3.语法：
  • ①加载初始时执行一次。
  • ②watchEffect 函数体内的回调函数里面的使用的数据变更时执行。类似 computed，所依赖的数据变化就执行，只是没有返回值。

import { ref, watchEffect } from "vue";
export default {
  name: "Demo",
  setup() {
    let sum = ref(0);
    watchEffect(() => {
      const x1 = sum.value;
      console.log("watchEffect所指定的回调执行了");
    });
  }
}

7.vue3生命周期：

• 7-1.可以继续使用 Vue2.x 中的生命周期钩子，但有有两个被更名：
  • ①beforeDestroy 改名为 beforeUnmount。
  • ②destroyed改名为unmounted。
• 7-2.Composition API形式的生命周期钩子，与Vue2.x中钩子对应关系如下：即在 setup 中使用生命周期。且都是函数。

beforeCreate ==> setup() // beforeCreate不能在 setup 中执行
created ==> setup()      //created 不能在 setup 中执行，被合并在 setup()中
beforeMount ==> onBeforeMount
mounted ==> onMounted
beforeUpdate ==> onBeforeUpdate
updated ==> onUpdated
beforeUnmount ==> onBeforeUnmount
unmounted ==> onUnmounted

• 7-3.配置项中生命周期与 setup 中的生命周期混用：
  • ①setup 中的生命周期中没有 beforeCreate，created 两个生命周期，即等于setup。
  • ②setup 最先执行，然后是配置项中的beforeCreate，created。
  • ③setup 中的钩子比配置项的钩子先执行：onBeforeMount => beforeMount => onMounted => mounted

8.hook：

• 8-1.hook 本质是一个函数，把 setup 函数中使用的 Composition API 进行了封装。将同一个逻辑关注点相关代码收集在一起会更好。而这正是组合式 API 使我们能够做到的。

• 8-2.类似于 vue2.x 中的 mixin。

• 8-3.自定义 hook 的优势：复用代码, 让 setup 中的逻辑更清楚易懂。Composition API 的优势：

  • ①优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。通过hook函数将一个功能的数据方法与执行周期都封装在一个函数内部。
  • ②Options API 存在的问题：使用传统 Options API 中，新增或者修改一个需求，就需要分别在data，methods，computed里修改。

• 8-4.定义：将需要执行的代码的数据，方法，以及执行周期均封装在一个函数中，函数返回最终的结果。usePoint.js 中

import {reactive, onMounted, onBeforeUnmount} from 'vue'
export default function (){
  //实现鼠标“打点”相关的数据
  let point = reactive({
    x:0,
    y:0
  })
  //实现鼠标“打点”相关的方法
  function savePoint(event){
    point.x = event.pageX
    point.y = event.pageY
    console.log(event.pageX,event.pageY)
  }
  //实现鼠标“打点”相关的生命周期钩子
  onMounted(()=>{
    window.addEventListener('click', savePoint)
  })
  onBeforeUnmount(()=>{
    window.removeEventListener('click', savePoint)
  })
  return point
}

• 8-5.使用：引入并执行函数。将函数执行结果渲染。

import usePoint from '../hooks/usePoint'
export default {
  name: 'Demo',
  setup(){
    let point = usePoint();
    return {point}
  }
}

9.toRef 与 toRefs。

• 9-1.创建一个 ref 对象，其 value 值指向另一个对象中的某个属性。
• 9-2.语法：const name = toRef(person, ‘name’)：
• 9-3.示例：

<template>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{salary}}K</h2>
  <button @click="age++">增长年龄</button>
  <button @click="salary++">涨薪</button>
</template>
<script>
import {reactive, toRef} from 'vue'
export default {
  name: 'Demo',
  setup(){
    let person = reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    return {
      name: toRef(person, "name"),
      age: toRef(person, "age"),
      salary: toRef(person.job.j1, "salary"),
    }
  }
}
</script>

• 9-4.应用: 要将响应式对象中的某个属性单独提供给外部使用时。
• 9-5.toRefs 与 toRef 功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)。
  • ①注意模板中需要书写对象属性时。…语法只是浅层次的遍历出源对象的属性，如果源对象属性是对象属性，则需要模板中嵌套渲染。

<template>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}K</h2>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>
<script>
import {reactive,toRefs} from 'vue'
export default {
  name: 'Demo',
  setup(){
    let person = reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    return {
      ...toRefs(person)
    }
  }
}
</script>

10.shallowReactive 与 shallowRef。

• 10-1.shallowReactive：只处理对象最外层属性的响应式（浅响应式）。如果有一个对象数据，结构比较深, 但变化时只是外层属性变化。

import {shallowReactive} from 'vue'
export default {
  name: 'Demo',
  setup(){
    let person = shallowReactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    return {
      ...toRefs(person) // 只有对象的第一层属性是响应式的
    }
  }
}
</script>

• 10-2.shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理。如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换。

import {shallowRef} from 'vue'
export default {
  name: 'Demo',
  setup(){
    let person = shallowRef(0)
    return {
      person  
    }
  }
}
</script>