Este artículo lo lleva a lograr el efecto de actualizar la página sin perder datos (se conserva el estado de operación)

        Después de actualizar la página, se conserva el estado de funcionamiento de los datos, es decir, el efecto de actualizar la página sin perder datos es un efecto relativamente básico en nuestro desarrollo de proyectos front-end. De hecho es muy sencillo realizarlo, hoy te llevaré un artículo para que entiendas a fondo la realización de este efecto.

---

De hecho, hay tres puntos más importantes en resumen:

       1- Escuche los datos para mantener el estado y guárdelos en LocalStorage cada vez que cambie su estado.

watch: {
	list: {
	   deep: true,
	   handler(news, olds) {
	        localStorage.setItem("list", JSON.stringify(news))
	   }
    }
}

       2- Use LocalStorage o SissenStorage para almacenar los datos operados localmente . Entre ellos, LocalStorage puede almacenar datos a largo plazo y los datos de operación se pueden retener al actualizar o ingresar a la página la próxima vez. Si usa SissenStorage, la actualización seguirá existiendo, pero los datos almacenados se borrarán automáticamente cuando se cierre la página y no existirán la próxima vez que ingrese. Puede elegir usarlo según su propia situación.

        

       3- Cada vez que se actualice la página, primero verifique si hay algún dato que haya cambiado de estado almacenado por última vez en LocalStorage, si lo hay, use los últimos datos modificados, si no, use los datos originales.

data() {
    return {
		list: JSON.parse(localStorage.getItem("list")) || [{},{},{}];
           // LocalStorage有值则使用其里面的值，没有则使用原数据的值。
					

El siguiente es el código completo, si necesita una prueba en profundidad, ¡puede tomarlo para entenderlo!

<template>
	<div class="about">
		<div class="listPage">
			<ul>
				<li v-for="(item,key) of list" :key=item.id>
					<input type="checkbox" v-model="item.isShow" />
					<span>{
   
   {item.name}}</span>
					<span class="content">{
   
   {item.wisdom}}</span>
					<button @click="delOncePage(key)">删除</button>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				list: JSON.parse(localStorage.getItem("list")) || [{
						id: "1",
						name: "千与千寻",
						wisdom: "人生就是一列开往坟墓的列车",
						isShow: true
					},
					{
						id: "2",
						name: "你的名字",
						wisdom: "你会哭着笑,笑着哭,是因为你的心,早已超越了自己",
						isShow: true
					},
					{
						id: "3",
						name: "言叶之庭",
						wisdom: "人生就是一列开往坟墓的列车",
						isShow: true
					},
					{
						id: "4",
						name: "千与千寻",
						wisdom: "晴朗的早晨,我会按部就班",
						isShow: true
					},
					{
						id: "5",
						name: "千与千寻",
						wisdom: "相比于蓝天,我更想选择阳菜",
						isShow: true
					}
				]
			}
		},
		methods: {
			delOncePage(key) {
				this.list.splice(key, 1)
			}
		},
		watch: {
			list: {
				deep: true,
				handler(news, olds) {
					localStorage.setItem("list", JSON.stringify(news))
				}
			}
		}
	}
</script>
<style>
	* {
		margin: 0 auto;
		padding: 0;
		list-style: none;
	}

	.listPage {
		width: 600px;
	}

	.listPage li {
		width: 100%;
		background-color: antiquewhite;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.listPage li .content {
		width: 60%;
		height: 50px;
		line-height: 50px;
		text-align: left;
	}
	.listPage li input[type=checkbox]{
		zoom: 2;
	}
</style>

Lo anterior es el efecto de que los datos de actualización de la página no se pueden perder, ¡espero que pueda ser útil!