- 博客(19)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 原生小程序项目从0到1
"pages/contact/contact": { //分包预下载的页面路径"packages": ["pkgA"], //预下载的分包，可以通过"root"或"name"来指定具体的分包名称"network": "all" //下载的网络模式，可以选择"all"或"wifi"
2023-08-15 10:24:56
94
1
原创 Vue移动端适配 --- px自动转rem
"propList"：需要做转化处理的属性，如'height'、'width'、'margin'等，'*'标识全部。"rootValue"：设计稿宽度的1/10，根据设计稿宽度进行设置，设计稿宽度750px时写75。测量多少px写多少px，无需自己计算rem单位，会自动转换。
2023-08-05 09:45:28
406
1
原创 点击详情页后再点返回，如何做到页面不刷新
3.在列表页通过组件内的路由守卫beforeRouteLeave（离开前）来判断当前页面即将跳转的页面是不是详情页，如果是，就将keepAlive值设为true，如果不是，设为false。2.在需要缓存的页面中配置路由元信息meta，将keepAlive的值设为true。1.在app.vue中使用keep-alive组件对RouterView进行包裹。防止其他页面返回列表页时数据不刷新。
2023-08-04 15:24:21
516
1
原创 自定义指令使用步骤
--> el ---> 表示绑定此自定义指令的元素，是一个元素的 JavaScript 对象。---> componentUpdated(组件VNode及其孩子VNode全部更新)---> binding 是一个对象，包含了指令的相关参数。---> update(组件VNode更新)---> unbind(解绑)钩子函数 ---> bind(指令绑定)---> 定义全局自定义指令（全局注册）---> 定义局部自定义指令（局部注册）参数二 ---> 一个对象，包含相关的。v-xxx="value"传递值。
2023-08-02 09:21:20
93
原创 Vue-router的模式及区别
Hash值改变时，浏览器不会重新加载页面，而是触发hashchange事件，前端路由会根据哈希的变化来更新页面的内容；兼容性较好，可以在不支持HTML5 History API的浏览器中运行；需要配404页面，因为服务器会根据URL路径来返回相应的资源。不需要配404页面，因为哈希值只是本地的片段标识符。URL改变时，浏览器会重新加载页面内容；：URL更加美观，没有哈希部分，可以使用浏览器的前进和后退按钮来导航；Vue-router有两种模式：Hash模式、History模式。
2023-07-27 11:05:56
83
1
原创 导航守卫种类和作用
如果在全局前置守卫中调用next()函数，则路由会继续进行切换；如果调用了next(false)或者不调用next()，则路由切换会被中断。（进入前）beforeRouteEnter：无法通过this访问到组件实例，需要使用一个回调函数来访问到组件实例。（离开前）beforeRouteLeave：用来进行一些确认操作，例如提示用户保存未保存的数据或执行清理操作。（更新前）beforeRouteUpdate：用来响应路由参数的变化，更新组件的数据或执行其他操作。：在每次路由切换前被调用；是在组件级别进行的；
2023-07-27 11:04:51
74
1
原创 对编程式导航的理解
与router.push()类似，但是会替换当前的历史记录，不会生成新的历史记录。适用于一些不需要返回上一页的场景。：通过跳转到新的URL来触发路由切换。可以传递一个字符串路径或一个包含路径、查询参数和哈希值等信息的对象作为参数。在历史记录中向前或向后导航n个步骤，可以使用正数或负数作为参数，例如router.go(-1)表示返回上一页。而不是通过用户的交互行为（如点击链接或按钮）来触发路由的切换。
2023-07-27 11:04:06
129
1
原创 Vue的 diff 算法工作原理及优势
总结：如果新旧虚拟DOM树的同级节点的首位节点相同，则直接比较下一个同级节点，若同级节点的首位节点不同，则使用唯一标识key属性来判断除首位节点的其他节点是否有变化，如果没有，就对比子节点的首位节点重复执行上述步骤。如果新旧虚拟DOM树的同级节点的首位节点相同（例如都是相同类型的元素），Vue会认为这两个节点是相同的，不会继续比较它们的子节点，而是直接比较下一个同级节点。，但使用了唯一的key属性，Vue会通过key来判断哪些节点是新增的、删除的或移动的，从而减少不必要的操作。如果新旧虚拟DOM树的。
2023-07-26 15:06:53
102
1
原创 Vue应用的性能优化
补充：当我们修改了Vue实例中的数据后，Vue会将这些变化缓冲起来，然后异步地更新真正的DOM。通过使用Vue.nextTick()或Vue.$nextTick()方法，将DOM操作推迟到下一个DOM更新循环中，以避免不必要的重渲染。Vue.nextTick()在任意地方使用，Vue.$nextTick()只能在Vue实例内部使用。使用Vue Devtools工具来分析和优化Vue应用的性能，查找潜在的性能瓶颈并进行优化。合理设计组件结构，避免过多的全局组件和过深的组件嵌套，以减少不必要的性能开销。
2023-07-22 15:00:27
144
原创 Vuex是什么？工作原理？使用方法？它解决了哪些问题？
Vuex 提供了强大的开发者工具支持，还支持异步更新，可以帮助我们更轻松地管理应用程序中的状态，并提供方便的状态调试和追踪功能。Vuex 是 Vue.js 官方提供的状态管理库，用于管理应用程序中的共享状态。Vuex 提供了一个集中式的存储机制，使得多个组件可以直接访问和修改共享的状态，(6) 已经定义了状态、变更、动作和读取器,创建一个Vuex实例 store。工作原理：它会监听应用程序中的状态变化，并根据变化来更新相应的组件。当应用程序的状态发生变化时，所有使用该状态的组件都能够自动更新。
2023-07-21 21:43:22
276
1
原创 Vue Router 的概念及使用
在 Vue 应用程序的入口文件中导入 Vue 和 Vue Router并创建一个新的 Vue Router 实例。属性定义路由数组，每个路由对象都包含 path 和 component 之间的映射关系。：使用 npm 或 yarn 在项目目录中安装 Vue Router。Vue Router 是 Vue.js 官方提供的路由管理器。：在路由器实例的配置选项中，定义路由的映射关系。是一个占位符，用于渲染匹配到的路由组件。1.Vue Router的概念。：即在路由配置中指定的组件。
2023-07-21 21:08:07
56
1
原创 vue - 组件间通信
root --------> 将数据存储在根组件中，在子组件中使用$root可以获取到根组件对象，进而就可以使用根组件中的数据。$parent --------> 将数据存储在父组件中，在子组件中使用$parent获取到父组件对象，就可以使用父组件数据。$refs --------> 允许在父组件中获取子组件对象，进而拿到子组件中的数据或者函数等（尽量少用）props --------> 在组件中使用props接收传递的属性数据，在子组件中就可以使用这些数据。2）、事件总线（event-bus）
2023-07-21 17:07:08
36
1
原创 Promsie 和 async/await 的区别和使用
2.对于async/await，我们使用async关键字定义一个异步函数，然后在其内部使用await关键字来等待异步操作的完成，并通过try...catch来处理错误。async/await是基于Promise的语法糖，使用async关键字定义一个异步函数，使用await关键字等待一个Promise对象的执行结果。Promise----------then和catch方法来分别处理异步操作的成功和失败情况。async/await------try...catch块来捕获并处理可能出现的错误。
2023-07-20 19:58:09
32
原创 webpack
webpack 为自动化构建工具，将项目中的文件，打包成静态文件，可以直接运行 html 文件来开启项目，打包后的项目叫做，生产环境。
2023-07-19 16:33:53
25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人