Vue 之 calculado/reloj --- kalrry

1. Propiedades calculadas

Las propiedades calculadas son útiles cuando se trata de alguna lógica compleja.
Comparación de propiedades calculadas y aplicaciones normales

1. Método ordinario

<div id="app">
	{
    
    {
    
    message.split("").reverse().join("")}}
</div>
<script>
	new Vue({
    
    
		el: '#app',
		data: {
    
    
			message: "Hello World!"
		}
	})
</script>

2. Después de usar propiedades calculadas

<div id="app">
  <p>原始字符串: {
    
    {
    
     message }}</p>
  <p>计算后反转字符串: {
    
    {
    
     reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
    
    
  el: '#app',
  data: {
    
    
    message: 'Runoob!'
  },
  computed: {
    
    
    	// 计算属性的 getter
    	reversedMessage: function () {
    
    
     	// `this` 指向 vm 实例
    	return this.message.split('').reverse().join('')
    }
  }
})
</script>

3. Diferencia entre computado y métodos

1. se pueden usar métodos en lugar de propiedades calculadas para lograr el mismo efecto
2. Pero el cálculo se basa en su caché de dependencia, que solo se volverá a valorar cuando cambien las dependencias relevantes.
3. Usando métodos, cuando se vuelve a renderizar, la función siempre volverá a llamar a la ejecución
   Conclusión: usar computado puede mejorar el rendimiento, pero si no desea tener almacenamiento en caché, use el atributo de métodos

4.Propiedades de setter calculadas

La propiedad calculada solo tiene un captador de forma predeterminada, pero también se puede proporcionar un ejemplo de una propiedad de establecimiento cuando sea necesario

var vm = new Vue({
    
    
  el: '#app',
  data: {
    
    
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    
    
    site: {
    
    
      // getter
      get: function () {
    
    
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
    
    
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
//调用get，将更新后的值返回
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

2. Supervisión de propiedades

1. Supervisar la vigilancia de la propiedad

1. Las propiedades calculadas son más apropiadas en la mayoría de los casos, pero a veces se requiere un oyente personalizado.Vue proporciona un método de observación para responder a los cambios de datos.
2. Cuando necesite realizar operaciones asincrónicas o costosas cuando cambien los datos, este método es el
   ejemplo más útil 1.
   Use el reloj para responder a los cambios de datos con el reloj para implementar el contador

<div id="app">
	<p style="font-size: 20px;">计数器：{
    
    {
    
    count}}</p>
	<button @click="count++">点我</button>
</div>

<script>
var vm = new Vue({
    
    
	el: "#app",
	data: {
    
    
		count: 0
	},
	watch: {
    
    
		count: function(newV, oldV) {
    
    
			alert("改变前：" + oldV + "，改变后：" + newV)
		}
	}
})

//上面等价于下面
var vm1 = new Vue({
    
    
	el: "#app",
	data: {
    
    
		count: 0
	}
})
vm1.$watch("count", function(newV, oldV) {
    
       //监控count，当值发生变化时执行函数
	alert("改变前：" + oldV + "，改变后：" + newV)
})
</script>

2. atributo inmediato

Una característica del reloj es que cuando el valor se vincula por primera vez, la función de monitoreo no se ejecutará y solo se ejecutará el valor cuando cambie el valor. Si necesitamos ejecutar la función cuando el valor está inicialmente vinculado, debemos usar la propiedad inmediata y establecer su valor de propiedad en verdadero

watch: {
    
    
	userName: {
    
    
		handler (newName, oldName) {
    
    
			console.log(newName)
		},
		immediate: true
	}
}

3. atributo profundo

Cuando es necesario monitorear los cambios de un objeto, el método de observación ordinario no puede monitorear los cambios de las propiedades internas del objeto, solo los datos en los datos pueden monitorear los cambios. En este momento, se requiere la propiedad profunda para profundizar monitorear el objeto.

<input type="text" v-model="cityName.name" />
data (){
    
    
	return {
    
    
		cityName: {
    
    id: 1, name: '上海'}
	}
},
watch: {
    
    
	cityName: {
    
    
		handler(newName, oldName) {
    
    
			console.log(newName)
		},
		immediate: true,
		deep: true
	}
}

Cuando hay muchas propiedades de objeto, el controlador se ejecutará para cada cambio de valor de propiedad. Si solo necesita monitorear el valor de una propiedad en el objeto, puede hacer la siguiente optimización: use la forma de cadena para monitorear la propiedad del objeto:

watch: {
    
    
    'cityName.name': {
    
    
      handler(newName, oldName) {
    
    
      // ...
      },
      deep: true,
      immediate: true
    }
  }

4. Diferencia entre computado y reloj

1. Similitudes:

Se espera que cuando cambien los datos dependientes, los datos dependientes cambien "automáticamente" según una función predefinida.

2. Diferencias:

1. Ver escenario de aplicación: un dato afecta a múltiples datos (cuando un dato cambia, como el ejemplo del contador)
2. Escenario de aplicación computarizada: un dato se ve afectado por múltiples datos (cuando varios datos cambian, como un setter computarizado)