前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Composition API详解

Composition API详解

作者头像
前端老道
发布2022-12-01 10:03:12
1.3K0
发布2022-12-01 10:03:12
举报
文章被收录于专栏:Vue开发社区

vue3.0中新增了非常多的组合API,组合式API受到了 React Hooks 很大的启发。 由于在setup中没有this,所以数据想要响应到template中必须使用相关api的帮助,组合API都要在setup函数中去使用。

LifeCycle Hooks

在新版的生命周期函数,可以按需导入到组件中,且只能在setup()函数中使用

代码语言:javascript
复制
import { onMounted, onUnmounted } from 'vue';
export default {
  setup () {
    onMounted(()=>{
     //
    });
    onUnmounted(()=> {
      //
    });
  }
};

生命周期2.x与Composition之间的映射关系

  • beforeCreate -> use setup()
  • created -> use setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

setup

理解

setup()函数是vue3中专门新增的方法,可以理解为Composition Api的入口。

执行时机

在beforecreate之后,create之前执行.

接收props数据
代码语言:javascript
复制
export default {
  props: {
    msg: {
      type: String,
      default: () => {}
    }
  },
  setup(props) {
    console.log(props);
  }
}

context:

setup()的第二个参数是一个上下文对象,这个上下文对象大致包含了这些属性,注意:在setup()函数中无法访问this

代码语言:javascript
复制
const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs
  }
}

reactive

reactive是用来创建一个响应式对象,等价于2.x的Vue.observable,具体可以参考下面demo。
代码语言:javascript
复制
<template>
  <div>
    <p @click="incment()">
      click Me!
    </p>
    <p>
      一:{{ state.count }} 二: {{ state.addCount }}
    </p>
  </div>
</template>

<script>
import { reactive } from 'vue';
export default {
  setup () {
    const state = reactive({//创建响应式数据
      count: 0,
      addCount: 0
    });
    function incment () {
      state.count++;
      state.addCount = state.count * 2;
    }
    return {
      state,
      incment
    };
  }
};
</script>

ref

基本语法

ref:ref也是vue3提供的实现数据响应式的方法,但是针对基本数据类型。其本质原理是reactive,将传过来的简单数据包装成一个对象,ref(xx)-> reactive({value:xx}),将值赋值在对象的value属性上,所以在js中使用ref中的值要加上.value,例如上述例子中的count2.value可以拿到值,但在template中可以直接{{count}},不需要.value,因为3.0帮我们做了处理。

ref()函数用来给定的值创建一个响应式的数据对象,ref()的返回值是一个对象,这个对象上只包含一个.value属性.下面是基本数据类型创建步骤.

代码语言:javascript
复制
import { ref, defineComponent } from 'vue';
export default defineComponent ({
  setup () {
    const valueNumber = ref(0);
    const valueString = ref('hello world!');
    const valueBoolean = ref(true);
    const valueNull = ref(null);
    const valueUndefined = ref(undefined);

    return {
      valueNumber,
      valueString,
      valueBoolean,
      valueNull,
      valueUndefined
    };
  }
});
在template中访问ref创建的响应式数据
代码语言:javascript
复制
import { ref } from 'vue';
export default {
  setup () {
    const value = ref(1);

    return {
      value,
      msg: 'hello world!'
    };
  }
};

<template>
  <p>{{ value }} {{ msg }}</p>
</template>
将ref响应式数据挂载到reactive中

当把ref()创建出来值直接挂载到reactive()中时,会自动把响应式数据对象的展开为原始的值,不需要通过.value就可以直接访问到.

代码语言:javascript
复制
import { ref, reactive } from 'vue';
export default {
  setup () {
    const count = ref(1);
    const state = reactive({
      count
    });
    console.log(state.count);//1 可以直接访问到,不需要通过.value就可以直接访问到
    state.count++;
    console.log(count.value);//2 我们发现,最初count值也发生了改变

    return {
     count
    };
  }
};

新的ref会覆盖旧的ref,实例如下:

代码语言:javascript
复制
import { ref, reactive } from 'vue';
export default {
  setup () {
    const count = ref(1);
    const state = reactive({
      count
    });
    const newCount = ref(9);
    state.count = newCount;
    state.count++;
    console.log(state.count, newCount, count);// 10  10  1

  return {
    count
    };
  }
};

我们发现,这次的count值却没有发生改变,还是原始值1,是因为新创建的newCount替换并覆盖了之前的count值,取代了它的位置.

ref和reactive区别:

在模板中的ref数据默认添加.value,而reactive不会

原理:在解析中会去查找是否是ref类型,通过当前数据的__v_isRef的值来判断 true/false

shallowReactive

相比于reactive,shallowReactive是非递归监听,只监听数据第一层就是proxy包装的第一层的数据,第一层数据不变后面改变没用,但如果第一层改变整体都会重新渲染。
代码语言:javascript
复制
const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2,
  },
})

// 变更 state 的自有属性是响应式的
state.foo++

// ...但不会深层代理
isReactive(state.nested) // false
state.nested.bar++ // 非响应式

shallowRef

相比于ref,shallowRef监听的是第一层.value的变化。

triggerRef

监听某一层的改变做出更新。
代码语言:javascript
复制
 state.value.a = "4"; triggerRef(state);  //这里只有state.value.a做出更新

toRaw

使传过来的数据不进行数据响应,原理是获取reactive原始数据包装成proxy,toRaw如果要获取ref的原始数据要加.value
代码语言:javascript
复制
let b= toRaw(a) b===a //true 这里改变数据不会引起UI更新

markRaw

数据永远不要被追踪

代码语言:javascript
复制
a = markRaw(a);

customRef

自定义ref,可以用来处理异步
代码语言:javascript
复制
function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    //这里处理接口请求
    return {
      get() {
        // get里面不能处理请求,不然会造成死循环
        track() //告诉VUE这个数据是要追踪的
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger() //告诉VUE触发UI界面更新
        }, delay)
      }
    }
  })
}

isRef

用来判断某个值是否为ref创建出来的对象,场景:当需要展开某个值可能是ref()创建出来的对象时。
代码语言:javascript
复制
import { ref, isRef } from 'vue';
export default {
  setup () {
    const count = ref(1);
    const unwrappend = isRef(count) ? count.value : count;

    return {
     count,
     unwrappend
    };
  }
};

toRefs

torefs()函数可以将reactive()创建出来的响应式对象转换为普通的对象,只不过这个对象上的每个属性节点都是ref()类型的响应式数据
代码语言:javascript
复制
<template>
<p>
  <!-- 可以不通过state.value去获取每个属性 -->
  {{ count }} {{ value }}
</p>
</template>

<script>
  import { ref, reactive, toRefs } from 'vue';
  export default {
    setup () {
      const state = reactive({
        count: 0,
        value: 'hello',
      })

      return {
        ...toRefs(state)
      };
    }
  };
</script>

toRef

概念:为源响应式对象上的某个属性创建一个ref对象,二者内部操作的是同一个数据值,更新时二者是同步的。相当于浅拷贝一个属性.

区别ref: 拷贝的是一份新的数据单独操作,更新时相互不影响,相当于深拷贝。

场景:当要将某个prop的ref传递给某个复合函数时,toRef很有用.

代码语言:javascript
复制
import { reactive, ref, toRef } from 'vue'

export default {
  setup () {
    const m1 = reactive({
      a: 1,
      b: 2
    })
    const m2 = toRef(m1, 'a');
    const m3 = ref(m1.a);
    const update = () => {
      // m1.a++;//m1改变时,m2也会改变
      // m2.value++; //m2改变时m1同时改变
      m3.value++; //m3改变的同时,m1不会改变
    }

    return {
      m1,
      m2,
      m3,
      update
    }
  }
}

computed

computed()用来创建计算属性,返回值是一个ref的实例。

创建只读的计算属性
代码语言:javascript
复制
import { ref, computed } from 'vue';
export default {
  setup () {
    const count = ref(0);
    const double = computed(()=> count.value + 1);//1
    double++;//Error: "double" is read-only

    return {
      count,
      double
    };
  }
};

创建可读可写的计算属性

在使用computed函数期间,传入一个包含get和set函数的对象,可以额得到一个可读可写的计算属性

代码语言:javascript
复制
// 创建一个 ref 响应式数据
const count = ref(1)

// 创建一个 computed 计算属性
const plusOne = computed({
// 取值函数
get: () => count.value + 1,
// 赋值函数
set: val => {
    count.value = val - 1
  }
})

// 为计算属性赋值的操作,会触发 set 函数
plusOne.value = 9
// 触发 set 函数后,count 的值会被更新
console.log(count.value) // 输出 8

watch

watch()函数用来监视某些数据项的变化,从而触发某些特定的操作,看下面这个案例,会实时监听count值的变化.

代码语言:javascript
复制
import { ref, watch } from 'vue';
export default {
  setup () {
    const count = ref(1);
    watch(()=>{
      console.log(count.value, 'value');
    })
    setInterval(()=>{
      count.value++;
    },1000);

    return {
      count,
    };
  }
};

监听指定的数据源

监听reactive的数据变化

代码语言:javascript
复制
import { watch, reactive } from 'vue';
export default {
  setup () {
    const state = reactive({
      count: 0
    })
    watch(()=>state.count,(count, prevCount)=>{
      console.log(count, prevCount);//变化后的值 变化前的值
    })
    setInterval(()=>{
      state.count++;
    }, 1000);

    return {
      state
    };
  }
};

监听ref类型的数据变化

代码语言:javascript
复制
import { ref, watch } from 'vue';
export default {
  setup () {
    const count = ref(0);
    watch(count,(count, prevCount)=>{
      console.log(count, prevCount);//变化后的值 变化前的值
    })
    setInterval(()=>{
      count.value++;
    }, 1000);

    return {
      count
    };
  }
};

监听多个指定数据变化

监听reactive类型数据变化

代码语言:javascript
复制
import { watch, reactive } from 'vue';
export default {
  setup () {
    const state = reactive({
      count: 0,
      msg: 'hello'
    })
    watch([()=> state.count, ()=> state.msg],([count, msg], [prevCount, prevMsg])=>{
      console.log(count, msg);
      console.log('---------------------');
      console.log(prevCount, prevMsg);
    })
    setTimeout(()=>{
      state.count++;
      state.msg = 'hello world';
    },  1000);

    return {
      state
    };
  }
};

监听ref类型数据变化

代码语言:javascript
复制
import { ref, watch } from 'vue';
export default {
  setup () {
    const count = ref(0);
    const msg = ref('hello');
    watch([count, msg],([count, name], [prevCount, prevname])=>{
      console.log(count, name);
      console.log('---------------------');
      console.log(prevCount, prevname);
    })
    setTimeout(()=>{
      count.value++;
      msg.value = 'hello world';
    }, );

    return {
      count,
      msg
    };
  }
};
清除监视

在setup()函数内创建的watch监视,会在当前组件被销毁的时候自动停止。如果想要明确的停止某个监视,可以调用watch()函数的返回值即可

代码语言:javascript
复制
// 创建监视,并得到 停止函数
const stop = watch(() => {
/* ... */
})

// 调用停止函数,清除对应的监视
stop()
清除无效的异步任务

有时候watch()监视的值发生了变化,我们期望清除无效的异步任务,此时watch回调函数中提供了cleanup registrator function来执行清除工作

  • 场景
  • watch被重复执行了
  • watch被强制stop()

watchEffect

vue3中新增的api,用于属性监听.

与watch有什么不同?

  • watchEffect不需要指定监听属性,可以自动收集依赖,只要我们回调中引用了响应式的属性,那么这些属性变更的时候,这个回调都会执行,而watch只能监听指定的属性而做出变更(v3中可以同时监听多个)
  • watch可以获取到新值和旧值,而watchEffect获取不到
  • watchEffect会在组件初始化的时候就会执行一次与computed同理,而收集到的依赖变化后,这个回调才会执行,而watch不需要,除非设置了指定参数。
基础用法
代码语言:javascript
复制
import { watchEffect, ref } from 'vue'
setup () {
  const userID = ref(0)
  watchEffect(() => console.log(userID))
  setTimeout(() => {
    userID.value = 1
  }, 1000)

/*
      * LOG
      * 0 
      * 1
    */

  return {
    userID
  }
}
停止监听

如果watchEffect是在setup或者生命周期里面注册的话,在取消挂在的时候会自动停止。

代码语言:javascript
复制
//停止监听

const stop = watchEffect(() => {
/* ... */
})

// later
stop()
使 side effect 无效

什么是 side effect ,不可预知的接口请求就是一个 side effect,假设我们现在用一个用户ID去查询用户的详情信息,然后我们监听了这个用户ID, 当用户ID 改变的时候我们就会去发起一次请求,这很简单,用watch 就可以做到。但是如果在请求数据的过程中,我们的用户ID发生了多次变化,那么我们就会发起多次请求,而最后一次返回的数据将会覆盖掉我们之前返回的所有用户详情。这不仅会导致资源浪费,还无法保证 watch 回调执行的顺序。而使用watchEffect我们就可以做到.

onInvalidate(fn)传入的回调会在watchEffect重新运行或者watchEffect停止的时候执行。

代码语言:javascript
复制
watchEffect(() => {
  // 异步api调用,返回一个操作对象
  const apiCall = someAsyncMethod(props.userID)

  onInvalidate(() => {
  // 取消异步api的调用。
    apiCall.cancel()
  })
})

shallowReactive

概念:只处理对象最外层属性的响应式(也就是浅响应式),所以最外层属性发生改变,更新视图,其他层属性改变,视图不会更新.

场景:如果一个对象的数据结构比较深,但变化只是最外层属性.

代码语言:javascript
复制
import { shallowReactive } from 'vue'

export default {
  setup() {
    const obj = {
      a: 1,
      first: {
        b: 2,
        second: {
          c: 3
        }
      }
    }
    const state = shallowReactive(obj)

    function change1() {
      state.a = 7
    }

    function change2() {
      state.first.b = 8
      state.first.second.c = 9
      console.log(state);
    }
    return { state }
  }
}

shallowRef

概念:只处理了value的响应式,不进行对象的reactive处理.

场景:如果有一个对象数据,后面会产生新的对象替换.

代码语言:javascript
复制
import { shallowRef } from 'vue'

export default {
  setup () {
    const m1 = shallowRef({a: 1, b: {c: 2}})
    const update = () => {
      m1.value.a += 1
    }

    return {
      m1,
      update
    }
  }
}

customRef

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

场景:使用customRef实现输入框防抖

代码语言:javascript
复制
<template>
<div>
  <input v-model="keyword" placeholder="搜索关键字"/>
  <p>{{keyword}}</p>
</div>
</template>

<script>
import { customRef } from 'vue'

export default {
  setup () {
    const keyword = useDebouncedRef('', 500)
    console.log(keyword)

    return {
      keyword
    }
  }
}
function useDebouncedRef(value, delay = 200) {
  let timeout;
  return customRef((track, trigger) => {
    return {
      get() {
      // 告诉Vue追踪数据
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          // 告诉Vue去触发界面更新
          trigger()
        }, delay)
      }
    }
  })
}
</script>

自定义Hook函数

自定义hook的作用类型于vue2中的mixin技术。

优势:清楚知道代码来源,方便复用

案例:收集用户点击的页面坐标

hook/useMousePosition.js

代码语言:javascript
复制
import { ref, onMounted, onUnmounted } from "vue";

export default function useMousePosition() {
// 初始化坐标数据
const x = ref(-1);
const y = ref(-1);

// 用于收集点击事件坐标的函数
const updatePosition = e => {
        x.value = e.pageX;
        y.value = e.pageY;
    };

// 挂载后绑定点击监听
    onMounted(() => {
document.addEventListener("click", updatePosition);
    });

// 卸载前解绑点击监听
    onUnmounted(() => {
document.removeEventListener("click", updatePosition);
    });

return { x, y };
}

模版中使用hook函数

代码语言:javascript
复制
<template>
  <div>
    <p>{{ x }}</p>
    <p>{{ y }}</p>
  </div>
</template>

<script>
  import useMousePosition from '@/hook/useMousePosition'
  export default {
    setup () {
      const {x, y} = useMousePosition();
      return {
        x,
        y
      }
    }
  }
</script>

readonly与shallowReadonly

  • readonly:
  • 深度只读数据
  • 获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。
  • 只读代理是深层的:访问的任何嵌套 property 也是只读的。
  • shallowReadonly
  • 浅只读数据
  • 创建一个代理,使其自身的 property 为只读,但不执行嵌套对象的深度只读转换
  • 应用场景:
  • 在某些特定情况下, 我们可能不希望对数据进行更新的操作, 那就可以包装生成一个只读代理对象来读取数据, 而不能修改或删除

Template refs

通过ref()还可以引用页面上的元素或者组件.

元素引用

使用ref()函数创建DOM引用,需在onMounted中获取.

代码语言:javascript
复制
<template>
  <div>
    <p ref="dom">hello</p>
  </div>
</template>

<script>
  import { ref, onMounted } from 'vue';
  export default {
    setup () {
      const dom = ref(null);
      onMounted(()=> {
        console.log(dom.value)//当前dom元素
      });

      return {
        dom
      }
    }
  };
</script>
组件引用
代码语言:javascript
复制
<template>
  <div>
    <Test ref="comRef"/>
  </div>
</template>

<script>
  import { ref, onMounted } from 'vue';
  import Test from "./test2";
  export default {
    components: { Test },
    setup () {
      const comRef = ref(null);
      onMounted(()=> {
        comRef.value.coun;//获取子组件值
        comRef.value.Handle();//调用子组件函数
      })

      return {
        comRef
      }
    }
  };
</script>

createComponent

这个函数不是必须的,除非你想完美结合TypeScript提供的类型推断来进行项目开发

场景:这个函数仅仅提供了类型推断,能为setup()函数中的props提供完整的类型推断.

代码语言:javascript
复制
import { createComponent } from 'vue'

export default createComponent({
  props: {
    foo: String
  },
  setup(props) {
    props.foo // <- type: string
  }
})

getCurrentInstance

描述:可以获取当前组件的实例,然后通过ctx属性获取当前上下文,这样我们就可以在steup中使用router和vuex了.

代码语言:javascript
复制
<script>
import { getCurrentInstance } from 'vue'
export default {
  setup () {
const { ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value)  //当前路径
//与以前this获取原型上东西一样
//ctx.$parent  父组件
// ctx.$nextTick  组件更新完毕  
// ctx.$store  VueX
  }
}
</script>

最后

在逻辑组织和逻辑复用方面,Composition API是优于Options API,因为Composition API几乎是函数,会有更好的类型推断,Composition API对 tree-shaking 友好,代码也更容易压缩,Composition API中见不到this的使用,减少了this指向不明的情况,说到这里我们对Vue3.0的Composition-Api有了一个大致的了解,可以看出composition api他更灵活,有利于写出高内聚、低耦合的代码。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-10-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端开发社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • LifeCycle Hooks
  • setup
    • 理解
      • 执行时机
        • 接收props数据
        • reactive
          • reactive是用来创建一个响应式对象,等价于2.x的Vue.observable,具体可以参考下面demo。
          • ref
            • 基本语法
              • 在template中访问ref创建的响应式数据
                • 将ref响应式数据挂载到reactive中
                • shallowReactive
                  • 相比于reactive,shallowReactive是非递归监听,只监听数据第一层就是proxy包装的第一层的数据,第一层数据不变后面改变没用,但如果第一层改变整体都会重新渲染。
                  • shallowRef
                    • 相比于ref,shallowRef监听的是第一层.value的变化。
                    • triggerRef
                      • 监听某一层的改变做出更新。
                      • toRaw
                        • 使传过来的数据不进行数据响应,原理是获取reactive原始数据包装成proxy,toRaw如果要获取ref的原始数据要加.value
                        • markRaw
                        • customRef
                          • 自定义ref,可以用来处理异步
                          • isRef
                            • 用来判断某个值是否为ref创建出来的对象,场景:当需要展开某个值可能是ref()创建出来的对象时。
                            • toRefs
                              • torefs()函数可以将reactive()创建出来的响应式对象转换为普通的对象,只不过这个对象上的每个属性节点都是ref()类型的响应式数据
                              • toRef
                              • computed
                                • 创建只读的计算属性
                                • watch
                                  • 清除监视
                                    • 清除无效的异步任务
                                    • watchEffect
                                      • 基础用法
                                        • 停止监听
                                          • 使 side effect 无效
                                          • shallowReactive
                                          • shallowRef
                                          • customRef
                                          • 自定义Hook函数
                                          • readonly与shallowReadonly
                                          • Template refs
                                            • 元素引用
                                              • 组件引用
                                              • createComponent
                                              • getCurrentInstance
                                              • 最后
                                              领券
                                              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档