Vue3学习笔记---常用Composition API

LinMeng
• 阅读 469

1.拉开序幕的setup

  1. 理解:Vue3.0中一个新的配置项,值为一个函数
  2. setup是所有Componsition API(组合API)“表演的舞台”
  3. 组件中所用到的:数据,方法等等,均要配置在setup中
  4. setup函数的两种返回值:
    1. 若返回一个对象,则对象中的属性、方法、在模板中均可以直接使用(重点关注!)
    2. 若返回一个渲染函数,则可以自定义渲染内容(了解)
  5. 注意点:
  • 尽量不要与Vue2.x配置混用
  • Vue2.x配置(data、methods、computed...)中可以访问到setup中的属性,方法
  • 但在setup中不能访问到Vue2.x配置(data、methods、computed...)
  • 如果有重名,Vue3.0中setup优先
  1. setup不能是一个async(异步)函数,因为一旦加上返回值不再是return的对象,而是promise,模板看不到return对象中的属性,(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)

2.ref函数

  • 作用:定义一个响应式的数据
  • 语法:const xxx = ref(initValue)
    1. 创建一个包含响应式数据的引用对象(refrence对象,RefImpl)
    2. JS中操作数据: xxx.value
    3. 模板中读取数据:不需要.value,直接:<div>{{xxx}}</div>
  • 备注:
    1. 接收的数据可以是:基本类型、对象类型
    2. 基本类型的数据:响应式依然是靠 object.defineProperty()getset完成的
    3. 对象类型的数据:内部“求助”了Vue3.0中的一个新函数---reactive函数, 可以把reactive函数理解为是含有Proxy代理的功能

3.reactive函数

  • 作用:定义一个对象类型的响应式数据(基本类型别用它,用 ref函数)
  • 语法:const 代理对象 =reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)
  • reactive定义的响应式数据是“深层次的”,不管藏得多深,都能挖出来。
  • 内部基于ES6的proxy实现,通过代理对象操作源对象内部数据进行操作。

    4. Vue3.0中的响应式原理

vue2.x的响应式

  • 实现原理:

    1. 对象类型:通过 Object.defineProperty()对对象的已有属性值的读取、修改进行拦截(数据劫持)
    2. 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)
      Object.defineProperty(data,'count',{
          get(){},
          set(){}
      })
    3. 存在问题:
    • 新增属性、删除属性、界面不会更新 新增--this.$set(this.person,'sex','女')或者 Vue.set(this.person,'sex','女'),后者需要在单文件中引入 import Vue from 'vue' 删除-- delete this.person.name页面不会更新,应该--this.$delete(this.person,'name')或者 Vue.set(this.person,'name')
    • 直接通过下标修改数组,界面不会自动更新 this.$set(this.person.hobby,'0','逛街') Vue.set(this.person.hobby,0,'逛街') this.person.hobby.splice(0,1,'逛街')
    • 总结:解决方案----使用Vue.set、Vue.delete或者vm.$set、vm.$delete这些API

Vue3.0的响应式

  • 实现原理:

    1. 通过Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写、属性的添加、属性的删除等
    2. 通过Reflect(反射):对源对象的属性进行操作
    3. MDN文档中描述的Proxy与Reflect:
    • Proxy:
    • Reflect:
      const p = new Proxy(person, {
                  // 拦截读取属性值
                  // target就是传入的person,propName就是属性名
                  get(target, propName) {
                      console.log(`有人读取了p身上的${propName}属性`);
                      // return target[propName];
                      return Reflect.get(target, propName);
                  },
                  // 拦截设置属性值或添加新属性
                  // value是修改后的值
                  set(target, propName, value) {
                      console.log(`有人修改了p身上的${propName}属性,我要去更新界面了`);
                      // target[propName] = value;
                      Reflect.set(target, propName, value);
                  },
                  // 拦截删除属性
                  deleteProperty(target, propName) {
                      console.log(`有人删除了p身上的${propName}属性,我要去更新界面了`);
                      // return delete target[propName]
                      return Reflect.defineProperty(target, propName)
                  },
              });

5.reactive和ref

  • 从定义数据角度对比:
    • ref用来定义:基本类型数据
    • reactive用来定义:对象(或数组)类型数据
    • 备注:ref也可以用来定义对象(或数组)类型数据,它内部会自动通过 reactive转为代理对象
  • 从原理角度对比:
    • ref通过 Object.defineProperty()getset来实现响应式(数据劫持)
    • reactive 通过使用Proxy来实现响应式(数据劫持),并通过 Reflect操作源对象内部的数据
  • 从使用角度对比:
    • ref定义的数据:操作数据需要 .value,读取数据时模板中直接读取不需要 .value
    • reactive定义的数据:操作数据与读取数据,均不需要 .value

6.setup注意点

先来补充Vue2中遗漏的两个点

  • 父组件给子组件传参时,子组件可以用props来接收,但是若没有接收,可以用this.$attrs.属性名来接收。
  • 若没有给插槽预留位置,即没写 <slot></slot>,可以在this.$slots身上找到。
  1. setup执行的时机

    • 在beforeCreate之前执行一次,this是undefined;
  2. setup的参数

    • props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性(props接收声明,同VuE2)
    • context:上下文对象
    1. attrs:值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性,相当于Vue2中的 this.$attrs,浏览器中的警告会存在
    2. slots:收到的插槽内容,相当于 this.$slots
    3. emit:分发自定义事件的函数,相当于 this.$emit

7.计算属性与监视

  1. computed函数

    • 与Vue2.x中的computed配置功能一致
        // Vue2中的watch监听
          watch: {
          //   简写
           sum(newValue, oldValue) {
            console.log("sum的值变化了", newValue, oldValue);
          },
          // 完整写法
          sum: {
            immediate: true, // 立即监听
            deep: true, // 深度监听
            handler(newValue, oldValue) {
              console.log("sum的值变化了", newValue, oldValue);
            },
          },
        },
    • Vue3写法:
    import { computed } from "vue";
    setup(props, context) {
        // 数据
        let person = reactive({
          firstName: "帅",
          lastName: "坤",
          fullName: "",
        });
        // vue3中的计算属性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];
          },
        });
        // 方法
    
        // 返回一个对象(常用)
        return {
          person,
        };
      },
  2. watch函数

  • 与Vue2.x中watch配置功能一致

  • 两个小坑:

    • 监视reactive定义的响应式数据时:oldValue无法正确获取,强制开启了深度监听(deep配置失效)

    • 监视relactive定义的响应式数据中某个属性(该属性还是对象)时:deep配置有效

      
      import {ref,reactive,watch} from 'vue'
      let sum =ref(0);
      let msg =ref('你好啊')
      let person = reactive({
          name:'帅坤',
          age:18,
          person:{
            job:{
              j1:{
                salary:20
             }
          }
        }
      })
      //情况一:监视ref定义的响应式数据sum
      watch(sum,(newValue,oldValue)=>{
          console.log('sum变化了',newValue,oldValue);
      },{immediate:true})
      
      //情况二:监视多个ref定义的响应式数据
      watch([sum,msg],(newValue,oldValue)=>{
          console.log('sum或msg变化了',newValue,oldValue)
      })
      
      //情况三:监视reactive定义的响应式数据
         //1.无法正确获取oldValue值
         //2.强制开启了深度监听
      watch(person,(newValue,oldValue)=>{
          console.log('person变化了',newValue,oldValue)
      },{immediate:true,deep:false})    // 此处的deep配置不再奏效
      
      //情况四:监视reactive定义的响应式数据中的某个属性
      watch(()=>person.job,(newValue,oldValue)=>{
          console.log('person的job变化了',newValue,oldValue)
      },{immediate:true,deep:true})
      
      //情况五:监视reactive定义的响应式数据中的某些属性
      watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
          console.log('person的name或age变化了',newValue,oldValue)
      })
      
      //特殊情况:
      watch(()=>person.job,(newValue,oldValue)=>{
          console.log('person的job变化了',newValue,oldValue)
      },{deep:true})   // 此处由于监视的是reactive所定义的对象中的某个属性(该属性还是对象),所以deep配置有效
    1. watch监视ref数据的说明

      <template>
        <h2>当前求和为{{ sum }}</h2>
        <button @click="sum++">点我++</button>
        <h2>当前的信息为:{{ msg }}</h2>
        <button @click="msg += '❤'">修改信息</button>
        <hr />
        <h2>姓名:{{ person.name }}</h2>
        <h2>年龄:{{ person.age }}</h2>
        <h2>薪资:{{ person.job.j1.salary }}k</h2>
        <button @click="person.name += '~'">修改姓名</button>
        <button @click="person.age++">修改年龄</button>
        <button @click="person.job.j1.salary++">涨薪</button>
      </template>
      
      <script>
      import { ref, watch, reactive } from "vue";
      export default {
        name: "Demo",
        setup(props, context) {
          // 数据
          let sum = ref(0);
          let msg = ref("你好啊");
          let person = ref({
            name: "帅坤",
            age: 18,
            job: {
              j1: {
                salary: 20,
              },
            },
          });
          // sum不加.value,是因为sum是基本类型数据。
          watch(
            sum,
            (newValue, oldValue) => {
              console.log("sum的值变化了", newValue, oldValue);
            },
            { immediate: true }
          );
          // 方式一:这回监视的是RefImpl中的value属性,person是ref生成的,person.value是reactive生成的
          /*   watch(person.value, (newValue, oldValue) => {
            console.log("person的值变化了", newValue, oldValue);
          }); */
          // 方式二:开启深度监听对象.对象,
          watch(
            person,
            (newValue, oldValue) => {
              console.log("person的值变化了", newValue, oldValue);
            },
            { deep: true }
          );
      
          // 返回一个对象(常用)
          return {
            sum,
            msg,
            person,
          };
        },
      };
      </script>
  1. watchEffect函数
  • watch的套路是:既要指明监视属性,也要指明监视的回调。
  • watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,就监视哪个属性
  • watchEffect有点像computed:
    • 但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。
    • 而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值。
      //watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调。
      watchEffect(()=>{
          const x1 = sum.value
          const x2 = person.job.j1.salary
          console.log('watchEffect配置的回调执行了')
      })

      8. 生命周期

<template>
  <h2>当前求和为{{ sum }}</h2>
  <button @click="sum++">点我++</button>
</template>

<script>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
export default {
  name: "Demo",
  setup() {
    // 数据
    let sum = ref(0);

    // 通过组合式api形式的生命周期钩子,与Vue2.x中钩子对应关系如下:
    /*      1.beforeCreate ===> setup()
        2.created ===> setup()
        3.beforeMount ===>onBeforeMount
        4.mounted ===> onMounted
        5.beforeUpdate ===> onBeforeUpdate
        6.updated ===> onUpdated
        7.beforeUnmount ===> onBeforeUnmount
        8.unmounted ===> onUnmounted */
    console.log("----setup---");
    onBeforeMount(() => {
      console.log("----onBeforeMount---");
    });
    onMounted(() => {
      console.log("----onMounted---");
    });
    onBeforeUpdate(() => {
      console.log("----onBeforeUpdate---");
    });
    onUpdated(() => {
      console.log("----onUpdated---");
    });
    onBeforeUnmount(() => {
      console.log("----onBeforeUnmount---");
    });
    onUnmounted(() => {
      console.log("----onUnmounted---");
    });

    // 返回一个对象(常用)
    return {
      sum,
    };
  },
  //   通过配置项的形式使用生命周期钩子函数
  //#region
  /*   beforeCreate() {
    console.log("----beforeCreate---");
  },
  created() {
    console.log("----created---");
  },
  beforeMount() {
    console.log("----beforeMount---");
  },
  mounted() {
    console.log("----mounted---");
  },
  beforeUpdate() {
    console.log("----beforeUpdate---");
  },
  updated() {
    console.log("----updated---");
  },
  beforeUnmount() {
    console.log("----beforeUnmount---");
  },
  unmounted() {
    console.log("----unmounted---");
  }, */
  //#endregion
};
</script>

<style>
</style>

若非要将组合式和配置项一起使用,同名钩子情况下,组合式api的执行顺序要早于配置项形式

9. 自定义hook函数

  • 什么事hook?——本质是一个函数,把setup函数中使用的Composition API进行了封装
  • 类似于Vue2.x中的mixin
  • 自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂

10.toRef与toRefs

  • 作用:创建一个ref对象,其value值指向另一个对象中的某个属性
  • 语法:const name = toRef(person,'name')
  • 应用:要将响应式对象中的某个属性单独提供给外部使用
  • 扩展:toRefstoRef功能一致,但可以批量创建多个ref对象,语法:toRefs(person),但是要注意,对于多层对象属性来说,他只能提供一层对象属性,即 toRefs(person)中若想展示salary,还需要{{job.j1.salary}}

其它Composition API

1.shallowReactive和shallowRef

  • shallowReactive: 只处理对象最外层属性的响应式(浅响应式)
  • shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理(ref会求助与reactive,生成proxy,带有get/set属性,但是 shallowRef不会)
  • 什么时候使用?
  • 如果有一个对象数据,结构比较深,但变化时只是外层属性变化,即只有对象中的基本属性字段发生变化====>shallowReactive
  • 如果有一个对象数据,后续功能不会修改该对象中的属性,而是生成新的对象来替换====>shallowRef 比如14_src/demo.vue中的替换功能

2. readonly与shallowReadonly

  • readonly:让一个响应式数据变为只读的(深只读)
  • shallowReadonly:让一个响应式数据变为只读的(浅只读)
  • 应用场景:不希望数据被修改时
    // 全部只读
        person =readonly(person)
        // 字段只读,深层可修改
        person =shallowReadonly(person)

3.toRaw与markRaw

raw---未加工的,生的,原始的,格式

  • toRaw:
    • 作用:将一个由 reactive生成的响应式对象转为普通对象
    • 使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新
      function showRawPerson() {
        console.log("输出响应式的person", person);
        const p = toRaw(person);
        console.log("输出原始person", p);
        const sum = toRaw(sum);
        console.log("输出最原始的sum ", sum); // undefined,说明toRaw只对reactive生成的响应式数据有效
          }
  • markRaw: 比toRaw应用的更多
    • 作用:标记一个对象,使其永远不会再成为响应式对象
    • 应用场景:
        1. 有些值不应被设置为响应式,例如复杂的第三方类库等
        1. 当渲染具有不可变数据的大列表时,跳过响应式转换可以提高性能

4.customRef

  • 作用:创建一个自定义的ref,并对其依赖跟踪和更新触发进行显式控制

  • 实现防抖效果:

    <template>
      <input type="text" v-model="keyword" />
      <h3>{{ keyword }}</h3>
    </template>
    
    <script>
    import { ref, customRef } from "vue";
    export default {
      name: "App",
      setup() {
        // 数据
        // 使用Vue提供的ref
        // let keyword= ref("hello");
        // 使用程序员自定义的ref
        let keyword = myRef("hello", 500);
        // 自定义ref:名为---myRef
        function myRef(value, delayTime) {
          // 实现防抖功能
          let timer;
          // 这个value是接收到的keyword值,即hello
          return customRef((track, trigger) => {
            return {
              get() {
                console.log(`有人从myRef容器中读取数据了,我把${value}给他了`);
                // 通知Vue追踪value的变化,即提前和get商量一下,让他认为这个value是有用的
                track();    **//===>追踪**
                return value;
              },
              set(newValue) {
                console.log(`有人把myRef这个容器中数据改为了:${newValue}`);
                // 实现防抖功能
                clearTimeout(timer);
                timer = setTimeout(() => {
                  value = newValue;
                  // 通知Vue去重新解析模板
                  trigger();     **//===>触发**
                }, delayTime);
              },
            };
          });
        }
        // 返回keyword一个对象(常用)
        return {
          keyword,
        };
      },
    };
    </script>
    
    </style>
    

5.provide与inject

  • 作用:实现祖孙组件间通信,祖孙组件也称为跨级组件 (实现祖与后代组件间通信)

  • 套路:父组件有一个 provide选项来提供数据,后代组件有一个 inject选项来使用这些数据

  • Vue3学习笔记---常用Composition API

  • 具体写法:

    1. 祖组件中

      <template>
        <div class="app">
          <h3>我是App组件(祖),{{name}}---{{price}}</h3>
          <Son />
        </div>
      </template>
      
      <script>
      import { toRefs, reactive,provide } from "vue";
      import Son from "./components/Son.vue";
      export default {
        name: "App",
        components: { Son },
        setup() {
          let car = reactive({ name: "奔驰", price: "40w" });
          provide('car',car)//给自己的后代组件传递数据
          return { ...toRefs(car) };
        },
      };
      </script>
    2. 孙组件中

      <template>
        <div class="grandSon">
          <h3>我是GrandSon组件(孙),{{car.name}}---{{car.price}}</h3>
        </div>
      </template>
      
      <script>
      import {inject} from 'vue'
      export default {
        name: "GrandSon",
        setup(props) {
          let car =inject('car')
          console.log('grandSon中Inject接收到的数据',car);
          return{car}
        }
      };
      </script>

6.响应式数据的判断

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

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

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

  • isProxy:检查一个对象是否由 reactive或者 readonly创建的代理

    <template>
      <div class="app">
        <h3>我是App组件(祖)</h3>
      </div>
    </template>
    
    <script>
    import {
      toRefs,
      ref,
      reactive,
      readonly,
      isRef,
      isReactive,
      isReadonly,
      isProxy,
    } from "vue";
    export default {
      name: "App",
      setup() {
        let sum = ref(0);
        let car = reactive({ name: "奔驰", price: "40w" });
        let car2 = readonly(car);
    
        console.log(isRef(sum)); //true
        console.log(isReactive(car)); //true
        console.log(isReadonly(car2)); //true
        console.log(isProxy(car2)); //true,readonly修饰后的数据,底层还是proxy响应式
        console.log(isProxy(sum)); //false,ref的底层是objectDefineProperty,不是proxy
        return { ...toRefs(car) };
      },
    };
    </script>

Composition API的优势

  1. 使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改
  2. CompositionAPI的优势---我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序的组织在一起
点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
3年前
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子?使用使用起来应该像是这个样子wxue(options)setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下importwxue,reactivefrom'wxue'wxue(setup(option
住儿 住儿
1年前
JS的一些优雅写法
JS的一些优雅写法reduce1、可以使用reduce方法来实现对象数组中根据某一key值求和例如,假设有以下对象数组:constarr其中,reduce方法的第一个参数是一个回调函数,它接收两个参数:累加器(acc)和当前元素(cur)。回调函数的返回值
Bill78 Bill78
3年前
Python多进程 - 实现多进程的几种方式
方式一:os.fork()coding:utf8"""pidos.fork()1.只用在Unix系统中有效,Windows系统中无效2.fork函数调用一次,返回两次:在父进程中返回值为子进程id,在子进程中返回值为0"""importospidos.fork()ifpid0:
Wesley13 Wesley13
3年前
java第二次作业
(一)学习总结1.什么是构造方法?什么是构造方法的重载?下面的程序是否可以通过编译?为什么?(1)在对面向对象程序中构造方法的主要作用是为类中的属性初始化。在构造方法中要注意以下几点①构造方法的名称必须与类名称一致②构造方法的声明处不能有任何返回值类型的说明③不能在构造方法中使用return返回一个值(2)构造方法的重载就
Wesley13 Wesley13
3年前
C语言 函数
1.返回值类型51.有一个函数原型如下所示,则该函数的返回类型为()。Cabc(floatx,floaty);A.voidB.doubleC.intD.float3151.有一个函数原型如下所示,则该函数的返回类型为()
Wesley13 Wesley13
3年前
C#单例
单例模式:步骤:1.定义静态私有对象2.构造函数私有化3.定义一个静态的,返回值为该类型的方法,一般以Getinstance/getInit为方法名称单例模式有懒汉和饿汉,最好使用饿汉1.饿汉式先实例化publicclassSingleton{privatestati
Stella981 Stella981
3年前
Python中的property()函数
property() 函数的作用是在新式类中返回属性值1.语法: classproperty(fget,fset,fdel,doc)2.参数:fget获取属性值的函数fset设置属性值的函数fdel删除属性值函数doc属性描述信息
Wesley13 Wesley13
3年前
Underscore解析html模板
Underscore的\_.template模板函数只能解析3种模板标签<% %:用于包含Js代码,这些代码将在渲染数据时被执行。<%%:用于输出数据,可以是一个变量、对象的属性、或函数(输出函数的返回值)。<%%:用于输出数据,同时会将数据中包含的HTML字符转换为实体形式(例如它会将双引号转换为&quot;形式),用于避免X
小万哥 小万哥
1年前
Python 集合(Sets)3
Python合并集合在Python中,有几种方法可以合并两个或多个集合。您可以使用union()方法,该方法返回一个包含两个集合中所有项的新集合,或使用update()方法,将一个集合中的所有项插入另一个集合中:示例,union()方法返回一个包含两个集合
小万哥 小万哥
8个月前
Java 构造函数与修饰符详解:初始化对象与控制权限
Java构造函数Java构造函数是一种特殊的类方法,用于在创建对象时初始化对象的属性。它与类名相同,并且没有返回值类型。构造函数的作用:为对象的属性设置初始值执行必要的初始化操作提供创建对象的多种方式构造函数的类型:默认构造函数:无参数的构造函数,如果用户
LinMeng
LinMeng
Lv1
争取早日实现“代码自由” wa !!!
文章
50
粉丝
7
获赞
33