首页 > 其他分享 >Vue3.5新增的baseWatch让watch函数和Vue组件彻底分手

Vue3.5新增的baseWatch让watch函数和Vue组件彻底分手

时间:2024-11-09 12:46:16浏览次数:3  
标签:count Vue 函数 watch baseWatch 组件


Vue 3.5版本中新增的`baseWatch`函数确实让`watch`函数与Vue组件彻底分手。这一变化的主要目的是使`watch`函数的实现与Vue组件及其生命周期解耦,从而使得`watch`函数更加灵活和独立。具体来说,`baseWatch`函数的引入使得开发者可以在不依赖Vue组件的情况下使用`watch`功能,这为一些特定的使用场景提供了更多的可能性。

在之前的版本中,`watch` API是与Vue组件和生命周期深度绑定的,这意味着它的实现是紧密耦合在Vue组件内部的。而`baseWatch`函数的出现,使得`watch`功能可以独立于Vue组件存在,从而在某些情况下可以更自由地使用。

这一变化也反映了Vue框架在模块化设计上的进一步优化,使得Vue的核心功能更加模块化和可复用。对于普通开发者来说,这一变化可能影响不大,但对于一些下游项目或框架(如vuemini)来说,可能会带来更多的便利和机遇。

Vue 3.5中的`baseWatch`函数确实让`watch`函数与Vue组件彻底分手,这一变化不仅增强了`watch`函数的灵活性,也为Vue框架的整体设计带来了新的可能性。

const { ref, watch, watchEffect } = require("vue");

const count = ref(0);

// 模拟count变量的值修改
setInterval(() => {
  count.value++;
}, 1000);

watch(count, (newVal) => {
  console.log("触发watch", newVal);
});

watchEffect(
  () => {
    console.log("触发watchEffect", count.value);
  },
  {
    flush: "sync",
  }
);

watch的实现是和vue组件以及生命周期深度绑定的,而vue组件以及生命周期明显是和响应式无关的。他们的实现是在runtime-core模块中,而非reactivity模块中,这也就是为什么watch的实现是放在runtime-core模块中。

vue3.5版本中,Vue Vapor团队在reactivity模块中重构实现了一个watch函数。重构的这个watch函数和我们现在使用的watch函数用法是一样的,区别在于以前的watch函数的实现和Vue组件以及生命周期是深度绑定的,而重构的watch函数和Vue组件以及生命周期一毛钱关系都没有。

这个改动对于普通开发者可能没什么影响,但是对于下游项目,比如Vue mini来说还是很受益的。因为以前他们需要自己去手写watch函数,现在reactivity提供了后就不需要这些手写的watch函数了

标签:count,Vue,函数,watch,baseWatch,组件
From: https://blog.csdn.net/2301_78133614/article/details/143590436

相关文章

  • Vue3 - 详细实现将多个文件批量导出为ZIP压缩包格式并下载功能,vue3将文件批量下载打包
    前言Vue2版本,请访问这篇文章。在vue3|nuxt3项目开发中,详解实现把多个文件组合成一个ZIP压缩包格式下载到用户本地,将文件批量下载打包成zip格式并自定义压缩包命名名称,vue3批量下载文件并导出为压缩包的功能,如何将后端返回的二进制文件流打包成zip格式,支持任意文件......
  • java基于SpringBoot的家电销售管理系统(源码+vue+部署文档+前后端分离等)
    收藏关注不迷路!!......
  • Vue+SpringBoot的民宿预订系统 微信小程序
    关注博主迷路,收藏文章方便后续找到,以防迷路,最下面有联系博主项目介绍微信小程序的民宿预订系统设计的目的是为用户提供民宿客房、公告信息等方面的平台。与PC端应用程序相比,微信小程序的民宿预订系统的设计主要面向于民宿,旨在为管理员和用户、商家提供一个微信小程序的......
  • 基于springboot+vue的医院人力资源管理系统的设计与实现(源码+lw+部署文档+讲解等)
    课题摘要基于springboot+vue的医院人力资源管理系统是一款针对医院人力资源管理需求而设计的高效、便捷的信息化系统。系统涵盖了员工信息管理功能,全面记录医院员工的基本资料,如姓名、性别、年龄、联系方式、身份证号等。同时详细记录员工的学历背景、专业资质、职称......
  • 基于springboot+vue的协同过滤算法的音乐推荐系统设计与实现(源码+lw+部署文档+讲解等
    课题摘要基于springboot+vue的协同过滤算法的音乐推荐系统是一款为音乐爱好者打造的智能推荐平台,同时具备源码、lw、部署文档和讲解。系统中的音乐资源极为丰富,涵盖了各种风格,如流行、摇滚、古典、民谣、爵士、电子等。每首歌曲都有详细的信息,包括歌手、专辑、发行时......
  • Springboot基于Vue的农产品智能交易系统ok45y
    Springboot基于Vue的农产品智能交易系统ok45y本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面 在最后面。系统程序文件列表项目功能:用户,商家,商品分类,农产品信息开题报告内容一、项目背景随着信息技术的飞速发展和互联网的广泛普......
  • 关于vue里的$refs属性
    vuejs的极大程度的帮助减少了对dom的操作,他主要通过添加ref属性,但是当获取this.$refs属性时,稍有不注意就会输出undefined导致我们对dom节点的操作报错。this.$refs.xxx为undefined的几种情况记录:1、在created里钩子函数中调用原因:created()在实例创建完成后被立即调用。在这一步,实......
  • vue中页面数据改变组件不重新渲染
    页面中引用组件additional-entrust.vue,当界面传的entrustGold值改变时,组件状态不重新渲染代码如下:<divclass="test"><additional-entrust:entrustFlag="entrustFlag":eachIncrease="auctionData.eachIncrease"......
  • 焕然一新!TinyVue 组件库 UI 大升级,更符合现代的审美!
    你好,我是Kagol,个人公众号:前端开源星球。自从TinyVue组件库去年开源以来,一直有小伙伴反馈我们的UI不够美观,风格陈旧,不太满足现阶段审美。“TinyVue给我的感觉就是一个没啥审美能力、但是很努力的老程序员开发的”看到这个评价,我是哭笑不得,一方面对小伙伴们真诚、友好的......
  • vue3组件应用 + 以及组件相关知识应用
    文章目录vue组件化开发一、什么是Vue组件化开发二、组件的创建方式三、组件的数据传递四、组件的生命周期五、组件的插槽(Slot)数据传递的方式实例组件生命周期应用场景插槽应用define相关应用vue组件化开发一、什么是Vue组件化开发概念Vue组件化开发是一种将用......