El uso de $set en Vue2

1. ¿En qué escenarios se utiliza $set?

        Set nació para resolver el problema de falla del enlace de datos bidireccional en Vue2. Solo debe prestar atención a cuándo fallará el enlace de datos bidireccional.

Por ejemplo:

        1. Cuando se utiliza el índice de un elemento en la matriz para modificar directamente el elemento

arr[indexOfItem] = newValue

        2. Al modificar directamente la longitud de la matriz

arr.length = newLength

        3. Debido a limitaciones de JavaScript, Vue2 no puede detectar la adición o eliminación de atributos de objetos.

         Si desea conocer los motivos específicos, puede consultar la documentación oficial para obtener una explicación detallada del principio de respuesta——

Principios de reactividad en profundidad: Vue.js (vuejs.org) https://v2.cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F % 98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9

2. La relación entre Vue.set y this.$set

        this.$set método de instancia, que es un alias del método global Vue.set

3. $establecer uso

1. Para matrices

this.$set(Array, index, newValue)

2. Para objetos

this.$set(Object, key, value)

4. Escenarios de ejemplo

        Requisito: No está definido en los datos. Agregue manualmente el atributo de edad al formulario y haga clic en el botón para incrementarlo.

        Si usa this.form.age = 10, no puede agregar ni incrementar automáticamente, y los datos no pueden responder.

        En este momento, debe utilizar el método this.$set para implementar la capacidad de respuesta

<template>
	<div>
		<h1> {
   
   { form }} </h1>   <!--{name:'xxx'}/ {name:'xxx',age:10}-->
		<button @click="add">添加</button>
	</div>
</template>
<script>
export default{
	data(){
		return{
			form:{
				name: 'xxx',
			}
		}
	}
	methods:{
		add(){
			if(!this.form.age){
				this.$set(this.form, age, 10) // 成功
				
				// Vue2中监听不到动态给对象添加的属性的
				// this.form.age = 10   // 失败无法添加,更无法自增
			} else {
				this.form.age++
			}
		}
	}
}
</script>