![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 64
窗燃烟逝
这个作者很懒,什么都没留下…
展开
-
Mac Vue 项目上传到阿里云服务器及 nginx
本以为很简单, 结果熬了大夜花十小时弄完, 希望能给大家带来帮助少走弯路笔者环境: Mac + 云服务器 php 环境 + Vue 项目 + nginx若未购买服务器, 请看另一篇。原创 2022-09-18 20:33:06 · 894 阅读 · 0 评论 -
v-model 简单理解
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u8yCwCSr-1659972316717)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/33608b6b986d4f18932d198e5b9bfc08~tplv-k3u1fbpfcp-zoom-1.image)]可以。父组件将searchText变量传入custom-input 组件,使用的 prop 名为value;...原创 2022-08-08 23:25:31 · 617 阅读 · 0 评论 -
vue 中的 key
diff 算法需要比对虚拟 dom 的修改,然后异步的渲染到页面中,当出现大量相同的标签时,vnode 会首先判断 key 和标签名是否一致,如果一致再去判断子节点一致,使用 key 可以帮助 diff 算法提升判断的速度,在页面重新渲染时更快消耗更少相关代码如下diff 算法详解 传送门详细资料可以参考: 《Vue 面试中,经常会被问到的面试题 Vue 知识点整理》 《Vue2.0 v-for 中 :key 到底有什么用?》 《vue 中 key 的作用》使用 index 作为 key和没写基本上没区原创 2022-08-08 23:21:44 · 1675 阅读 · 0 评论 -
如何保存页面的当前的状态
比如从 B 组件跳转到 A 组件的时候,A 组件需要更新自身的状态。但是如果从别的组件跳转到 B 组件的时候,实际上是希望 B 组件重新渲染的,也就是不要从 Storage 中读取信息。所以需要在 Storage 中的状态加入一个 flag 属性,用来控制 A 组件是否读取 Storage 中的状态。在这里面需要注意的是组件更新状态的时机。除此之外,在Vue中,还可以是用keep-alive来缓存页面,当组件在keep-alive内被切换时组件的。要切换的组件作为子组件全屏渲染,父组件中正常储存页面状态。.原创 2022-08-07 23:52:32 · 1058 阅读 · 0 评论 -
基础了解虚拟 DOM
通过事务处理机制,将多次DOM修改的结果一次性的更新到页面上,从而有效的减少页面渲染的次数,减少修改DOM的重绘重排次数,提高渲染性能。另外现代前端框架的一个基本要求就是无须手动操作DOM,一方面是因为手动操作DOM无法保证程序性能,多人协作的项目中如果review不严格,可能会有开发者写出性能较低的代码,另一方面更重要的是省略手动DOM操作可以大大提高开发效率。Virtual DOM的更新DOM的准备工作耗费更多的时间,也就是JS层面,相比于更多的DOM操作它的消费是极其便宜的。...原创 2022-08-07 23:49:26 · 157 阅读 · 0 评论 -
Vue3 中的 Composition API
在 Vue2 中,代码是 Options API 风格的,也就是通过填充 (option) data、methods、computed 等属性来完成一个 Vue 组件。这种风格使得 Vue 相对于 React极为容易上手,同时也造成了几个问题:于是在 Vue3 中,舍弃了 Options API,转而投向 Composition API。Composition API 本质上是将 Options API 背后的机制暴露给用户直接使用,这样用户就拥有了更多的灵活性,也使得 Vue3 更适合于 TypeScri原创 2022-08-06 23:43:56 · 452 阅读 · 0 评论 -
基础理解 Vuex
Vuex 是一个专为 Vue.js 开发的全局状态管理系统。每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。用于多个组件中数据共享、数据缓存等。(无法持久化、内部核心原理是通过创造一个全局实例 new Vue)Vuex为Vue Components建立起了一个完整的生态圈,包括开发中的API调用一环。...原创 2022-08-06 23:42:26 · 96 阅读 · 0 评论 -
$nextTick 原理及作用
nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现,本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列。nextTick 是典型的将底层 JavaScript 执行原理应用到具体案例中的示例,引入异步更新队列机制的原因∶。由于Vue的DOM操作是异步的,所以,在上面的情况中,就要将DOM2获取数据的操作写在。...原创 2022-08-05 23:44:45 · 1061 阅读 · 0 评论 -
defineProperty 和 proxy 的区别
Object.defineProperty 函数一共有三个参数,第一个参数是需要定义属性的对象,第二个参数是需要定义的属性,第三个是该属性描述符。一个属性的描述符有四个属性,分别是 value 属性的值,writable 属性是否可写,enumerable 属性是否可枚举,configurable 属性是否可配置修改。整体思路是数据劫持 + 观察者模式。...原创 2022-08-05 23:33:56 · 3100 阅读 · 0 评论 -
Vue 组件的参数传递方式
父组件通过 refs组件名来获得子组件,子组件通过refs 组件名来获得子组件,子组件通过 refs组件名来获得子组件,子组件通过parent 获得父组件,这样也可以实现通信。第一种是使用 eventBus 事件总线的方法,它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象,通信的组件引入这个实例,通信的组件通过在这个实例上监听和触发事件,来实现消息的传递。使用 eventBus ,其实就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。(1)父子组件间通信。(2)兄弟组件间通信。.原创 2022-08-04 23:48:15 · 970 阅读 · 0 评论 -
Vue 的生命周期
5)beforeUpdate 钩子函数,在响应式数据更新时触发,发生在虚拟 DOM 重新渲染和打补丁之前,这个时候我们可以对可能会被移除的元素做一些操作,比如移除事件监听器。(8)destroyed 钩子函数,在实例销毁之后调用,调用后,Vue 实例中的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。Vue 一共有8个生命阶段,分别是创建前、创建后、加载前、加载后、更新前、更新后、销毁前和销毁后,每个阶段对应了一个生命周期的钩子函数。钩子函数,在组件被挂载到页面之前触发。...原创 2022-08-04 23:46:54 · 237 阅读 · 1 评论 -
Vue3 如何写 Vue2 render: (h) => h(“router-view“)
代码】Vue3如何写Vue2render(h)=>h(“router-view“)转载 2022-07-31 20:59:21 · 997 阅读 · 0 评论 -
Vue 使用 less-loader 6.X 的javascriptEnabled 报错解决
这是因为6.0之后javascriptEnabled属性被放在lessOptions中,所以需如下代码设置。less-loader6.0.0之前如需开启javascriptEnabled需进行如下配置。原创 2022-07-31 20:20:42 · 1125 阅读 · 0 评论