场景：在组件内，搜索框进行搜索，再进入此页面搜索内容还在，如果没有清空搜索的方法，怎么办？

也会想到会有几种解决办法：

  1. 重新渲染整个页面
  2. 使用v-if hack
  3. 使用Vue 内置的forceUpdate方法
  4. 最好的方式：修改key值
一、使用key值进行强制渲染（推荐）
  1. 为什么选key值?
    如果key值不变，那么就不会改变组件；如果改变key值，旧组件被摆脱，新组件被创建。

当删除其中一个key的值，对其它并没有什么影响，只需要更新key值就可以，并且可以保留所有的组件。如果有很复杂的逻辑，DOM操作。。那么使用key值就会很有用。
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

二、v-if hark

vue 附带的 v-if 指令相当于判断，当组件为true时才会渲染；但是如果为false，那么这个组件就不会存在DOM元素。所以当我们第二次进行渲染时，还会进行一个全新的组件，就重新进行了一遍created、mounted等。

总结：最后推荐Key值进行强制渲染！

参考：添加链接描述

# 前端 # javascript # vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue