seetoyou的博客

vue3项目实战。

一般有业务的组件之类的方法和状态中，可以使用自定义hooks。一般通用逻辑中，也用的自定义hooks。src/useAutoImport.js 定义自定义hooksimport * as vue from 'vue' //直接导入vue中全部的api，方便后面使用vue中的东西可以不用再导入。import {// 二次处理一些事情，直接拿到想要的结果。防止重复进行操作。

pinia 和 vuex4 的区别@vue/cli和vite的区别@vue/cliwebpackvite脚手架ESModule模块vite脚手架IE低版本浏览器vitewebpackvitelessvite不是用webpackwebpackrollup打包快rollup的生态webpackVue3 和 Vue2 的区别Vue3DOM-diff算法Vue21.3~2倍diff算法Vue2数据劫持不兼容IE浏览器vue2响应式原理vue3响应式原理使用Proxy基于Proxyget/set劫持has。

md5特点?不是加密算法，摘要算法。内容不同摘要的结果不同如果内容发生一点变化就会发生翻天覆地的变化 ， 雪崩效应生成长度一致相同的内容生成的结果一直不可逆。

而我们项目中，有一些配置相关的代码是在node环境下跑的，一般我们需要让这些在node环境下跑的代码后缀写成cjs，以便区分项目中的代码是跑在ESModule还是node。src/installVant.js 配置一些不能直接按需导入的全局属性及全局方法，以插件的形式来写，让相关功能的代码更统一在一起。.eslintrc.cjs 配置让项目环境支持node的CommonJS规范及浏览器的ES6Module规范。把css文件中的px单位转成rem，具体转换比例看postcss.config.cjs。

立即注册微信小程序前往注册首页小程序发布流程小程序开发与管理开发设置开发开发管理开发设置小程序。

day-114-one-hundred-and-fourteen-20230717-常见面试题-todoList-封装服务相关的组件-vue3生态-vue-router-pinia常见面试题vue2模版编译vue3模版编译对于一些导入的模块，可以在npm 官网、 github官网找到模块查看原理。v-if与v-forvue2模板编译网站vue3模板编译网站查看一些第三方插件，可以通过npm或github来进行查找。v-if 和 v-for的优先级问题vue2 肯定是v-f

提供⾃定义渲染器，可以在⾮DOM环境中使⽤Vue的运⾏时。虚拟dom的优点？平时我们一般并不需要使用这个api，只是为了扩展渲染能力才会使用，如用vue写微信小程序之类的需求。这个api主要就是可以自定义渲染方式。说明：vue2中没createRenderer的写法。vue3中有createRenderer自定义浏览器的写法。v-bind绑定样式CSS变量在css中使⽤v-bind绑定样式具有scoped属性的style标签中新加的选择器在scoped中自定义深度选择、插槽、

day-112-one-hundred-and-twelve-20230714-DOM-diff算法-构建工具-包管理工具-Vite基本使用-Vue3新特性DOM-diff算法vue2中diff算法同级比对，跨级比对性能差。而且采用的方式是递归比对，更差一点。根节点只能有一个，比对的时候会从根节点进行比对，先判断两个根节点是否是同一个节点。如果不是同一个节点则直接将老节点删除掉，换成新节点。根据标签名、key。isSameVnode()这个方法来判断是否是相同的同一个节点。如果两个节

登录时拿到用户所有的权限标识列表并保存到vuex中。在自定义指令的inserted阶段中，用用户调用该全局自定义指令时传入的权限标识比对用户所有权限标识列表，如果不存在，就移除该DOM。在需要使用权限标识的标签上，使用该全局自定义指令，并传入一个对应这个标签的权限标识。登录时拿到用户所有的权限标识列表并保存到vuex中。在自定义指令的inserted阶段中，用用户调用该全局自定义指令时传入的权限标识比对用户所有权限标识列表，如果不存在，就移除该DOM。

/图片上传 /* // https://iot.fastbee.cn/prod-api/iot/tool/uploadAuthorization 需要传递Token请求主体file:文件对象返回值：code: 200msg: "操作成功"/* 暴露API */ const API = {<script>data() {return {},methods: {//限制大小；this.$message.warning("上传的图片不能超过1000kb");

如果是一个弹框，在同一个组件中，可以给弹框中存储一个公共状态对象，之后通过那个对象中的数据来修改。如果是另一个路由页面，那么将使用如问号传参或params传参或路径传参这类路由传参将当前项的id传递到另一个路由地址中，而另一个路由地址再通过id查询到当前表单的信息。

fang/f20230708/ManageSystem/src/layout/HeaderLayout.vue 做数据强制更新。fang/f20230708/ManageSystem/src/api/iot.js 仅本地做缓存。

【代码】20230707----重返学习-物美管理系统-登录流程-页面路由跳转-面包屑导航-访问历史列表。

vue全家桶：vue@2 + vuex@3 + vue-vue-router@3。从零开始，基于Vue2全家桶+ElementUI构建一个管理系统类项目。“axios” 发送ajax请求。也可以使用fetch。“xlsx” 处理Excel表格的上传、下载、解析等。“vuex-persist” vuex的持久化存储。开发依赖：--------------Word/PDF 解析的插件。设置页面的title。

day-105-one-hundred-and-five-20230704–SPA单页面应用-vue-router-路由的配置vue-router常见面试题面试题：说说你对 SPA 单页面的理解，它的优缺点分别是什么？面试题：介绍一下路由的两种实现模式：hash模式 和 history模式面试题：说一下路由跳转的方案及传参方式有哪些？面试题：介绍一下 vue-router 中的导航守卫函数面试题：介绍一下你对vue-router的理解？代码正常但找不到html页面的问题报错信息：C

组件调用：template中标签语法。使用函数的方式去调用。

fang/f20230701/day0701/src/main.js或fang/f20230701/day0701/src/global.js，因为global.js是在入口文件main.js直接引入的，和在入口文件执行代码差不多。fang/f20230701/day0701/src/main.js或fang/f20230701/day0701/src/global.js，因为global.js是在入口文件main.js直接引入的，和在入口文件执行代码差不多。在需要用到该按钮的地方直接使用。

如果不想传递东西只想操作实例：在父组件中，可以基于ref($children)获取子组件的实例，这样就可以很方便地去操作子组件实例上的数据和方法了，然后想做什么就做什么。如果需要传递的是一些值/方法：基于属性即可。在代码编译的时候，可以把我们写的px单位的值，按照指定的rem和px和换算比例，自动转换为rem的值！Vue2进阶/VueQQMusic/src/assets/images/loading.gif。Vue2进阶/VueQQMusic/src/assets/images/music.svg。

面试题：自定义指令的玩法和作用在我之前的项目中，有些需求我是基于创建自定义指令完成的。我觉得这也算是一种封装技巧，把一些要实现的功能，封装成为自定义指令，以后基于v-xxx进行调用，用起来也很方便！比如我之前封装过：v-power 实现权限的校验。在自定义指令内部，获取登录者具备的权限标识，根据传递进来的需要判断的标识，验证当前登录者是否具备相应的权限，从而控制元素的渲染和销毁。v-debounce/throttle 实现函数的防抖和节流。

创建，用于设置全局相关的配置。在中，在导入之前先导入。

template>jsx语法OptionsAPI样式私有化方案类组件函数组件UI组件库二次封装vuexvue-router上拉刷新下拉加载超长列表登录权限管理模型。

Vue是渐进式框架Vue2全家桶Vue3全家桶。

安装和使用可选择当前配置项文件目录jsconfig.json文件：不仅给webpack看，而且对vscode编辑器也有用！babel.config.js 这个是babel的配置文件，用于处理js与vue语法的！vue.config.js 这个是vue的配置项。@vue/cli 脚手架，为了美化项目的目录结构，把配置好的webpack规则都隐藏到了 node_modules 中，基于 vue-cli-service 进行管理！如果想查看配置好的规则？

设置跳转拦截，比如在用户没token时，不能进入具体详情页，而是进入登录页进行登录。

如果没有后端接口，可以直接通过浏览器控制台看到别人网站的接口。newbee/newbee/NewPeak//NewPeak/在中修改重启项目，以便让配置生效。在项目中任意地方用/NewPeak/发起一个请求。

看vant官网，发现vue2要用vant2，进入vant2官网。版本 的文档，适用于开发。使用vant2组件选一种使用方式一-自动按需引入组件 (推荐)安装插件在中添加在中导入不过一般在中统一配置，以统一处理并解耦关于vant的组件引入在中引入并让它运行一次方式二-手动按需引入组件在不使用插件的情况下，可以手动引入需要的组件。在具体的某个组件内方式三-导入所有组件Vant支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。在中导入

路由：切换页面，单页面应用上使用的hash模式—锚点。

day-057-fifty-seven-20230425-vue项目-vue自定义指令-vue-cli的配置vue项目vuex版普通版纯axios：切换页面，就会重新发送一次ajax请求普通版升级：vuex版vuex的常用功能vuex 数据通信vuex 缓存数据 前进后退，切换页面，数据都不会重新加载除非刷新或关闭页面重新打开不用vuex版的：切换页面，就会重新发送一次ajax请求能用vuex版的缓存来做的特点不步骤更新的数据，如表格头或用户登录数据之类的vue

安装element-ui引入并使用完整引入在中加入这几行按照文档使用element-ui的组件，直接在vue组件模版中使用就行了按需引入*安装 babel-plugin-component插件在或/.babelrc中配置在/.babelrc中配置这个是vue配置中使用全部安装到时才会使用的。在中配置按需使用先单独引入并设置为全局组件可以在中直接写全局组件式写法-单个普通引入。无链式写法插件式写法-单个普通引入。插件式写法-链式写法。一般单独使用在中写全局组件式写法-单个普通引入。无链式写法。

通过this.$store.commit()使用mutations对象里的同步方法。，里面会让vue使用vuex这个插件，同时初始化一个Vuex实例对象，并导出。，里面会让vue使用vuex这个插件，同时初始化一个Vuex实例对象，并导出。Action 管理异步方法，专门用来调用的Mutation中的同步方法的。Mutation 管理同步方法，专门用来直接修改State中的数据的。中会导入Vuex实例对象，并将其挂载到根Vue实例对象上。中会导入Vuex实例对象，并将其挂载到根Vue实例对象上。

原理[当前组件]通过[props传值方式]把[当前model对应变量值]传给[第三方组件对应props]。[第三方组件]在[第三方组件对应props]变动后，进行如更新[第三方组件内部变量值]相关的事件。[第三方组件]在更新[第三方组件内部变量值]之后，通过触发[第三方组件model更新事件]用[this.$emit]把[第三方组件内部变量值]传给[当前组件]。[当前组件]在[第三方组件model更新事件]被触发后，把[当前model对应变量值]的值变动为[第三方组件内部变量值]。结束这个循环。

原理v-bind="$attrs"继承所有属性和props。v-on="$listeners"继承所有的方法。<template> <div class="div-contents"> <第三方组件名称 v-bind="$attrs" v-on="$listeners" @click="handleClick()"> <slot name="default"> 默认slot的默认值</slot> </

说明为什么要有插槽？是为了方便优雅地在父组件中向子组件传递向子组件传递dom结构。代码处理子组件该子组件的组件名为ChildComponent:<template> <div class="the-box"> <div>子组件开始</div> <div style="border: 1px solid rgb(255, 0, 0)"> <div>插槽1---开始</div>

关于NaNNaN 属性代表一个“不是数字”的number类型的字面量值。这个特殊的值是因为运算不能执行而导致的，不能执行的原因要么是因为其中的运算对象之一非数字。NaN的出现场景:一个表达式中如果有减号(-)、乘号(*) 或 除号(/) 等运算符时，JS引擎会在计算之前试图将运算符两边的变量转化为number类型，如果转化失败，表达式将返回NaN。直接使用 parseInt(), parseFloat()或 Number()将一个非数字的值转化为数字时，表达式返回NaN。NaN的检测判断1.

eval()常见用途1.使用ajax获取到后台返回的json数据时，使用 eval 这个方法将json字符串转换成对象数组let jsonString = JSON.stringify({fang:'方'})const jsonObject = eval('('+jsonString+')')console.log('jsonObject--->',jsonObject)替代eval()方法替代的方法都是不是绝对安全。特别在node里使用的，更不安全。要确保传的代码字符串不会牵扯到一系

在vue项目中使用scss语法的准备步骤个人总结:在项目根目录cmd控制台中使用以下命令行，安装vue项目中使用scss的相关依赖;在["项目根目录/build/webpack.base.conf.js"]中的module下的rules里添加配置：在项目根目录cmd控制台中使用以下命令行：个人总结:在项目根目录cmd控制台中使用以下命令行，安装vue项目中使用scss的相关依赖;$ npm install node-sass --save-dev$ npm install sass-loader@7