vue3中组合式api中常用的函数功能介绍

1,ref 和 reactive 主要用来定义响应式数据。

  引入方式: import { ref, reactive  } from "vue";

  注意:ref一般适用于常规类型,比如:number,Boolean,string,array类型;  reactive一般适用于对象类型;

2,toRefs 解构式响应数据,他的作用是将对象的使用像ref一样使用;

  

// 例如
    import {ref,reactive,toRefs} from 'vue';

    setup(){
      let name=ref('song');
    
      let userinfo=reactive({
          name:'song',
          age:20
        })
      return {
        name,
        userinfo,
     ...toRefs(userinfo) } // 这里我们在使用userinfo里的数据时,需要通过userinfo.name的形式使用,toRefs的作用就是让我们像使用ref中的name一样使用 }

  

推荐这些文章:

vue3---ref,reactive,toRef,toRefs

在vue2中,数据的响应式是根据 Object.defineProperty方法实现的,所以需要拦截的属性key必须是已知的,也就是对于新增的key无能为力。
在vue3中,使用了代理Proxy。该方法不需要关心key,他拦截的是data,不管是新增还是已知的key,都会被捕捉到。
vue3和vue2差异性,与React hook比如何?
vue3的生命周期:setup(替换beforeCreate, ),onBeforeupdate,onUpdated,onBeforeMount,onMounted,onBeforeUnmount,onUnmounted.
vue2双向数据绑定的核心是Ob...

vue3 ref和reactive的区别

基本定义:
ref:用于定义基本类型数据;
reactive:用于定义数组、对象、等引用类数据;
 
原理角度:
ref通过 Object.defineProperty() 的 get 与 set 来实现响应式的(数据劫持),传入一个基本类型数据,返回一个基于该值的响应ref对象,该对象中的值一旦被改变或访问,都会被跟踪到,如果传入的是引用类型,会在内部转换成reactive【ref(18)=>reactive({value:18})】;
reactive 通过使用 Proxy 来实现响应式(数据劫持),并通过Reflect 操作源对象...

vue3常用 Composition API

1.拉开序幕的setup

理解:Vue3.0中一个新的配置项,值为一个函数。

setup是所有Composition API(组合API)“ 表演的舞台 ”。

组件中所用到的:数据、方法等等,均要配置在setup中。

setup函数的两种返回值:

若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。(重点关注!)

若返回一个渲染函数:则可以自定义渲染内容。(了解)

注意点:

尽量不要与Vue2.x配置混用

Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法。

但在setup中不能访问到...

vue3 的组合Api

setup函数值组合API的入口函数
1:使用ref只能定义简单类型的变化,不能监听复杂类型的变化(对象/数组)
2:在组合API中,如果想定义方法,不用定义到methods中,直接定义即可
3:在组合API中定义的变量/方法,要想在外面使用,必须通过return暴露出去

<script>
import {ref} from 'vue'
export default {
name: 'App',
setup(){
// 入口函数

// 1. 使用 ref 只能定义基本类型的变化,不...

vue3 组合式api的意义

在vue2的optionsApi中,我们不同模块的逻辑,参数会各自分散在data,methods,computed,watch等之中,比较分散,难以管理。
而在组合式api中,我们可以把相同模块的逻辑参数集成在某一块区域,结构清晰,便于管理。在setup中也不需要考虑各种this指向了
例:
 
 
其他:
  提供了以下几个函数:

setup
ref
reactive
watchEffect
computed
toRefs
生命周期的hooks
...

vue3 setup方法

setup 组合式API ----------官方定义:通过创建 Vue 组件,我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。仅此一项就可以使我们的应用在可维护性和灵活性方面走得相当远。然而,我们的经验已经证明,光靠这一点可能并不够,尤其是当你的应用变得非常大的时候——想想几百个组件。处理这样的大型应用时,共享和重用代码变得尤为重要。 setup 选项是一个接收 props 和 context 的函数。此外,setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。 <script lang="ts"> ...

vue3 组合api的简单使用

 

//compostion api (组合api)
import { ref, reactive,onBeforeMount, onMounted,onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted,computed,watch } from 'vue'
export default{
setup(){
// 非响应式变量
let msg = "hello wrold";
// 响应式变量
let title = ref("hello wrold"...

vue3 ref reactive的区别

ref 可以用于创建任何响应式类型的数据结构 注:建议用来创建基础数据类型reactive 用于创建引用数据类型的数据 注: object注: reactive 不能进行结构,结构后数据失去响应式,如需要进行结构请用toRefs进行包裹。

...

vue3 的toref和torefs

roRef的作用是复制reactive的某一个属性,转成ref响应式的值,同时还保存着两者的联系,reactive的属性值改变了ref的值也跟着改变,保留了引用,也就是你从 reactive 复制过来的属性进行修改后,除了视图会更新,原有 ractive 里面对应的值也会跟着更新, 可用于父组件传递

...

vue3语法-响应式数据和组合setup

 
链接:http://ggz.longpanda.top/article_detail?id=23
 
setup和mixins的区别

Mixin的缺陷:
    1、很容易发生冲突:因为每个 mixin 的 property 都被合并到同一个组件中,所以为了避免 property 名冲突,你仍然需要了解其他每个特性。
    2、可重用性是有限的:我们不能向 mixin 传递任何参数来改变它的逻辑,这降低了它们在抽象逻辑方面的灵活性。
 
    因此,为了解决这些问题,我们添加了一种通过逻辑关注...

文章标题:vue3中组合式api中常用的函数功能介绍
文章链接:https://www.dianjilingqu.com/50957.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>