Vue
文章平均质量分 85
橘子味的冰淇淋~
困顿之时,切莫自馁。熬过此关,便可少进,再进再困,再困再进,终有精进亨通之时。
展开
-
vue 的 keep-alive 详解
在该函数内对this.cache对象进行遍历,取出每一项的name值,用其与新的缓存规则进行匹配,如果匹配不上,则表示在新的缓存规则下该组件已经不需要被缓存,则调用pruneCacheEntry函数将其从this.cache对象剔除即可。是一个内置组件,它的功能是在多个组件间动态切换时缓存被移除的组件实例,而不是销毁它们,可防止重复渲染。发生了变化,即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化,那么就执行。表明该组件还没有被缓存过,则以该组件的。的组件实例,此时重新调整该组件。原创 2024-04-24 16:04:13 · 738 阅读 · 0 评论 -
vue 实现懒加载
懒加载,也称为延迟加载,是一种将资源(如图片、组件、代码等)推迟到需要的时候再加载的策略。在 Vue 中,懒加载通常涉及到组件和图片的加载。原创 2024-04-23 18:09:29 · 995 阅读 · 0 评论 -
谈谈 vue 生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。(ps:生命周期钩子就是生命周期函数)例如,如果要通过某些插件操作 DOM 节点,如想在页面渲染完后弹出广告窗, 那我们最早可在 mounted 中进行。原创 2024-04-22 16:23:31 · 1154 阅读 · 2 评论 -
Vue 常用修饰符
修饰符是用于限定类型以及类型成员的声明的一种符号,vue 中修饰符分为以下五种:事件修饰符、鼠标按键修饰符、v-bind 修饰符、键值修饰符、表单修饰符。原创 2024-04-19 17:10:48 · 1100 阅读 · 0 评论 -
vue 钩子函数
bind:指令绑定到元素之上的时候触发 只执行一次unbind:指令被移出的时候触发 只执行一次update:所有节点更新的时候执行componentUpdate:指令所在节点以及所有子节点都更新完成的时候执行inserted:绑定指令的元素在页面展示的时候执行。原创 2024-04-18 17:21:50 · 681 阅读 · 1 评论 -
Vue 中 mixins(混入)的介绍和使用
在项目开发的时候,常会碰到这样的一种现象:有两个组件非常相似,比如较为熟悉的 Modal 、 Tooltip 和 Popover ,它们都具有同样的基本函数,而且它们之间也有足够的不同。很多时候,就让人很难做出选择:是把它们拆会成多个不同的组件呢?还是只使用一个组件,创建足够的属性来改变不同的情况?这些解决方案都不够完美。如果拆分成多个组件,就不得不冒着如果功能变动你要在多个文件中更新它的风险。另一方面,太多的属性会很快变得混乱,难维护,甚至对于组件开发者自已面言,也是件难事。原创 2024-04-18 16:27:27 · 962 阅读 · 1 评论 -
vue 组件间通信方式
要注意的是 provide 和 inject 传递的数据不是响应式的,也就是说用 inject 接收来数据后,provide 里的数据改变了,后代组件中的数据不会改变,除非传入的就是一个可监听的对象。在父组件中给子组件绑定自定义事件,然后调用需要的方法,然后在子组件中用 this.$emit 触发父组件的事件,第一个是事件名,第二个是参数。在父组件子组件添加自定义属性,挂载需要传递的数据,子组件用 props 来接受,接收方式也可以是数组,也可以是对象,子组件接收到数据之后,原创 2024-04-17 11:05:14 · 1061 阅读 · 0 评论 -
Vue2 响应式原理
这样,当 obj.message 属性发生变化时,Dep 会通知到相关的观察者,触发相应的更新操作。它会重写对象的属性访问器(getter和setter),使得当属性被读取或修改时,Vue 能够捕捉到这一操作,并触发相应的更新。在 Vue 的响应式系统中,依赖收集是指收集数据属性的依赖关系,也就是说,当一个属性被使用时,Vue 会追踪到这个属性的依赖,并建立起一个关联关系。当属性被读取时,会打印相应的信息,当属性被修改时,也会打印对应的信息。对于对象的变化,Vue 的响应式系统使用了类似的方法进行劫持。原创 2024-04-09 16:55:34 · 770 阅读 · 0 评论 -
vue-router的两种模式
1. Hash模式是默认模式,地址栏的地址会自动产生“#”。当URL改变时,重新获取hash对应的页面(在Vue中是需要显示的组件),并将这些内容显示在页面中,这样模拟的URL不会让整个页面重新加载。也就是说,页面只在首次加载时刷新。这样就在无刷新的情况下,通过控制组件的显示,完成页面的切换。2. History 模式针对的是HTML5新特性history的浏览器,其本身就是用户访问页面时浏览记录的堆栈,HTML5允许操作history 栈中的内容。无论采用何种方式配置vue-rout原创 2022-10-11 17:04:56 · 480 阅读 · 0 评论