组合式(Composition)API

 1、选项式API与组合式API

在vue中我们有两种API,一种是选项式,一种是组合式,其中选项式主要用于vue2,组合式主要用于vue3。

选项式API(Option API) 

在vue2中我们书写选项式API,每个选项都有固定的书写位置,使用data选项来书写响应式数据,methods中书写方法。

  • 优点:写代码的位置已经约定好,结构清晰

  • 缺点:代码组织性差,相似的逻辑代码不便于复用,逻辑复杂代码多了不好阅读,同一功能的上下文代码难找。

  • export default{
        data(){
            return{
                list:[]
            }
        },
        methods:{
        //书写方法函数,在需要读取data中定义的数据时,需要使用this. 来获取,所以里面不能使用箭头函数
           
     },
       
        }
    

    组合式API(composition)

         所有与特定功能相关地代码可以写到一块,代码比较集中,在定义响应式数据时不在需要data,方法函数也不再写在metgods中

<script setup>
import { computed,watch,ref ,reactive} from "vue";
//定义响应式数据
const num = ref('');
const list = reactive([]);
//定义方法
const getNum=()=>{
    
}

</script>

 2、生命周期函数

选项式API 组合式APT
beforeCreate 没有beforeCreate,在setup中做了beforeCreate、created中应该做的事
created
beforeMount onBeforeMount挂载DOM前
mounted onMounted挂载DOM后
beforeUpdate onBeforeUpdate更新组件前
updated <
  • 10
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3的组合式API是一种新的编程模式,它使得在Vue组件中可以更灵活地组织和复用逻辑。下面是对Vue 3组合式API的介绍: 1. Composition API组合式API):Vue 3中引入了Composition API,它允许我们将逻辑按照功能进行组合,而不是按照生命周期钩子进行划分。这样可以更好地组织和复用代码。 2. setup函数:在Vue 3中,我们需要在组件中使用setup函数来定义组合式API。setup函数在组件创建之前执行,并且接收两个参数:props和context。我们可以在setup函数中定义响应式数据、计算属性、方法等。 3. reactive函数:reactive函数是Vue 3中用来创建响应式数据的函数。我们可以使用reactive函数将普通对象转换为响应式对象,从而实现数据的双向绑定。 4. ref函数:ref函数是Vue 3中用来创建单个响应式数据的函数。与reactive函数不同,ref函数返回一个包装过的对象,我们需要通过.value属性来访问和修改数据。 5. computed函数:computed函数用来创建计算属性。与Vue 2中的计算属性类似,我们可以使用computed函数来定义一个依赖其他响应式数据的属性。 6. watch函数:watch函数用来监听响应式数据的变化。我们可以使用watch函数来执行一些副作用操作,比如发送网络请求或者更新DOM。 7. 生命周期钩子:在Vue 3中,生命周期钩子函数被废弃了,取而代之的是使用setup函数来处理组件的生命周期逻辑。我们可以在setup函数中使用onMounted、onUpdated等函数来模拟Vue 2中的生命周期钩子。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值