vue 强制组件重新渲染(重置)的两种方案
数据通过异步操作后,对之前刚加载的数据进行变更后,发现数据不能生效
方案一
当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染。使用 v-if 可以解决这个问题
<template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch:{ menuTree(){ this.reFresh= false this.$nextTick(()=>{ this.reFresh = true }) } } } </script>
这种方式虽然可以实现,太不优雅
方案二
通过vue key 实现,原理官方文档。所以当key 值变更时,会自动的重新渲染。
<template> <third-comp :key="menuKey"/> </template> <script> export default{ data(){ return { menuKey:1 } }, watch:{ menuTree(){ ++this.menuKey } } } </script>
以上这篇vue 强制组件重新渲染(重置)的两种方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue修改对象的属性值后页面不重新渲染的实例
最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div> <el-button size="mini" @click="
-
vue强制刷新组件的方法示例
前言: 在开发过程中,有时候会遇到这么一种情况,通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,这就需要我们手动进行强制刷新组件. 官网是这样说的: 可能你还不大理解,请继续往下看,下面是我的一个例子,来详细解说了这个方法的使用, 第一个打印结果 第二个打印结果 一.问题描述:父组件通过v-for渲染子组件,删除子组件数据出现异常. <code class="language-plain"><section v-if=
-
Vue 创建组件的两种方法小结(必看)
创建组件的两种方法小结 1.全局注册 2.局部注册 var child=Vue.extend({}) var parent=Vue.extend({}) Vue.extend() 全局方法 生成构造器,创建子类 使用基础 Vue 构造器,创建一个"子类". 这样写非常繁琐.于是vue进行了简化 使用Vue.component()直接创建和注册组件: Vue.component(id,options) 全局方法 用来注册全局组件 id 是string类型,即是注册组件的名称 option
-
vue 强制组件重新渲染(重置)的两种方案
数据通过异步操作后,对之前刚加载的数据进行变更后,发现数据不能生效 方案一 当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染.使用 v-if 可以解决这个问题 <template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch
-
Vue强制组件重新渲染的方法讨论
有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让Vue以正确的方式重新呈现组件呢? 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key. 当我们需要重新渲染组件时,只需更 key 的值,Vue 就会重新渲染组件. 这是一个非常简单的解决方案. 当然,你可能会对其他方式会更感兴趣: 简单粗暴的方式:重新加载整个页面 不妥的方式:使用 v-if 较好的方法:使用Vue的内置forceUpda
-
Vue中强制组件重新渲染的正确方法
有时候,依赖 vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让vue以正确的方式重新呈现组件呢? 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key. 当我们需要重新渲染组件时,只需更 key 的值,Vue 就会重新渲染组件. 这是一个非常简单的解决方案. 当然,你可能会对其他方式会更感兴趣: 简单粗暴的方式:重新加载整个页面 不妥的方式:使用 v-if 较好的方法:使用Vue的内置forceUpda
-
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面. const routes = [ { path: '/', name: '/', component: Index }, { path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段,表示进入这个
-
详解vue父子组件关于模态框状态的绑定方案
日常开发中经常遇到的一个场景,父组件有很多操作,需要弹窗,例如: <template> <div class="page-xxx"> //点击打开新增弹窗 <button>新增</button> //点击打开编辑弹窗 <button>编辑</button> //点击打开详情弹窗 <button>详情</button> <Add :showAdd="false">
-
AngularJS监听ng-repeat渲染完成的两种方法
本文实例讲述了AngularJS监听ng-repeat渲染完成的两种方法.分享给大家供大家参考,具体如下: 监听ng-repeat渲染完成有两种方法 一.最实用的方法: <ul class="pprt_content"> <li ng-repeat="src in imageHotList track by $index" ng-click='goGoodsDet(src.goodsId,src.merchId)' on-finish-render
-
vue打包上传服务器刷新404问题的两种方案
一:nginx服务器解决方案,修改 .conf 配置文件 有两种解决方案 1: location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } 2: location / { error_page 404 /index.html; #try_file $uri $uri/ /index.html =404; } 二:apach
-
使用vue打包时gzip压缩的两种方案
目录 介绍两种gzip压缩的方式 webpack打包生成gz文件 服务器在线gzip压缩 vue项目开启gzip压缩 前端配置 后端配置 开局一张图: 可以看出,在项目部署后,我们的资源文件请求都会保持原本大小,如果文件过大,并且很多的情况下,会导致网络请求耗时,严重点可能阻塞后面的进程. 介绍两种gzip压缩的方式 1.打包的时候通过webpack配置生成对应的 .gz 文件,浏览器请求xx.js/css等文件时,服务器返回对应的xxx.js.gz文件: 2.浏览器请求xx.js文件时,服务器
-
Vue项目实现换肤功能的一种方案分析
需求:网站换肤,主题切换.网站的主题色可以在几种常用颜色之间进行切换,还有相关图片.图标也要跟随主题进行切换. 不多说,先看下最终的实现效果: 文章由两部分组成:css切换,图片图标切换 css切换 1.在 static 目录下新建一个 styles 文件夹,在 styles 下新建一个 theme.scss 文件(项目使用了sass,会自动编译成css文件,如果没有使用这些预处理工具可以直接新建 theme.css),将需要替换的 CSS 声明在此文件中. .theme-test-btn {
-
Android彻底清除APP数据的两种方案总结
目录 用途 方案一:利用命令行pm clear 包名,系统级别清除App数据 优点 缺点 代码 方案二:手动删除内部储存和外部储存 优点 缺点 代码 总结 用途 用于APP内部的重置功能实现. 方案一:利用命令行pm clear 包名,系统级别清除App数据 优点 和任务管理器里面清除所有数据的操作一致,会删除所有的APP数据.重新进入APP还需重新申请权限. 缺点 系统会直接杀掉APP进程,无法进行拉起APP的操作. 代码 public static Process clearAppUserD
随机推荐
- jquery选择器简述
- vbs得没公开对象
- 游戏人文件夹程序 ver 4.03
- JS 实现点击a标签的时候让其背景更换
- 微信小程序-滚动消息通知的实例代码
- android LinearLayout 布局实例代码
- python读写ini文件示例(python读写文件)
- JavaScript每天定时更换皮肤样式的方法
- Java数据结构及算法实例:考拉兹猜想 Collatz Conjecture
- Lua中让回调函数支持回调对象方法的解决方法
- JQuery 获取json数据$.getJSON方法的实例代码
- sql注入建立虚拟目录
- Android实现Bitmap位图旋转效果
- ASP.NET Core中调整HTTP请求大小的几种方法详解
- 微信小程序如何获取用户信息
- 解决vue2.0动态绑定图片src属性值初始化时报错的问题
- PHP工厂模式简单实现方法示例
- 如何解决pycharm调试报错的问题
- javaweb配置jsp路径映射操作
- JS性能优化实现方法及优点进行