2023年6月14日
watch、computed、methods的区别
摘要： 一、计算属性【computed】 对于任何复杂逻辑，你都应当使用计算属性 是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新 默认使用的是getter属性 当一个数据受多个数据影响时，可以使用computed <!-- 复杂运算 --> <div>{{message.split( 阅读全文
posted @ 2023-06-14 10:30 有只小菜猫 阅读(75) 评论(0) 推荐(0)
Vue中的key
摘要： 【key 是为 Vue 中 虚拟节点 的唯一标记，通过这个 key，diff 操作可以更准确、更快速】 （1）第一种情况是 v-if 中使用 key。 由于 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。 因此当使用 v-if 来实现元素切换的时候，如果切换前后含有相同类型的 阅读全文
posted @ 2023-06-14 10:07 有只小菜猫 阅读(318) 评论(0) 推荐(0)
Diff算法
摘要： https://www.cnblogs.com/wind-lanyan/p/9061684.html 阅读全文
posted @ 2023-06-14 10:06 有只小菜猫 阅读(30) 评论(0) 推荐(0)
虚拟DOM和真实DOM
摘要： 一、虚拟DOM 1、概念相关 是一个JavaScript对象，通过对象的方式来表示DOM结构，是对DOM的抽象 以对象的形式来描述真实DOM结构，最终渲染到页面 在每次数据发生变化前，虚拟DOM都会缓存一份，变化之时，现在的虚拟DOM会与缓存的虚拟DOM进 行比较 在vue内部封装了diff算法，通 阅读全文
posted @ 2023-06-14 09:51 有只小菜猫 阅读(516) 评论(0) 推荐(0)
v-model的原理
摘要： 一、底层原理 利用 v-bind 用来绑定value的值 用 v-on 去绑定input标准事件 是事件用来监听当输入域内容发生变化的时候来执行一些事情 具体事件： 通过$event这个事件对象获取到最新的输入域的值 把最新的值赋值给旧的值，进行数据更新。 》双向数据绑定 二、如何实现 （1）作用在 阅读全文
posted @ 2023-06-14 09:32 有只小菜猫 阅读(506) 评论(0) 推荐(0)
2023年6月13日
vue组件之间的数据传递
摘要： 一、组件之间的关系 父子关系、兄弟关系、跨级关系 二、父子之间数据传递 1、父组件向子组件传递【使用 props】 第一步：在父组件中使用子组件时，给子组件绑定属性 第二步：在子组件中使用props接收绑定的属性值 2、子组件向父组件传递【使用 $emit】 第一步：在子组件中通过$emit触发指定 阅读全文
posted @ 2023-06-13 19:57 有只小菜猫 阅读(444) 评论(0) 推荐(0)
vue 的双向绑定原理（vue 的响应式原理）流程
摘要： 一、原理 二、流程 第一步，“数据劫持” vue 2.x 用 Object.defineProperty() 方法来实现数据劫持，为每个属性分配一个 订阅者集合的管理数组 dep vue 3.x 用 ES6 的 Proxy 构造函数来实现数据劫持。 第二步，“添加订阅者” 在编译的时候在该属性的数组 阅读全文
posted @ 2023-06-13 17:36 有只小菜猫 阅读(50) 评论(0) 推荐(0)
单页面SPA与多页面MPA
摘要： 一、区别 二、SPA单页面 阅读全文
posted @ 2023-06-13 17:31 有只小菜猫 阅读(28) 评论(0) 推荐(0)
v-if 和 v-show的区别
摘要： 1.共同点 在 vue 中 v-show 与 v-if 的作用效果是相同的 当表达式都为 false 时，都不会占据页面位置 当表达式结果为 true 时，都会占据页面的位置 2.不同点 阅读全文
posted @ 2023-06-13 17:26 有只小菜猫 阅读(58) 评论(0) 推荐(0)
keep-alive【组件保活机制】
摘要： 1、概念相关 列表页面 ——进入详情页 —— 后退到列表页（缓存列表页的原来数据以及滚动位置） 重新进入列表页面，获取最新的数据 2、实现 3、钩子函数 当组件被激活时，触发钩子函数 activated 当组件被移除时，触发钩子函数 deactivated 阅读全文
posted @ 2023-06-13 17:17 有只小菜猫 阅读(63) 评论(0) 推荐(0)