VUE
VUE
monstkl
小白
展开
-
原理篇--数据响应式
一、vue数据响应式,有几个关键的点1、侦测数据的变化2、收集视图依赖了哪些 数据3、数据变化时,自动‘通知’需要更新的视图部分,并进行更新二、vue2.xxx实现数据响应式1、vue通过Object.defineProperty来将对象的属性设置成访问器属性,setter和getter方法来监听数据的变化2、通过getter进行依赖收集3、而每一个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图三、vue2.xxx通过Object.defineProper原创 2020-06-08 23:49:30 · 364 阅读 · 0 评论 -
原理篇---key的作用
一、key的作用是什么?主要是为了更高效的对比虚拟dom(vue中数据更新时,会生成新的虚拟dom,然后比较新旧虚拟dom,有不一样的就更新真实dom)二、原理:vue在执行diff算法比较两个节点是否是相同节点时,会先看key是否相同,再看标签类型等是否相同三、注意:实际开发过程中渲染一组列表时,key必须设置(节省性能),且应该尽量避免使用索引作为key(有的时候列表发生排序),这样容易导致一些隐藏bug...原创 2020-05-27 23:53:07 · 1552 阅读 · 0 评论 -
原理篇---vue事件绑定
一、原生事件和组件事件的绑定原生事件的绑定是通过addEventLister绑定给真实的元素的;组件事件绑定是通过vue自定义的$on实现的。如果要在组件上使用原生事件,需要加.native修饰符,这样就相当于在父组件中把子组件当做普通html标签,然后加上原生事件。二、$on和$emit的实现$on、$emit是基于订阅观察者模式的,维护一个事件中心,on的时候将事件按名称存在事件中心里,称之为订阅者,然后emit将对应的事件进行发布,去执行事件中心里的对应的监听器1、vue先创建一个构造原创 2020-06-11 00:09:06 · 2959 阅读 · 0 评论 -
vue2数据响应式原理
四、vue2与vue3中的数据劫持对比。二、new Vue的主流程。原创 2023-03-19 17:11:36 · 54 阅读 · 0 评论 -
虚拟DOM和diff算法
【代码】虚拟DOM和diff算法。原创 2023-03-15 22:24:32 · 68 阅读 · 0 评论 -
vue路由使用
【代码】vue路由使用。原创 2024-03-30 18:25:06 · 230 阅读 · 0 评论 -
vue状态管理
不可直接改变状态,用来包含异步操作。原创 2024-03-28 23:42:05 · 217 阅读 · 0 评论 -
在组件上使用v-model
/ 子组件中:// 以对象的形式定义属性,如果使用的是默认值modelValue,对应的修饰符属性名为modelModifiers// 配合参数使用,如果prop名为value1,对应的修饰符属性名为value1Modifiers})// 定义修饰符xxx的逻辑// 父组件中。原创 2024-03-14 01:33:27 · 325 阅读 · 0 评论 -
api-vue中key的作用
优化patch性能,更高效地更新虚拟dom。原创 2024-01-07 00:19:11 · 452 阅读 · 0 评论 -
api-nextTick
等待下一次dom更新刷新的工具方法(官方)原创 2024-01-04 09:22:32 · 366 阅读 · 0 评论 -
vue watchEffect
一旦运行,立即监听,副作用函数会调用一次vue内部有个更新dom的副作用函数(update),自定义副作用函数在update之前执行;这就导致自定义副作用函数第一次调用是拿不到dom;可以通过设置flush:‘post’,让自定义副作用函数在update之后执行('pre’是默认值)副作用中的多个状态的改变,vue会合并成一次去执行监听器。原创 2023-04-18 22:16:51 · 443 阅读 · 0 评论 -
vue 事件处理
/ 方法事件处理器没有显示的传\$event,但在方法中仍然可以获取自定义事件传递的参数// eventData为自定义事件传递的参数// 内联事件处理器中,如果方法要额外传参数,需要显示写出\$event(表明这个参数的位置,便于区分参数)// msg是123,eventData为自定义事件传递的参数// script中用小驼峰,模板中用短横线。原创 2023-04-23 00:17:33 · 96 阅读 · 0 评论 -
vue 内置组件teleport
【代码】vue 内置组件teleport。原创 2023-04-22 00:37:01 · 113 阅读 · 0 评论 -
vue render选项
【代码】vue render选项。原创 2023-04-19 23:39:57 · 58 阅读 · 0 评论 -
vue h函数
【代码】vue h函数。原创 2023-04-19 23:30:01 · 319 阅读 · 0 评论 -
vue3 defineExpose
【代码】vue3 defineExpose。原创 2023-04-19 21:59:57 · 231 阅读 · 0 评论 -
vue emit
【代码】vue emit。原创 2023-04-19 21:51:28 · 164 阅读 · 0 评论 -
vue props
【代码】vue props。原创 2023-04-19 21:34:07 · 67 阅读 · 0 评论 -
updated生命周期
一见如故组件在页面中重新渲染完毕后调用场景:组件中有个表格,外部条件改变触发表格重新请求数据,等到新的数据重新绑到表格上,表格重新渲染后,再去调用表格实例的相关操作方法原创 2023-04-19 21:20:06 · 59 阅读 · 0 评论 -
vue使用样式
slotted(选择器){原创 2023-04-18 23:14:00 · 97 阅读 · 0 评论 -
vue computed
【代码】vue computed。原创 2023-04-18 22:47:04 · 52 阅读 · 0 评论 -
vue watch
【代码】vue watch。原创 2023-04-18 22:22:24 · 51 阅读 · 0 评论 -
vue reactive
【代码】vue reactive。原创 2023-04-18 20:44:34 · 212 阅读 · 0 评论 -
vue ref
使用ref来包装对象或者数组后,有一个便利就是将对象或者数组整体的值进行替换(reactive则不行)原创 2023-04-18 20:40:26 · 51 阅读 · 0 评论