vue3 的 effect 手写实现

Vue3中的effect特性是一个非常重要的特性,它不仅仅是响应式系统的核心,还可以被广泛地应用于Vue3的许多高级功能,如computed、watch、生命周期等。本文将带领读者从零开始手写Vue3中的effect特性,并通过实现一个简单的案例,让读者更好地理解effect的实现原理和用法。
摘要由CSDN通过智能技术生成

基础effect 实现

Vue3中的effect特性是一个非常重要的特性,它不仅仅是响应式系统的核心,还可以被广泛地应用于Vue3的许多高级功能,如computed、watch、生命周期等。本文将带领读者从零开始手写Vue3中的effect特性,并通过实现一个简单的案例,让读者更好地理解effect的实现原理和用法。

首先,我们需要一个effect的基础实现。为此,我们需要一个ReactiveEffect类,以及一个用于执行effect回调的run方法。具体代码实现如下:

class ReactiveEffect {
  public active = true
  constructor(public fn) {}
  run() {
    if (!this.active) return this.fn()
    try {
      activeEffect = this
      this.fn()
    } finally {
      activeEffect = null
    }
  }
}

export function effect(fn) {
  const _effect = new ReactiveEffect(fn)
  _effect.run()
}

在上述代码中,我们定义了一个ReactiveEffect类,它接收一个fn函数作为参数,run方法用于执行effect回调。在run方法中,我们首先判断当前effect实例是否处于激活状态(即active为true),如果不是,我们直接执行用户传入的回调函数,不需要进行依赖收集。否则,我们将当前effect实例挂载到全局的activeEffect上,并执行用户传入的回调函数。在执行完成后,我们再将activeEffect设置为null,退出当前effect函数。

接下来,我们需要将之前实现的reactive和现在的effect整合到一起,并在index.ts文件中对外暴露。具体代码如下:

export { reactive } from './reactive'
export { effect } from './effect'

最后,我们可以通过一个简单的案例来验证effect的实现效果。具体代码如下:

<div id="app"></div>
<script src="./reactivity.global.js"></script>
<script>
  const { reactive, effect } = VueReactivity
  const obj = {
    name: 'dy',
    age: 25,
    get fn() {
      return this.age
    }
  }
  const state = reactive(obj)
  effect(() => {
    document.getElementById('app').innerHTML = state.name + '年龄' + state.age
  })
</script>

在上述代码中,我们首先引入了Vue3中的reactive和effect函数,并创建了一个简单的对象。接着,我们使用reactive函数将该对象转化为响应式对象,并使用effect函数创建一个effect实例。在effect实例中,我们通过一个回调函数来更新页面上的内容。

通过以上代码实现,我们可以看到在完成effect的基本功能(执行用户自己

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 3中,实现一个手写风格的下拉选择器(通常称为手风琴或折叠菜单)可以通过自定义组件和指令来完成。以下是一个简单的步骤概述: 1. **安装依赖**: 首先,确保你的项目已经安装了Vue CLI,然后使用`npm install vue`或`yarn add vue`来添加基础依赖。 2. **创建组件**: 创建一个名为`AccordionSelect.vue`的组件文件,里面会包含状态管理、样式和交互逻辑。你可以用`<template>`部分来设计界面,比如使用`<div>`和`<ul>`来构建菜单结构,`<input>`用于显示和编辑手写文本。 ```html <!-- AccordionSelect.vue --> <template> <div class="accordion-select"> <input type="text" v-model="selectedValue" :disabled="!isOpen" /> <ul v-if="isOpen"> <li v-for="(item, index) in options" :key="index" @click="selectOption(item)"> {{ item }} </li> </ul> <button @click="toggleOpen">展开/收起</button> </div> </template> <script> export default { data() { return { isOpen: false, selectedValue: '', options: ['选项1', '选项2', '选项3'], // 假设这是你的选项列表 }; }, methods: { toggleOpen() { this.isOpen = !this.isOpen; }, selectOption(item) { this.selectedValue = item; this.toggleOpen(); // 关闭下拉框 }, }, }; </script> ``` 3. **样式**: 在`<style>`部分,你可以编写CSS来实现手写效果,比如给按钮添加动画,调整布局等。 4. **使用组件**: 在父组件中,通过`<AccordionSelect>`标签来渲染这个下拉选择器,并传递必要的数据如选项列表。 ```html <!-- App.vue 或其他父组件 --> <template> <div id="app"> <AccordionSelect :options="options" /> </div> </template> <script> import AccordionSelect from './components/AccordionSelect.vue'; export default { components: { AccordionSelect, }, data() { return { options: ['Option 1', 'Option 2', 'Option 3'], }; }, }; </script> ``` **相关问题**: 1. Vue组件的基本结构有哪些部分? 2. 如何在Vue中绑定数据和处理用户输入? 3. 除了`v-model`,还有哪些指令可以用来改变组件的状态?

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

开心上班

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值