【Vue】Setup 函数的使用

学习内容：
1）Vue3 里面提供的新的语法API，‍‍叫做composition API。

什么是composition API？

为什么我们要用composition API？

当我们在项目开发之中会遇到这样的问题，比如说当我的这样的一个组件‍‍越来越大的时候，它里面会有这种name、age一系列的东西：

同时它还会有 methods 这样的东西:【这些代码都可以模板化】

比如说有 setName这样的方法，‍‍
然后还会有setAge这样的方法，

然后还会有一些其他的方法，比如说 a()、b()的一些方法都会写在这，

除了这之外，我们还会写 computed 计算属性:

这里面又会写很多新的计算属性，然后再去写一些什么，比如说 directives:

directives 它是一个对象，它里面可能会有很多的东西，
然后又会有 mixin这样的内容。‍‍代码写注释：

当我们的组件变得越来越复杂的时候，我们会发现一个问题，‍‍当我去看模板的时候，我想知道name相关的逻辑的时候，‍‍

我需要不断的去向上翻，在 methods 里面找到和 name 相关的逻辑，‍‍然后再往上翻去找到数据里面和name相关的东西。‍‍

当组件变成几百行的时候，我们去找这样的逻辑会变得比较困难。
所以当我们去写一个 Vue 组件的时候，‍‍组件变得越来越大的时候，
传统的这种 Vue 的语法去定义data 、methods，‍‍computed 分开去定义语法，就会显得维护性。

比如说和name相关的数据定义在某一块，‍‍和 name 相关的一些方法可能就在中间，和 name 相关的渲染，包括其他的一些内容可能在下面。‍‍

你会发现这些代码维护起来总是要上下跳着去写这样的代码。‍‍

那么在 Vue3 引入了 composition API 之后，我们就可以有效的把这种代码维护性的问题给它解决掉，‍‍我们就可以让我们的代码更加容易聚合到一起，更加容易具备一些更好的维护性。‍‍【通用概念】

大概了解了 composition API 这样的产生的背景之后，我来给大家讲一下composition API‍‍怎么去使用它，哪里能用？

要想使用composition API，首先大家一定要学习的一个函数，‍‍叫做一个set up这样的函数。‍‍

那么我们在这里写一个 setup 函数，这个函数什么时候执行的呢？‍‍

它是在这个组件 created ，实例被完全‍‍初始化之前执行的一个函数，

这个函数它可以接收到两个参数，‍‍分别是当前组件接收的props以及它的一个context。‍‍

props 就是外部组件传递过来的一些内容，而context指的是一个上下文，

setup 函数在 created 实际化完全被初始化之前会执行，‍‍在这里面我们就可以去用 composition API 编写我们的代码了。‍‍

写一个最基础的 composition API 语法，‍‍

setup，最后一定要有一个 return 的值，比如说return一个 name，‍‍叫做dell，

那么 setup 里面导出的内容，

我就可以在模板里面直接去使用了，‍‍比如说模板里面你直接用这个name:

我们到页面上来看，‍‍dell就展示出来了:

setup里面我们现在return一个方法，比如说这里我有一个 onclick‍‍等于 handleClick。‍‍

然后在 return 里面我们写一个handleClick方法，冒号，‍‍比如说 alert，123保存:

然后再回到页面上我们刷新，点击dell ，123能弹出来：

我们发现其实setup这个函数，它return的所有内容会暴露到外部，‍‍我们在模板里面可以直接去使用这些变量，或者这些 handleClick 方法都可以，‍‍

我们接下来继续再对setup做一些分析，‍‍setup它是在实例被创建之前执行的一个函数，

setup这个函数是在实例被初始化之前就执行的一个函数，
实例被初始化之前methods 它并没有放到 this 上面去，

所以你通过this点test根本就没法去调用这个method:

一定要记住，其实在setup里面压根我们就不能使用this这样的关键词，‍‍this里面的东西实际上什么也没有，所以我们不要这么去写。

所以用了setup之后，我们就不会用this‍‍这样的语法再去写任何的代码了，后面像这种‍‍methods的定义，
我们都会换成新的 composition API的语法来去定义。‍‍

composition API‍‍所有代码编写之前一定要建立在一个setup 函数之上，
这个函数是在实例‍‍被完全初始化之前会自动调用一个函数，这里面它会return一些内容出去，‍‍这些内容会暴露在外部，
外部的template 模板里面可以直接去使用它。‍‍
问题清单：
原因是什么？
什么是composition API？
为什么我们要用composition API？

【Vue】Setup 函数的使用相关推荐

Vue中setup函数
介绍 Vue3中使用setup函数取代methods和data 效果代码 <!DOCTYPE html> <html lang="en"> <hea ...
python中setup函数的用法_Vue 3 setup 函数
setup setup 函数可以说是 Vue 3 一个入口函数. 参数使用 setup 函数时,它将接受两个参数: props context 让我们更深入地研究如何使用每个参数. Props se ...
vue3.0js 非prop属性的值和setup函数的使用
非prop属性的值一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 prop 定义的 attribute. 因为显式定义的 prop 适用于向一个子组件传入信息,然而 ...
Vue3（setup函数介绍）
Composition Api setup函数是一个新的组件选项.作为在组件内使用Composition API的入口点. 调用时机: setup函数会在beforeCreate钩子之前被调用返回值 ...
vue3中setup()函数的使用二
vue3的使用 <template><div id="one"><img src="http://127.0.0.1:9000/upload ...
vue3中setup()函数的使用一
<template><div id="one"><img src="http://127.0.0.1:9000/upload/001.png ...
vue3组合式Composition API之setup函数的具体用法
vue3拉开序幕的setup 理解:Vue3.0中一个新的配置项,值为一个函数. setup是所有Composition API(组合API)" 表演的舞台 ". 组件中所用到的: ...
vue3中的setup函数
一.概念: setup是vue3中的一个新的配置项,值为一个函数,我们在组件中用到的数据.方法等等,都要配置在setup中. 二.详解: setup函数的返回值有两种 1.返回一个渲染函数,可以自定义 ...
Vue setup语法糖
Vue setup语法糖 setup语法糖指的是Vue组件当中的setup字段是 Vue3 的一个新语法糖,在 setup 函数中. 所有 ES 模块导出都被认为是暴露给上下文的值,并包含在 set ...

【Vue】Setup 函数的使用

【Vue】Setup 函数的使用相关推荐

最新文章

热门文章