Python User-CSDN博客

原创 Vue3中深响应和浅响应等composition API 其他部分

在某些特定情况下, 我们可能不希望对数据进行更新的操作, 那就可以包装生成一个只读代理对象来读取数据, 而不能修改或删除。为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的。源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的。创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换。只读代理是深层的：访问的任何嵌套 property 也是只读的。

2023-08-24 18:20:50 368

原创 Vue3 和 Vue2 中通过ref 获取标签的不同

因为调用setup的时候并没有渲染好dom标签，所以定义的时候需要保留 null 选项。ref获取元素：利用ref函数获取组件中的标签元素。功能需求：让输入框自动获取焦点。

2023-08-23 00:23:23 648

原创 Vue3中 toRefs的基本使用

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref；期望：页面上展示 “小明=========…”；实际：页面展示"小明"，myData中name 无法响应。--通过方式一，无法响应-->  </ template > < script lang = " ts " > const myData = reactive({

2023-08-23 00:14:22 381

原创 Vue3 中自定义hook函数

使用Vue3的组合API封装的可复用的功能函数；自定义hook的作用类似于vue2中的mixin技术；自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂；混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。// 定义一个混入对象},methods: {')// 定义一个使用混入对象的组件})

2023-08-22 23:48:56 638 1

原创 Vue3中的声明周期

【代码】Vue3中的声明周期。

2023-08-22 18:37:28 742

原创 Vue3中的计算属性和属性监听

Vue3中可以通过 compute进行监听计算属性，他返回的是一个ref的对象，也就是说通过compuye这种方式计算属性实际上是进行了ref的操作。其中 watch 也可以监听多个数据。

2023-08-22 18:28:22 895

原创 Vue3 数据响应式原理

【代码】Vue3 数据响应式原理。

2023-08-21 22:39:44 634

原创 H5 内嵌 App 混合开发几种常见的交互方式

需要和客户端沟通好ua中某些字段，用来判断是否是安卓还是ios。

2023-08-10 17:05:23 1997

原创 Vue3 中 setup，ref 和 reactive 的理解

const isProxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象。总结：如果操作代理对象，目标对象中的值也会跟着改变，如果想要页面跟着渲染，也是操作代理对象；内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的。// 此时state通过 reactive代理了obj，使其内属性成为响应式的；// state---代理对象，obj---目标对象。作用：定义多个数据的响应式，例如一个对象；/* 定义响应式数据对象 */

2023-08-08 22:40:02 488 1

原创 TypeScript 泛型的概念和基本使用

在定义函数，接口，类的时候不能预先确定使用的数据类型，而是在调用使用这些函数，接口，类的时候才能确定的数据类型；

2023-08-08 17:44:41 1371

原创 TypeScript中 interface 和 type 的区别

interface：可以多次声明，并最终可共同复用；type：再次声明会报错。

2023-08-05 10:59:47 861

原创 TypeScript 接口及其常见使用

作为对象的类型使用，限定或者约束该对象中的属性数据；接口和对象中的属性必须一一对应，否则会报错。

2023-08-01 22:09:46 162

原创 TypeScript 联合类型，类型推断，类型断言

1，变量名；2，值 as 类型；

2023-07-25 22:21:05 723

原创 TypeScript中数组，元组和枚举类型

【代码】TypeScript中数组和元组类型。

2023-07-25 21:37:40 839

原创防止video视频被下载的几种处理办法

拿到blob对象后，再通过URL.createObjectURL生成临时地址，赋值给video标签的src属性，这样就可以了。部分浏览器，如qq浏览器会拦截video标签获取到播放链接，当用户鼠标移如播放器时会出现下载字样，为了解决这一问题，我们采用blob视频流的形式进行加密；还是以B站的一个视频为例，在F12中的Network里可以看到，网站一直在一段一段的请求视频流的数据。试想一下，如果我们把视频切成一段一段的，每次只加载一段，看完了再加载一段，这样能有效的节省资源。)生成blog对象。

2023-07-06 16:25:04 8544

原创拍照测评使用websocket

【代码】拍照测评使用websocket。

2023-07-06 15:05:35 816

原创大文件分割切片上传

切割标准以3-10M为基准单位，获取可以切割的个数进行遍历，使用formData包装好切割的参数去请求数据；每次将分割好的文件给到接口，后端会将其整合起来最终返回回来；

2023-07-06 10:22:42 938

原创后台权限管理

通过后台接口控制页面级的权限，将数据保存在本地并且和路由匹配，左侧tabber 仅展示导航到拥有权限的页面。或者使用路由拦截的方式也可以。超级管理员有所有按钮的权限，普通管理员可能缺少某些按钮的权限，比如编辑和删除等；此时应该先从接口获取该用户拥有的按钮权限，将所有按钮权限整理到一个对象中，再放入缓存；整理后如图，key代表页面，value数组对象代表该页面下所有的按钮权限；仅提供思路，具体做法因个人和业务需求不同而定；思路：使用vue.directive自定义指令，通过指令输入value(按钮权限

2023-07-05 17:02:55 686

原创 css瀑布流自动上顶

【代码】css瀑布流自动上顶。

2023-07-04 14:11:47 148

原创 Vue之 $set的使用

1，什么时候使用$setset为解决双向绑定失效而生，只需要关注什么时候双向绑定失效就可以了。2，Vue.set 和 this.$set this.$set 实例方法，该方法是全局方法 Vue.set 的一个别名3，$set 用法数组：this.$set(Array, index, newValue)对象：this.$set(Object, key, value)4，实例data中未定义，手动给form添加age属性，并且点击按钮进行自增。如果使用 this.form.age

2022-04-21 20:24:38 18910 2

原创 watch 深度监听模式

watch 的深度监听—监听更深层的一些数据。如果是一个对象，则需要进行深度监控，才能监控到对象中属性的变化：data(){ return{ form :{ name:'xxx', age:12 } }}watch:{ // 只监听一个对象 form(){ deep:true, // 开启深度监听 console.log(v.namge,v.age) immediate:true }, // 监听一个对象的某一个属性： 'form.a': {

2022-04-21 19:43:16 836

原创使用Vue获取操作dom

vue一般是通过操作数据来实现界面的更新,通常不会去操作DOM,但实际开发场景总是千奇百怪,会有场景需要获取DOM通过 ref 来获取dom元素建议：vue中尽量不去操作 dom 元素，选用 ref 操作属性获取<button ref="btn">按钮</button><div ref="box"> <h1> ref</h1> <p> 测试</p></div><hr><div

2022-04-21 19:10:36 10943

原创 webpack优化

webpack优化主要从以下几点：1，webpack抽离css2，压缩css代码和 js代码3，html压缩(HtmlWebpackPlugin)4，optimization.splitChunks 提取公共代码5，externals分离第三方库 + CDN加速

2022-04-19 21:38:12 167

原创 Webpack 生产环境性能优化之externals

前言在实际开发中，我们可能会引入一些第三方库，比如说 elementUI。但是在项目打包的时候，webpack会将main.js 中引入的第三方代码进行打包，为了减小js代码的体积，我们又不希望把它打包进我们的项目中，那么我们应该怎么去做呢？webpack 为我们提供了一个叫做 externals 的配置项，这个配置项可以指定我们想要忽略的第三方库，在打包的时候就不会把这些第三方库打包进来。如果使用了 elementUI 但是又没打包进来，那如何获取这些代码呢？其实我们可以在 html 模版中使用 s

2022-04-19 21:36:41 590

原创 webpack抽离公共代码

webpack在进行抽离公共代码的时候分为两种，一种是公共模块，一种是第三方模块；对于公共模块：不需要重复打包，抽离成一个单独的公共模块文件，然后引用即可；对第三方模块：一般不会轻易改变，所以就单独抽离一个第三方模块的文件，引用即可；一般来讲，这种操作会在生产环境做配置...

2022-04-19 21:08:38 1082

原创 v-if 和 v-for 为什么不能连用

v-if 和 v-for 不能连用，否则会造成一个性能浪费！原因：在 Vue2中 v-for的优先级高于 v-if，如果v-if的值为false时，v-for仍然会根据优先级进行渲染，这样就造成了一个资源浪费，如下所示：<template> <div>  <div v-for = "(it, i) in getData" v-key="i" v-if="flag"> </div><

2022-04-19 19:42:18 1161 1

原创 wbpack配置生产-开发环境

在配置开发环境和生产环境的时候先了解一下他们的区别：开发环境：要具有强大的、具有实时重新加载(live reloading)或热模块替换(HMR)能力的 source map 和 devserver proxy。生产环境：需要做更轻量化的操作，css压缩，打包处理以及更优化的资源，以改善加载时间。如此，我们把公共的配置，放到webpack.base.config.js中，生产环境配置放到webpack.prod.config.js中，开发环境配置放到webpack.dev.config.js中

2022-04-19 19:23:32 182

原创 webpack的拆分配置和合并配置

mode表示以什么模式进行打包；使用development模式，打包后的代码可阅读，没被压缩；使用production模式，代码被压缩；const path = require('path');module.exports = { mode:'development', // production 生产环境 entry:{ app: './src/main.js', list: './src/main.js' }, output:{ path.resolve(__dirname,

2022-04-19 16:58:53 609 1

原创 webpack抽离css，压缩css代码和 js代码

前言在实际生产环境中，较少使用style-loader，css代码被打包到了 main.js里面，这时候就需要对css代码进行抽离优化。module.exports = { module:{ rules:[ test: '/\.css$/', use:[ 'style-loader', // 减少使用 'css-loader', 'postcss-loader' ] ] }}抽离代码，压缩css js使用 mini-css-extract-

2022-04-19 16:02:17 3055

原创 webpack中使用devServer实现proxy转发请求 + 启动 HMR 热更新

在遇到无法请求或跨域的情况下可以使用webpack中devServer的proxy代理转发的功能，实际上中间是做了一层转发，之后再通过本地的localhost:8080返回回来。注意，只能在开发环境做转发，因为他是开发环境下的一个服务器devServer:{ proxy:{ '/api':{ target: 'https://xxxxx.com/', // 我们要代理的真实接口地址 changeOrigin: true, // 允许跨域 pathRewrite: {

2022-04-18 23:45:37 1787

原创 webpack中sourceMap的使用

在webpack项目中，有时候打包运行后会出现错误，在浏览器开发者工具却无法准确定位到源代码出错的地方，只有打包代码出错的地方。这个时候可以使用sourceMap工具来做映射，找出源代码出错的地方，SourceMap 的主要作用是为了方便调试module.exports = { mode: 'development', devtool: 'eval-source-map', // devtool: false, // 不想使用的情况下可以使用false}Sourcemap 的种类有很多，

2022-04-18 20:03:50 842

原创 webpack常见的loader及其使用

file-loader对小型图片问价进行配置，配置完后再dist生成一串hash值命名的图片。如果想让生成的图片使用原来的名字，就使用[name].[ext] （name表示原始名称，ext表示原始后缀格式），或可以在名称后添加hash。如果想将图片放置在dist的images文件夹下，就使用 outputPath:‘images/’。const path = require('path');module.exports = { entry:{ main: './src/main.js', }

2022-04-18 19:51:46 617

原创 webpack入口和出口

什么是入口？入口就是开始打包的地方，例如scr下的main.js文件；什么是多入口？多入口就是允许从多个文件开始打包。举个例子：一个项目中有 user 和 admin 两部分，我们希望将这两部分分别进行打包，就可以使用多入口生成不同的文件。什么是出口？出口就是会根据scr底下的mian.js文件为一个入口，然后把这个打包完的结果输出在这个dist文件夹底下。入口和出口在webpack.config.js下配置。1，单入口const path = require('path');module

2022-04-18 15:34:34 1280

原创 Vue中$nextTick的使用

Vue渲染是一个异步的渲染，在做添加的时候，Vue不会马上去做渲染，而是在下一个tick的时候做渲染，这个时候要是尝试获取一些dom元素属性的时候，还是获取的数据改变之前的数值，这样子就会出现慢一拍的情况。为了能准确获取到数据改变之后的情况，这时就可以使用Vue中提供的一个api----$nextTick。主要思路就是采用微任务优先的方式调用nextTick包装的方法。this.$nextTick中的箭头函数(回调函数)，他会在dom异步渲染完毕的时候执行这个箭头函数，如果将之后的操作放在这个箭头函数中

2022-04-18 13:43:35 1503

空空如也

空空如也