Vue3.0中set up与composition API特性

谢向晚

已于 2022-10-30 20:27:40 修改

阅读量392

点赞数

分类专栏： vue3.0 文章标签：前端 javascript 开发语言 vue.js

于 2022-10-30 20:26:39 首次发布

本文链接：https://blog.csdn.net/lwx33912138/article/details/127604100

版权

vue3.0 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

set up的特性与注意点：

两种用法：

Vue3 的一大特性函数 ---- setup

set up的特性与注意点：

　　1.setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数也就说在 setup函数中是无法使用 data 和 methods 中的数据和方法的，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined

　　2.setup函数是 Composition API（组合API）的入口

　　3.在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法再模板中使用

4.setup函数只能是同步的不能是异步的

两种用法：

用法1:结合ref使用

<template>

 <div id="app">

  {{name}}

  <p>{{age}}</p>

  <button @click="plusOne()">+</button>

 </div>

</template>

  

<script>

import {ref} from 'vue'

export default {

 name:'app',

 data(){

  return {

   name:'xiaosan'

  }

 },

 setup(){

  const name =ref('小四')

  const age=ref(18)

  function plusOne(){

   age.value++ //想改变值或获取值 必须.value

  }

  return { //必须返回 模板中才能使用

   name,age,plusOne

  }

 }

}

</script>

用法2：代码分割

Options API 和 Composition API

Options API 规定：我们需要在 props 里设置接收参数
                                在 data 里设置变量
                                在 computed 里设置计算属性
                                在 watch 里设置监听属性
                                在 methods 里设置事件方法

通过声明组件选项的对象形式编写组件，分类清晰，写的时候分工很明确

options API更条理，但单个组件增长过大反而成为限制，一个逻辑关注点分散在组件各处，维护时需要反复横跳

composition API 则是一组API，包括：Reactivity API，生命周期钩子，依赖注入。使用户可以通过导入函数的方法编写vue组件，写时这些控制权掌握在用户自己手中，更灵活。

使用选择：

如果项目属于中低复杂度的场景，options API仍是好选择；

对于大型，高扩展，强维护的项目上，compostion API会获得更大收益。

我们期望是这样的：


importuseAfrom'./a';

importuseBfrom'./b';

importuseCfrom'./c';


exportdefault{

 setup (props) {

 let{ a, methodsA } = useA();

 let{ b, methodsB } = useA();

 let{ c, methodsC } = useC();  

 return{

   a,

    methodsA,

    b,

    methodsB,

    c,

    methodsC

  }

 }

}

就算 setup 内容代码量越来越大，但是始终围绕着大而不乱，代码结构清晰的路子前进。