Vue3实战06-CompositionAPI+<script setup>好在哪?

这篇具有很好参考价值的文章主要介绍了Vue3实战06-CompositionAPI+<script setup>好在哪?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue 3 的Composition API +


 <script setup> 标签内定义的变量和函数,都可以在模板中直接使用。

### 1.2 显示清单应用

实现累加器后,回到src/pages/Home.vue 组件,使用如下代码显示清单应用。

直接import TodoList.vue组件,然后<script setup>会自动把组件注册到当前组件,这样我们就可以直接在template中使用  来显示清单的功能。

```vue
<template>
    <h1>这是首页</h1>
    <TodoList />
</template>

<script setup>
import TodoList from '../components/TodoList.vue'
</script>

这就把清单功能独立出来,可在任意需要的地方复用。

基于组件去搭建应用,可实现对业务逻辑的复用。如有其他页面也需要用到这功能,直接复用。

然后,就可基于新语法实现清单应用。

把之前的代码移植过来后,使用ref包裹的响应式数据。修改title和todos时,注意修改响应式数据的value属性。

<template>
  <div>
    <input type="text" v-model="title" @keydown.enter="addTodo" />
    <ul v-if="todos.length">
      <li v-for="todo in todos">
        <input type="checkbox" v-model="todo.done" />
        <span :class="{ done: todo.done }"> {{ todo.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
let title = ref("");
let todos = ref([{title:'学习Vue',done:false}])

function addTodo() {
  todos.value.push({
    title: title.value,
    done: false,
  });
  title.value = "";
}
</script>

2 计算属性

Composition API语法中,计算属性和生命周期等功能,都可脱离Vue的组件机制单独使用 。

向TodoList.vue加入:

<template>
  <div>
    <input type="text" v-model="title" @keydown.enter="addTodo"/>
    <button v-if="active < all" @click="clear">清理</button>
    <ul v-if="todos.length">
      <li v-for="todo in todos">
        <input type="checkbox" v-model="todo.done"/>
        <span :class="{ done: todo.done }"> {{ todo.title }}</span>
      </li>
    </ul>
    <div v-else>暂无数据</div>
    <div>
      全选<input type="checkbox" v-model="allDone"/>
      <span> {{ active }} / {{ all }} </span>
    </div>
  </div>
</template>

<script setup>
import {ref, computed} from "vue";

let title = ref("");
let todos = ref([{title: '学习Vue', done: false}])

function addTodo() {
...
}

function clear() {
  todos.value = todos.value.filter((v) => !v.done);
}

let active = computed(() => {
  return todos.value.filter((v) => !v.done).length;
});
let all = computed(() => todos.value.length);
let allDone = computed({
  get: function () {
    return active.value === 0;
  },
  set: function (value) {
    todos.value.forEach((todo) => {
      todo.done = value;
    });
  },
});
</script>

具体的计算属性的逻辑和02讲一样,区别仅在computed用法。

02讲的computed是组件的一个配置项,而这的computed的用法是单独引入使用。

3 Composition API 拆分代码

之前的累加器和清单,虽功能简单,但也属于两个功能模块。如在一个页面有俩功能,就需在data和methods里分别配置。但如此,数据和方法相关的代码会写在一起,在组件代码行数多了后难维护。

所以,要使用Composition API 逻辑拆分代码,把一个功能相关的数据和方法维护在一起。

但所有功能代码都写在一起,也有问题:随功能复杂,script内部代码越来越多。因此,可进步对代码拆分,把功能独立的模块封装成一个独立函数,做到按需拆分。

新建函数 useTodos:

function useTodos() {
  let title = ref("");
  let todos = ref([{ title: "学习Vue", done: false }]);
  function addTodo() {
    todos.value.push({
      title: title.value,
      done: false,
    });
    title.value = "";
  }
  function clear() {
    todos.value = todos.value.filter((v) => !v.done);
  }
  let active = computed(() => {
    return todos.value.filter((v) => !v.done).length;
  });
  let all = computed(() => todos.value.length);
  let allDone = computed({
    get: function () {
      return active.value === 0;
    },
    set: function (value) {
      todos.value.forEach((todo) => {
        todo.done = value;
      });
    },
  });
  return { title, todos, addTodo, clear, active, all, allDone };
}

就是把和清单相关的所有数据和方法,都放在函数内部定义并返回,这个函数就可放在任意地方维护。

而组件入口即文章来源地址https://www.toymoban.com/news/detail-698224.html

到了这里,关于Vue3实战06-CompositionAPI+<script setup>好在哪?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 script setup 语法糖用了才知道有多爽 (一)

    这里是完整的目录图片,由于整篇文章篇幅太长,拆分成了几篇来展示 vue3 使用的越来越广泛, 公司项目开始使用 vue3 ,在 vue 3.2 之后新加入了 script setup 语法糖,上手开始看项目发现对于语法糖的使用有一些迷惑,特此整理,在整理这些内容的同时查阅了大量的资料,自己在这个过程

    2024年02月16日
    浏览(34)
  • Vue3 项目中使用setup()函数报错,script setup cannot contain ES module exports

    当使用vue3+vite使用语法糖setup时,要注意写法. 第一种写法就是 script 标签里面配置 setup,另一种是:export default 类里配置 setup() 方法, 我们只需要使用一种方法即可,混用了就会报错了。 解决: 第一种 script setup import {ref} from \\\'vue\\\' import { Toast } from \\\'vant\\\'; import Index from \\\'../pag

    2023年04月08日
    浏览(47)
  • 手写类似于BetterScroll样式的左右联动菜单 uni-app+vue3+ts (使用了script setup语法糖)

     注意:在模拟器用鼠标滚动是不会切换光标的,因为使用的是触摸滑动。【自定义类型贴在最后了】 script 部分如下:  template部分如下: scss样式:  category.d.ts main-arr.d.ts  

    2024年02月05日
    浏览(49)
  • 关于 vue3运行报错Internal server error: [@vue/compiler-sfc] <script setup> cannot contain ES 的处理方法

    大致的意思就是 script setup  不能使用ES模块导出 其实问题就出在,给官方给出的方法混用了 一种是: script  标签里面配置  setup 另一种是: export default  类里配置  setup()  方法 两者用一种就行了 第一种  第二种

    2024年02月07日
    浏览(45)
  • vue3-json-schema-form中StringField.vue报错 `<script setup>` cannot contain ES module exports vue/no-e

    vue3-json-schema-form课程中StringField.vue照着打报错 原代码如下: 修改后代码如下: type.ts文件代码片段如下: 主要问题就是说script标签中加上setup,代码块中不能再出现export default,将该部分代码 修改为:

    2024年02月11日
    浏览(36)
  • Vue源码学习(二):<templete>渲染第一步,模板解析

    好家伙,   在正式内容之前,我们来思考一个问题, 当我们使用vue开发页面时, tamplete中的内容是如何变成我们网页中的内容的 ?   它会经历四步: 解析模板:Vue会解析 template 中的内容,识别出其中的指令、插值表达式( {{}} ),以及其他元素和属性。 生成AST:解析模板后,

    2024年02月09日
    浏览(38)
  • vue使用echarts的堆叠折线图一直警告[Violation] 'requestAnimationFrame' handler 用时 <N> 毫秒怎么解决...

    这个警告通常是因为你的图表渲染过于复杂或者数据量过大,导致在浏览器的一帧内渲染超时。 你可以尝试以下方法来解决这个问题: 减少图表中的数据量,使其更加简单,从而减少渲染时间。 使用图表的 lazyUpdate 选项,可以让图表每隔一段时间重新渲染,从而减少每次渲

    2024年02月16日
    浏览(34)
  • Rust中的智能指针:Box<T> Rc<T> Arc<T> Cell<T> RefCell<T> Weak<T>

    智能指针(smart pointers)是一类数据结构,是拥有数据所有权和额外功能的指针。是指针的进一步发展 指针(pointer)是一个包含内存地址的变量的通用概念。这个地址引用,或 ” 指向”(points at)一些其 他数据 。引用以 符号为标志并借用了他们所 指向的值。除了引用数据

    2023年04月20日
    浏览(59)
  • Vue语法糖<script setup>详解,用最快的方式让你看懂和<script>的区别

    Vue3出来已经3年了,但是前两天在百度上搜索有关setup语法糖的细节时,发现很多博客关于语法糖细节部分,还是讲的很粗糙,因此决定自己来写一篇入门的博客,方便大家快速上手。 它是Vue3中的一个语法糖,熟悉vue3脚手架的同学,应该一眼就能看出来,vite脚手架默认创建

    2024年03月15日
    浏览(36)
  • C++ 中 <iterator> <functional> <numeric> 库好用的函数

    简述:迭代器省代码用的。 std::advance 记忆方法:advance-前进。 形如: advance(it, step) ,表示 it 迭代器自增 step 步。 实现类似于: 或 std::next std::prev 记忆方法:自己问英语老师。 形如 next(it, n) 及 prev(it, n) ,默认 n = 1 ,表示迭代器前移、后移 n 位。 为 std::advance 的变体,区

    2024年02月05日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包