vue 使用技巧（持续更新~）

记录一下vue的一些技巧，持续更新~

一、Vue中的数据不同步问题及解决办法

在 Vue 中，有时会遇到数据已经更新了，但视图却没有同步更新的情况。这是因为 Vue 的视图更新机制采用了高效的 diff 算法，它只会更新实际发生变化的部分，而不是整个视图。这种机制虽然提高了性能，但在某些情况下会导致数据与视图不同步的问题。

解决办法：

• 由于 Vue 的 diff 算法依赖于元素的唯一标识符（key），我们可以通过为可能发生数据不同步的节点添加一个唯一的 key 来解决这个问题。当数据发生改变时，更新该节点的 key 值即可触发视图的重新渲染。

例如，假设你有一个列表项，其中某个项的数据发生了变化，但视图没有更新。你可以为这个项添加一个 key 值，并在数据改变后更新这个 key 值，从而触发视图的重新渲染。

二、在项目中重置 某个响应式对象数据 是一个常见需求。

• 在vue2 中，假设我们的数据是这样的

data() {
  return {
    myObj: {
      name: 'lihua',
      age: 20
    }
  }
}

1.常规做法：手动将对象中的每一项数据恢复到初始值，累死，且代码冗余

this.myObj.name = 'lihua';
this.myObj.age = 20;

2.封装 reset 方法，一劳永逸

reset() {
  this.myObj.name = 'lihua';
  this.myObj.age = 20;
}

好处：需要用到时直接调用 reset 方法即可

弊端：每个响应式对象都要封装对应的 reset 方法，而且当对象里的属性很多时需要一个个置为默认值，一次就受不了。

3.使用 this.$options.data().myObj 来重置对象

// this.myObj = { ...this.$options.data.call(this).myObj }   
Object.assign(this.myObj, this.$options.data.call(this).myObj);     // 推荐写法，不会重新创建对象

一行代码就实现了效果，方便了很多~~

• 在 vue3 中，只需要在初始化对象时通过函数返回对象，然后把函数返回的对象传入 ref 或者 reactive 中，重置时通过对象合并即可。 示例如下：

<script setup>
import { ref,reactive } from 'vue'

const initObj = () => {
	return {
		name: 'lihua',
		age: 20
	}
}
const myObj = ref(initObj())
const changeObj = () => {
	myObj.value.name = 'xiaoming'
	myObj.value.age = 30
}
const reset = () => {
	Object.assign(myObj.value, initObj())
}


const initObj1 = () => {
	return {
		name: 'lihua',
		age: 20
	}
}
const myObj1 = reactive(initObj1())
const changeObj1 = () => {
	myObj1.name = 'xiaoming'
	myObj1.age = 30
}
const reset1 = () => {
	Object.assign(myObj1,initObj())
}


</script>

<template>

	<p>{{myObj}}</p>
	<button @click='changeObj'>update</button>
	<button @click='reset'>reset</button>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
	<p>{{myObj1}}</p>
	<button @click='changeObj1'>update</button>
	<button @click='reset1'>reset</button>
</template>