第22天 Vue ＜keep-alive＞＜/keep-alive＞ 的作⽤是什么? v-el的作⽤是什么

最新推荐文章于 2024-07-10 08:19:44 发布
最新推荐文章于 2024-07-10 08:19:44 发布
阅读量139 收藏
点赞数
分类专栏： 面试题 vue 项目 javascript 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36529240/article/details/122337029
版权
面试题 同时被 3 个专栏收录
190 篇文章 3 订阅
订阅专栏
javascript
170 篇文章 3 订阅
订阅专栏
vue 项目
52 篇文章 0 订阅
订阅专栏

1.keep-alive

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要⽤于保留 组件状态或避免重新渲染

⽐如有⼀个列表和⼀个详情，那么⽤户就会经常执⾏打开详情=>返回列表=> 打开详情…这样的话列表和详情都是⼀个频率很⾼的⻚⾯，那么就可以对列表 组件使⽤ 进⾏缓存，这样⽤户每次返回列表的 时候，都能从缓存中快速渲染，⽽不是重新渲染

2.v-el
提供⼀个在⻚⾯上已存在的 DOM 元素作为 Vue 实例的挂载⽬标.可以是 CSS 选择器，也可以是⼀个 HTMLElement 实例

江-月*夜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue指令
(●'◡'●)
08-02 513
Vue.js前端开发 快速入门与专业应用 学习记录
解析Vue动态组件——keep-alive
小王的技术库
11-08 2316
keep-alive组件的作用类似于 HTTP 中的持久链接。它可以避免组件实例不断地被销毁和重建。keep-alive的实现并不复杂。当被keep-alive的组件在卸载的时候，渲染器并不会真的将其卸载，而是会将该组件搬运到一个隐藏的容器中，从而使得组件可以维持当前状态。当被keep-alive的组件再次被 “挂载” 时，渲染器也不会真的挂载它，而是将它从隐藏容器中搬运到原容器。
第20天 Vue keep-alive 组件有什么作⽤
qq_36529240的博客
01-04 203
如果你需要在组件切换的时候，保存⼀些组件的状态防⽌多次渲染，就可以使⽤ keepalive 组件包裹需要保存的组件。 对于keep-alive 组件来说，它拥有两个独有的⽣命周期钩⼦函数，分别为 activated 和 deactivated 。⽤ keep-alive 包裹的组件在切换时不会进⾏销毁，⽽是缓存到内 存中并执⾏ deactivated 钩⼦函数，命中缓存渲染后会执⾏actived 钩⼦函数。 ...
指令v-el的作用是什么
最新发布
qingdouxiaohua的博客
07-10 277
如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。这使得在Vue 2.x及更高版本中访问DOM元素或子组件实例变得更加直接和方便。指令被用来给元素注册引用信息（即DOM元素的引用）。这样，开发者就可以在Vue实例的方法中直接访问到这个DOM元素。然而，需要注意的是，从Vue 2.0开始，被设计为用来给元素或子组件注册引用信息。引用信息将会注册在父组件的。在Vue.js的早期版本中（特别是Vue 1.x版本），但在Vue 2.x及更高版本中，应该使用。
Vue中的v-el与v-ref
ZZY1078689276的专栏
11-04 9834
v-el 作用：   通过v-el我们可以获取到DOM对象。 v-ref 作用：   通过v-ref获取到整个组件（component）的对象。 示例 源码 &lt;!DOCTYPE html&gt; &lt;html lang="en" xmlns:v-el="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta char...
Vue中的v-el与v-ref （v2.0 v-ref、v-el 弃用）
qq_26642611的博客
02-25 2442
v-el 作用：   通过v-el我们可以获取到DOM对象。 v-ref 作用：   通过v-ref获取到整个组件（component）的对象。 示例 源码 <!DOCTYPE html> <html lang="en" xmlns:v-el="http://www.w3.org/1999/xhtml"> <head> <meta charset=...
Vue.js面试题整理
热门推荐
jingtian678的博客
06-06 1万+
一、什么是MVVM？ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewMo...
vue使用keep-alive保持滚动条位置的实现方法
10-17
2. 在Vue的主组件app.vue中，使用<keep-alive>包裹<router-view>，并根据路由的meta属性决定是否激活<keep-alive>： ```vue <template> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> ...
vue中keep-alive内置组件缓存的实例代码
10-15
<title>Vue Keep-Alive 示例</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script> </head> <body> <div id="app"> <router-view></router-view> </div> <script> Vue....
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
<el-tabs v-model="settype" @tab-click="tabClick" ref="tabs"> <el-tab-pane label="广告位设置" name="bannerset">广告位设置</el-tab-pane> <el-tab-pane label="推送设置" name="sendset">推送设置</el-tab-...
VUE3学习 第五章 Teleport传送组件、keep-alive缓存组件、transition动画组件、transition-group过度、依赖注入Provide/Inject、兄弟组件Mitt
m0_55170432的博客
11-09 937
学习
一. Vue核心小知识点
飞翔的熊blabla
04-20 791
1、vue中key值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。 有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。 最常见的用例是结...
说⼀下你对keep-alive的理解?以及在项⽬中如何使⽤?
zhangyu812的博客
04-27 536
keep-alive是vue内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，我们能够知道，⼀般情况下，组件进⾏切 换的时候，默认会进⾏销毁，如果有需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态，⽐如说刚刚填好的表单数 据。那么就可以利⽤keep-alive来实现 在搭建 vue 项⽬时，有某些路由组件没必要多次渲染，所以需要将组件在内存中进⾏‘持久化’，此时在router-view上使⽤ keep-alive。 keep-alive可以使被包含的路由组件状态维持不变，即便是组件...
v-el的作用以及el属性和$mount的优先级
qq_44052087的博客
11-14 975
v-el的作用以及el属性和$mount的优先级
指令v-el的作用是什么?
LuckXinXin的博客
09-14 3667
提供一个在页面上已存在的 DOM元素作为 Vue实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例,
Vue2.0中使用v-el,v-rel出现问题
heyuqing32的博客
12-18 1437
问题描述 在高仿饿了么实战项目中使用v-el指令获取DOM，但出现下图的错误：   v-el指令   代码 template   template script   script   问题原因： 在Vue2.0中弃用了v-el,v-rel指令 解决方案： 使用ref属性为元素或组件添加标记，然后通过this.$refs获取 ref被用来给元素或子组件...
前端面试题（六）
weixin_47087818的博客
07-30 253
1.指令v-el的作用是什么？ 提供一个在页面上已存在的DOM元素作为Vue的实例的挂载目标，可以是CSS选择器，也可以是一个HTMLElement实例。 2.请列举3个Vue中常用的生命周期钩子函数？ created:实例已经创建完成之后调用，在这一步，实例已经完成数据观测，属性和方法的运算，watch/event事件回调。 mounted:el被创建的vm,并挂载到实例上去之后调用的钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。 activated:在vu
vue指令（vue）
weixin_43677787的博客
01-23 216
v-el: 页面上已存在的 DOM元素作为 Vue实例的挂载目标.(css选择器/html元素) v-model: 双向绑定，主要用于input ,(=== :value="" @input="") /*template*/ <input v-model="inputValue"/> <input :value="inputValue" @input="handleInput"/> /*script*/ data() { return{ inputValue: '' }.
vue笔记---vue1.0v-el:和v-ref用法
qq_34530330的博客
03-23 8162
vue1.0中的v-el和v-ref在2.0中被废弃了。 所以2.0中如果需要此功能要通过ref属性 在js中用$refs获取元素
<template> <div class="about"> <v-header /> <v-sidebar /> <div class="content-box" :class="{ 'content-collapse': collapse }"> <v-tags /> <div class="content"> <router-view v-slot="{ Component }"> <transition name="move" mode="out-in"> <keep-alive :include="tagsList"> <component :is="Component" /> </keep-alive> </transition> </router-view> <!-- <el-backtop target=".content"></el-backtop> --> </div> </div> </div> </template> <script setup> import { computed } from 'vue'; import { useStore } from 'vuex'; import vHeader from '../../components/Header.vue'; import vSidebar from '../../components/LogisticsSidebar.vue'; import vTags from '../../components/Tags.vue'; const store = useStore(); const tagsList = computed(() => store.state.tagsList.map((item) => item.name)); const collapse = computed(() => store.state.collapse); // defineExpose 可以省略 defineExpose({ tagsList, collapse, }); </script>
06-06
页面头部和侧边栏分别使用了 vHeader 和 vSidebar 组件，而标签页和内容部分则使用了 Vue Router 提供的 router-view，以及 transition 和 keep-alive 组件实现动态加载和缓存。另外，该组件还使用了 Vuex 管理页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值