vue3选项式api与组合式api

选项式api

选项式api就是用包含多个选项的对象来描述组件的逻辑，比收说，datat，methods，mounted，updated等等。在这些选项内定义的属性都会暴露在函数内部的this上，其中的this会指向组件实例。

<template><button @click="add">Count is: {{ count }}</button>
</template>
<script>
export default {// data() 返回的属性将会成为响应式的状态// 并且暴露在 `this` 上data() {return {count: 0}},// methods 是一些用来更改状态与触发更新的函数// 它们可以在模板中作为事件监听器绑定methods: {add() {this.count++}},mounted() {console.log(`count 的值为 ${this.count}.`)}
}
</script>

组合式api

组合式api与选项式api不同，他通常会跟<script setup>一起搭配使用，并且组合式api的可复用性比选项式api要好很多，所以，组合式api适合使用在那些大型项目中，代码的灵活性也比较高，而选项式api对于初学者来说更加友好，在做一些小型项目是，还个人感觉还是选择选项式api比较好。

<template><button @click="add">Count is: {{ count }}</button>
</template>
<script setup>
import { ref, onMounted } from 'vue'// 响应式状态
const count = ref(0)// 用来修改状态、触发更新的函数
function add() {count.value++
}// 生命周期钩子
onMounted(() => {console.log(`Tcount 的值是 ${count.value}.`)
})
</script>

vue3选项式api与组合式api相关推荐

Vue3中的API——选项式API、组合式API
Vue 的组件可以按两种不同的风格书写:选项式 API 和组合式 API. 对于熟悉Vue2的人来说,选项式api是一个很好的选择,但Vue3提供的组合式api对于代码复用效果更为突出.博主之前是用的 ...
vuejs中组件的两种不同的编写风格-选项式API及组合式API
前言随着vue3的逐渐稳定,以及周边生态的完善,现在vue3已经成为默认的使用方式了的所以,对于一个前端开发者,Vue2与Vue3都得要会,在vue3中新增很多东西,比如:Fragment,Tel ...
Vue3官网-可复用组合式API（十四）实例 property（\$slots，\$attrs）、渲染函数render(虚拟节点VNode，h() 参数，使用JavaScript代替模板功能)，插件
Vue3官网-可复用&组合式API(十四)实例 property($slots,$attrs).渲染函数render(虚拟节点VNode,h() 参数,使用JavaScript代替模板功能), ...
vue3.2-setup语法糖、组合式API、状态库Pinia归纳总结
创建项目: vite脚手架创建项目: vue3+vite2+ts npm create vite@latest 一.页面组件结构 <template>home </template& ...
Vue3为什么要使用组合式API——Vue3的组合式API和Vue2的选项式API的优缺点
Vue3为什么要使用组合式API--Vue3的组合式API和Vue2的选项式API的优缺点 1.Vue2为什么使用选项式API 2.Vue2如何使用组合式API 3.组合式API Vs 选项式API ...
Vue3.0 组合式 API 分析与实践
本文带大家深入理解组合式 API 的设计详情,同时加入我们的实践经验总结. 01 背景 Vue3.x 版本的出现带来了许多令人眼前一亮的新特性,其中组合式 API(Composition API),一 ...
vue3组合式api
文章目录组合式API介绍什么是组合式 API? 为什么要有组合式 API? 更好的逻辑复用更灵活的代码组织 Option Api Option Api的缺陷 Composition Api 更好 ...
Vue3 组合式API初体验
目录一.背景二.什么是组合式API(Composition API ) 组合式API全景为什么要引入组合式API `mixins` 的方式域插槽的方式组合式API的方式结论组合式API存 ...
Vue3 -- 组合式API
组合式API 组合式api(Composition API)算是vue3对我们开发者来说非常有价值的一个api更新,我们先不关注具体语法,先对它有一个大的感知 1. composition vs op ...

vue3选项式api与组合式api

选项式api

组合式api

vue3选项式api与组合式api相关推荐

最新文章

热门文章