【Node.js】npm与包【万字教学~超超超详细】

news2024/11/24 11:52:42

✍️ 作者简介: 前端新手学习中。
💂 作者主页: 作者主页查看更多前端教学
🎓 专栏分享:css重难点教学       Node.js教学 从头开始学习

目录

        什么是包

        包的来源

        为什么需要包

        从哪里下载

        如何下载包

 npm初体验

        格式化时间的传统做法

                实现步骤

                 实现代码

         利用包格式化时间

                步骤

                 安装包

                实现代码

        安装包后的相关文件

        安装指定版本的包

        包的语义化版本规范

npm与包

        包管理配置文件

                多人协作的问题 

                 如何记录项目中安装了哪些包

                快速创建package.json

                 dependdencies节点

                一次性安装的所有的包 

                卸载包

                devDependencies节点

        解决下包速度慢问题

                为什么下包速度慢

                淘宝NPM镜像服务器

                切换npm的下包镜像源

                nrm

          包的分类

                项目包

                 全局包

                 i5ting_toc

        规范的包结构

        开发属于自己的包

                需要实现的功能

                 初始化包的基本结构

                 初始化package.json

                 在index.js中定义格式化时间的方法

                在index.js中定义转义html的方法

                在index.js中定义还原HTML的方法

                将不同的功能进行模块化拆分

                 编写包的说明文档

         发布包

                注册npm账号

                在终端登录npm账号 

                 把包发布到npm上

                 删除已发布的包


        什么是包

Node.js中的第三方模块又叫做包,指的是同一种东西,知识叫法不同

        包的来源

不同于Node.js的内置模块与自定义模块,包是由第三方个人或团队开发出来的,免费供所有人使用。

注意:Node.js中的包都是免费且开源的,不需要付费即可免费下载使用。

        为什么需要包

由于Node.js的内置模块仅提供了一些底层的api,导致在基于内置模块进行项目开发的时候,效率很低,包是基于内置模块封装出来的,提供了更高级,更方便的api。极大地提高了开发效率。包和内置模块之间的关系,类似于jquery和浏览器内置api之间的关系。

        从哪里下载

国外有一家IT公司,叫做npm,lnc。这家公司旗下有一个非常著名的网站,全球最大的包共享平台

你可以从这个网站上搜索到任何你需要的包,只要你有足够的耐心!

到目前为止,全球约有1100万左右的开发人员,通过这个包共享平台,开发并共享了超过120多万个包供我们使用。 

npm,lnc公司提供了一个地址为https://registry.npmjs.org/服务器,来对外共享所有的包,我们可以从这个服务器上下载自己所需要的包。

        如何下载包

npm,lnc公司提供了一个包管理工具,我么可以使用这个包管理工具,从https://registry.npmjs.org/服务器上吧所需要的包下载到本地使用。

这个包管理工具的名字叫做Node Package Manager (简称npm),这个包管理工具随着Node.js的安装包一起被安装到了用户的电脑上,

大家可以在终端中 执行npm -v命令,来查看自己电脑上所安装的npm包管理工具的版本号。

 npm初体验

        格式化时间的传统做法

                实现步骤

  1. 创建格式化事件的自定义模块
  2. 自定格式化时间的方法
  3. 创建补零函数
  4. 从自定义模块中导出格式化时间的函数
  5. 导入格式化时间的自定义模块
  6. 调用格式化时间的函数

                 实现代码

自定义时间格式化模块

//定义格式化时间的方法
function dataFormat(data) {
    //接受字符串创建对象
    const dt = new Date(data);
    //年
    const Y = dt.getFullYear();
    //月
    const m = format(dt.getMonth() + 1);
    //日
    const d = format(dt.getDay());
    //时
    const hh = format(dt.getHours());
    //分
    const mm = format(dt.getMinutes());
    //秒
    const ss = format(dt.getSeconds());
    return `${Y}-${m}-${d} ${hh}:${mm}:${ss}`;

}
//补零操作
function format(data) {
    return data > 9 ? data : '0' + data;
}
//暴露对象
module.exports = { dataFormat };

       大家注意曝光这里要用module.exports,因为这里引用了新的对象,或者修改引用对象添加属性,可以使用exports。

exports.dataFormat = dataFormat;

         使用模块

//导入模块
const data = require('./自定义模块/格式化时间模块.js');
//创建未格式化对象
let olddata = new Date();
console.log(olddata);
//调用格式化模块
let newdata = data.dataFormat(olddata)
console.log(newdata);

         利用包格式化时间

                步骤

  1. 使用npm包管理工具,在项目中安装格式化时间的包 moment
  2. 使用require()导入包
  3. 参考moment的官方api文档学习了解使用方法

                 安装包

在当前终端中输入

npm install moment

npm 包管理工具

install  安装 可简写成 i

moment  包名称

下载包之后 可以在上面提到的网站内搜索moment 查看api文档学习使用方法,网站是英文的,也可以在csdn内进行搜索一般也可以找到教学文章。

                实现代码

//导入包
const moment = require('moment');
//格式化事件
//单词要大写
const newdate = moment().format('YYYY-MM-DD HH:MM:SS');
console.log(newdate);

        安装包后的相关文件

初次安装包完成后,在项目文件夹下会多三个文件,一个叫做node_modules的文件夹和package-lock.json的配置文件另一个是package.json。

其中

node_modules文件夹用来存放所有已安装到项目中的包,require()导入第三方包时,就是从这个目录中查找并加载的包,

package-lock.json配置文件用来记录node_modules目录下的每一个包的下载信息,例如包的名字信息,版本号等。

注意:不需要修改两个文件中的任何东西,npm包会自动维护。

        安装指定版本的包

默认情况下,使用npm i命令安装包的时候,会自动安装最新版本的包。如果需要安装指定版本的包,可以在包名之后,通过@符号指定具体的版本。

npm i moment @ 1.1.12

        包的语义化版本规范

包的版本号是以‘点分十进制’形式进行定义的,总共有三位数字,例如:2.24.0

期中没一位数字所代表的含义如下

第一位数字:大版本

第二位数字:功能版本

第三位数字:bug修复版本

版本号提升的规则:只要前面的版本号增长了,则后面的版本号归零。

npm与包

        包管理配置文件

npm规定,在项目跟目录中,必须提供一个叫做package.json的包管理配置文件,用来记录与项目有关的一些配置信息,例如:

  • 项目的名称,版本号概述等
  • 项目中都用到了哪些包
  • 哪些包只在开发期间会用到
  • 哪些包在开发和部署时都需要用到

                多人协作的问题 

                 如何记录项目中安装了哪些包

在项目根目录中,创建一个叫做package.json的配置文件,即可用来记录项目中安装了哪些包,从而方便剔除node_modules目录之后,在团队成员之间共享代码。

注意:今后在项目开发中,一定要把node_modules文件夹,添加到gitignore忽略文件中

                快速创建package.json

npm包管理工具提供了一个快捷命令,可以在执行命令时所处的目录中,快速创建package.json这个包管理配置文件,在我们安装第三方包的时候 如果没有package.json也会自动生成一个(里面只有安装的包的信息)。

npm init -y

注意:上述命令只能在英文的目录下成功运行,所以需要保证项目文件所处的父级目录要是英文名。

建议 建立文件夹后 就执行此命令先创建一个package.son。

安装包的时候  会自动将相关信息写入package.json文件中。

                 dependdencies节点

package.json文件中,有一个dependencies节点,专门用来记录您使用npm i命令安装了哪些包

 

                一次性安装的所有的包 

当我们拿到一个提出了node_modules的项目之后,启动项目会报错,提示没有所需要的包,苏一在启动项目之前。我们应该安装所有需要的包,package.jaon中记录的包,然后才能运行起来。

npm  install

我们只需要执行这个命令,执行这个命令后,会读取package.json中所有以来的包,并下载。

                卸载包

npm uninstall  包名

这个是不能简写的,卸载之后 也会将包名从 package.json文件中删除,

                devDependencies节点

如果某些包只在项目开发阶段会用到,在项目上线之后不会用到,则建议把这些包记录到devDependencies节点中,

如果某些包在开发和项目上线都需要用到,则建议把这些包记录到dependencies节点中。

npm  install   包名 -D

只需要在结尾加个-D就可以将包安装在devDependencies中    

        解决下包速度慢问题

                为什么下包速度慢

在使用npm下包的时候,默认从国外的https://registry.npmjs.org/服务器进行下载,此时,网络数据的传输需要经过漫长的海底光缆,因此下包速度回很慢。

                淘宝NPM镜像服务器

淘宝在国内搭建了一个服务器,专门把国外服务器的包同步到国内的服务器,然后我们可以再从国内的服务器上下载包,这样就可以大大提高包的下载速度。

镜像:是一种文件存储形式,一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本即为镜像。

                切换npm的下包镜像源

查看当前下包的服务器地址

npm config get registry

 切换淘宝服务器

npm config set registry=https://registry:npm:taobao.org/

                nrm

为了更方便的切换下包的镜像包,我们可以安装nrm这个小工具,利用nrm提供的终端命令,可以快速查看和切换下包的镜像源。

npm i nrm -g

-g全局下载,

查看所有可用的镜像源

nrm ls

 

nrm use taobao

 

          包的分类

                项目包

那些被安装到项目的node_modules目录中的包,都是项目包。

项目包分为两类,分别是:

  • 开发依赖包(被记录到devDependendes节点中的包,只在开发期间使用)
  • 核心依赖包(被记录到dependencies节点中的包,在开发期间和项目上线之后都会用到)

                 全局包

在执行npm install 命令时,如果提供-g参数,则会把包安装为全局包。

全局包安装包查看位置命令

npm config ls

 

 注意: 只有工具性质的包 才有全局安装的必要性。

                 i5ting_toc

作为程序员,md文档的编写往往是必要的,md文档编写简易快捷,是不二的笔记语言。

这是一个可以把md文档转为html页面的小工具,这种工具性质的包 就是有必要全卷装的,便于我们日后使用。

安装

npm i  i5ting_toc -g

使用

i5ting_toc -f 文件路径 -o

        规范的包结构

在清楚了包的概念,以及如何下载和使用包之后,接下来我们深入了解一下包的内部结构

一个规范的包,它的组成结构,必须符合以下三点要求

  1. 包必须以单独的目录而存在
  2. 包的顶级目录下要必须包含package.json这个配置文件
  3. package.json中必须包含name,version,main这三个属性,分别代表包的名字,版本号,包的入口。

        开发属于自己的包

                需要实现的功能

  1. 格式化日期
  2. 转义HTML中的特殊字符
  3. 还原HTML中的特殊字符

                 初始化包的基本结构

  1. 新建itheima-tools文件夹,作为包的根目录
  2. 在itheima-tools文件夹中,新建如下三个文件
  • package.json  包管理配置文件
  • index.js 包入口文件
  • README.md  包的说明文档 

                 初始化package.json

{
    "name": "itheima-tools-xiepu",
    "version": "1.0.0",
    "main": "index.js",
    "description": "提供了格式化时间。转义功能",
    "keywords": ["xiepu","tools","format"],
    "license": "ISC"
}
  • name  制作的npm包的名称  之后导入包 搜索包 都是这个名字 这个名字不可重复 建议命名之前现在npm网站内搜索一下是否重名
  • version 版本号
  • main 主文件路径 到我们使用导入这个包的时候。就会自动执行这个js里面的内容
  • description  这是对包的描述
  • keywords  包的关键字 在网站内搜索时的关键字
  • license 遵循的开源许可协议

                 在index.js中定义格式化时间的方法

可以直接粘贴我们之前写的自定义包函数

//定义格式化时间的方法
function dataFormat(data) {
    //接受字符串创建对象
    const dt = new Date(data);
    //年
    const Y = dt.getFullYear();
    //月
    const m = format(dt.getMonth() + 1);
    //日
    const d = format(dt.getDay());
    //时
    const hh = format(dt.getHours());
    //分
    const mm = format(dt.getMinutes());
    //秒
    const ss = format(dt.getSeconds());
    return `${Y}-${m}-${d} ${hh}:${mm}:${ss}`;

}
//补零操作
function format(data) {
    return data > 9 ? data : '0' + data;
}
//暴露对象
exports.dataFormat = dataFormat;

                在index.js中定义转义html的方法

//定义转义字符函数
function htmlstr(hstr) {
    return hstr.replace(/<|>|"|&/g, data => {
        switch (data) {
            case '<':

                return '&lt;';

            case '>':
                return '&gt;';
            case '"':
                return '&quot;';
            case '&':
                return '&amp;';
        }
    })
}
//暴露对象
exports.htmlstr = htmlstr;

                在index.js中定义还原HTML的方法

function htmlstr1(hstr) {
    return hstr.replace(/&lt;|&gt;|&quot;|&amp;/g, data => {
        switch (data) {
            case '&lt;':

                return '<';

            case '&gt;':
                return '>';
            case '&quot;':
                return '"';
            case '&amp;':
                return '&';
        }
    })
}
//暴露对象
exports.htmlstr1 = htmlstr1;

                将不同的功能进行模块化拆分

  1. 将格式化时间的功能,拆分到src dataFormat.js中
  2. 将处理html字符串的功能,拆分到src htmlstr.js中
  3. 在index.js中,导入两个模块,得到需要向外共享的方法
  4. 在index.js中,使用module.exports把对应的方法共享出去

 将格式化时间,和字符串转义各自分别放到独立的js中(创立一个src文件夹),并进行暴露。 

 

然后在主页index.js中,进行导入和曝光。

const htmlstr = require('./src/htmlstr');
const dataFormat = require('./src/dataFormat');



module.exports = {
    htmlstr,
    dataFormat
}

调用测试

const itheima = require('../itheima-tools');

console.log(itheima.dataFormat.dataFormat(new Date()));
const str = '<h1>232</h1>';
console.log(itheima.htmlstr.htmlstr(str));
console.log(itheima.htmlstr.htmlstr1(str));

 详细说一下这里,我们首先调用的index.js这个模块,可以看到导入只写了文件夹没写index.js,这种写法同样也可以导入index.js,它会去寻找package.json里的main属性,所以会导入index.js,导入index.js之后,我们又从index.js中导入了另外两个转义和格式化时间模块,所以在使用属性时

是这样一个过程 itheima这个模块里的htmlstr模块里的htmlstr属性。

那么可不可以不写的那么复杂? 

答案是可以的  我们只要在itheima这个模块里 直接曝光出所有属性就好,这里我们可以在itheima模块中使用es6的展开属性...直接将相关内容曝光在对象内。

index.js

const htmlstr = require('./src/htmlstr');
const dataFormat = require('./src/dataFormat');



module.exports = {
    ...htmlstr,
    ...dataFormat
}

ceshi.js

const itheima = require('../itheima-tools');

console.log(itheima.dataFormat(new Date()));
const str = '<h1>232</h1>';
console.log(itheima.htmlstr(str));
console.log(itheima.htmlstr1(str));

                 编写包的说明文档

说明文档内容没有强制性要求,只要能清晰的包的作用,注意点写好就可以,书写内容大致有以下六点

  1. 安装方式
  2. 导入方式
  3. 格式化时间
  4. 转义html中的特殊字符
  5. 还原html中的特殊字符
  6. 开源协议

 大家可以去学习一下markdown文档编写的语法 并不难

## 安装
```
npm install itheima-tools-xiaoxie
```
## 导入
```
const name = require ('itheima-tools-xiaoxie')
```
## 格式化时间
```
console.log(itheima.dataFormat(new Date()));

```
## 转义html字符
```
const str = '<h1>232</h1>';
这里输入内容
console.log(itheima.htmlstr(str));
```
## 还原html字符
```
const str = '<h1>232</h1>';
这里输入内容
console.log(itheima.htmlstr1(str));
```
```
文件里 有ceshi.js文件 可以在里面进行测试
```
## 开源协议
```
ISC
```

 

         发布包

                注册npm账号

  1. 登录npm网站,点击 sign up按钮,进入注册用户界面
  2. 填写账户相关的信息,Full Name , Public Email,  Username,  Password
  3. 点击Create an Account按钮,注册账号

                在终端登录npm账号 

npm账号注册完成后,可以在终端中执行npm login命令,依次输入用户名,密码,邮箱后,即可登录成功。

注意:在登录npm包,发布包之前要将下载地址修改为npm官网地址,否则发布包会失败。

nrm use npm

登录

根据提示依次输入账号 密码 邮箱 验证码 

会显示已登录 后面显示网站名称

可以看到 我们登录到了官网上面

                 把包发布到npm上

将终端切换到 包的根目录 运行npm publish命令,就可以将包发不到npm上(注意 包不可以重名)

 发布成功  

打开网站  将账号登入 鼠标移动到头像  点击packages  就可以看到我们发布的内容

                 删除已发布的包

运行 这个命令就可以将npm上面的包删除掉

npm unpublish 包名--force 

注意:通过此命令只可以删除发布72小时内的包

删除的包 24小时内不可以重复发布

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2159.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Win11系统C++将ONNX转换为engineer文件,TensorRT加速推理

准确工作&#xff0c;安装配置好CUDA,cudnn&#xff0c;vs2019&#xff0c;TensorRT 可以参考我博客&#xff08;下面博客有CUDA11.2,CUDNN11.2&#xff0c;vs2019&#xff0c;TensorRT配置方法&#xff09; (70条消息) WIN11CUAD11.2vs2019tensorTR8.6Yolov3/4/5模型加速_Ve…

【JavaDS】HashMap与HashSet的底层原理

✨博客主页: 心荣~ ✨系列专栏:【Java实现数据结构】 ✨一句短话: 难在坚持,贵在坚持,成在坚持! 文章目录一. HashMap底层原理1. HashMap的属性2. HashMap的构造方法3. 给HashMap分配内存的时机4. HashMap中的put5. HashMap中的哈希函数6. HashMap的扩容机制二. HashSet的底层原…

【资损】业务产品分析资损防控规范

&#x1f4eb;作者简介&#xff1a;小明java问道之路&#xff0c;专注于研究 Java/ Liunx内核/ C及汇编/计算机底层原理/源码&#xff0c;就职于大型金融公司后端高级工程师&#xff0c;擅长交易领域的高安全/可用/并发/性能的架构设计与演进、系统优化与稳定性建设。 &#x1…

读书 | 设计模式之禅 - 责任链模式

文章目录1. 实现古代妇女的“三从”制度2. 实现古代妇女的“三从”制度-优化3. 责任链模式的定义1. 实现古代妇女的“三从”制度 一位女性在结婚之前要听从于父亲&#xff0c;结婚之后要听从于丈夫&#xff0c;如果丈夫死了还要听从于儿子。作为父亲、丈夫或儿子&#xff0c;只…

Spring-day01 spring全家桶,如何学习框架,单元测试

Spring学习-概述 1. spring全家桶&#xff1a;spring &#xff0c; springmvc &#xff0c;spring boot , spring cloud spring: 出现是在2002左右&#xff0c;解决企业开发的难度。减轻对项目模块之间的管理&#xff0c; 类和类之间的管理&#xff0c; 帮助开发人员创建对象&a…

Linux:iptables和firewalld基础j解析

目录 1、四表五链概念&#xff1a; 2、数据报文流程 3、iptables 与 firewalld 区别 4、DROP 和 REJECT策略的区别&#xff1a; 5、iptables命令参数 6、iptables基本的命令使用 7.firewalld&#xff1a;基于CLI&#xff08;命令行界面&#xff09;和基于GUI&#xff08;图…

多线程wait()和notify()方法详解

多线程wait()和notify()方法详解 文章目录多线程wait()和notify()方法详解前言一、线程间等待与唤醒机制二、等待方法wait()三、唤醒方法notify()四、关于wait和notify内部等待问题&#xff08;重要&#xff09;五、完整代码&#xff08;仅供测试用&#xff09;六、wait和sleep…

docker实战学习2022版本(六)之Dockerfile整合微服务实战

需求&#xff1a;通过idea新建一个普通微服务模块&#xff1b;然后通过Dockerfile发布微服务部署到docker容器 step1&#xff1a;新建一个springboot项目&#xff0c;添加依赖 <dependencies><!--SpringBoot通用依赖模块--><dependency><groupId>org.…

Clickhouse与Doris的区别

Doris使用较为简单&#xff0c;join功能更强大&#xff0c;运维更简单&#xff0c;灵活的扩容缩容&#xff0c;分布式更强&#xff0c;支持事务和幂等性导数 Clickhouse性能更佳&#xff0c;导入性能和单表查询性能更好&#xff0c;同时可靠性更好&#xff0c;支持非常多的表引…

谈一谈AI对人工的取代

文章目录AI绘画现在达到了什么水平&#xff1f;易用性怎么样&#xff1f;**缘起&#xff1a;2015年 用文字画画****2021年 Dalle 与 开源社区的程序员们****openAI与它并不open的Dalle****AI开源社区****Dream by [wombo](https://www.zhihu.com/search?qwombo&search_sou…

内农大《嵌入式基础》实验二 C语言进阶和Makefile

一、 实验目的 利用多文件编程&#xff0c;掌握Linux环境下C程序的编辑、编译、运行等操作。掌握Makefile文件的编写、变量及隐式规则和模式规则的应用。掌握Linux环境下main函数的参数。掌握各类指针的应用。 二、 实验任务与要求 根据实验要求编写C语言程序&#xff1b;写…

LiteIDE主题定制教程【续】

摘要&#xff1a;本篇文章是LiteIDE主题定制教程的续作&#xff0c;之所以会有这篇续作&#xff0c;是因为在写完那篇文章之后&#xff0c;我在使用过程中陆续发现了一些问题&#xff0c;以及一些可以优化的地方&#xff0c;我将这些内容作为补充放到这篇文章里。所有更新都已同…

<Linux系统复习>文件系统的理解

一、本章重点 1、磁盘的物理结构 2、磁盘文件如何存储&#xff1f; 3、目录的理解 4、创建一个文件做了什么&#xff1f; 5、删除一个文件做了什么&#xff1f; 6、软连接 7、硬链接 01 磁盘的物理结构 磁盘是硬件结构唯一的机械设备&#xff0c;它通过磁头来进行磁盘的读写&am…

LabVIEW前面板上的字体大小取决于操作系统

LabVIEW前面板上的字体大小取决于操作系统 创建了一个VI&#xff0c;其前面板使用了多个标签和文本。我发现Windows 7系统上的字体大小与Windows 10系统上的字体大小不同。这导致我的前面板看起来不像我希望在计算机上看到的那模样。如何使字体在所有Windows操作系统上变得相同…

【Linux_】权限

【Linux_】权限 心有所向&#xff0c;日复一日&#xff0c;必有精进专栏&#xff1a;《Linux_》作者&#xff1a;沂沐沐目录 【Linux_】权限 前言 Linux权限的概念&#xff08;是什么&#xff09;&#xff1f; 什么是权限&#xff1f; Linux权限管理 文件访问者的分类&am…

npm包学习

想开发自己的的工具包&#xff0c;那必然要借鉴一些常用的npm包来帮我们解决一些问题&#xff0c;下面就罗列一些在学习vue-cli实现原理时候遇到的一些依赖包吧。 1、chalk 用途&#xff1a;可以修改终端输出字符的颜色&#xff0c;类似css的color属性&#xff0c;npm地址&am…

100天精通Python(数据分析篇)——第62天:pandas常用统计方法与案例

文章目录每篇前言一、常用统计方法与案例1. 求和&#xff08;sum&#xff09;2. 求平均值&#xff08;mean&#xff09;3. 求最小值&#xff08;min&#xff09;4. 求最大值&#xff08;max&#xff09;5. 求中位数&#xff08;median&#xff09;6. 求众数&#xff08;mode&am…

jQuery网页开发案例:jQuery 其他方法--jQuery 拷贝对象,多库共存,jQuery 插件

jQuery 对象拷贝 如果想要把某个对象拷贝&#xff08;合并&#xff09; 给另外一个对象使用&#xff0c;此时可以使用 $.extend() 方法 语法&#xff1a; $.extend([deep], target, object1, [objectN]) 1. deep: 如果设为true 为深拷贝&#xff0c; 默认为false 浅拷贝 …

做减法才是真本事,别以为你很能学,做加法一点都不难

文章目录 顶级的高手才敢做减法 前言 一、做减法才是真本事 二、大数据梦想联盟活动开启 顶级的高手才敢做减法 前言 大多数人不懂&#xff0c;不会&#xff0c;不做&#xff0c;才是你的机会&#xff0c;你得行动&#xff0c;不能畏首畏尾 大数据等于趋势&#xff0c;一…

Vue中computed和watch区别

前言 vue中的computed和watch我们经常会用到&#xff0c;那么在什么场景下使用computed和watch&#xff0c;两者又有什么区别呢&#xff0c;傻傻分不清楚。记录一下&#xff0c;温故而知新&#xff01; computed computed是计算属性&#xff0c;基于data中声明过或者父组件传递…