Directorio de artículos
Las similitudes y diferencias entre Watch y Computed, así como sus respectivos usos.
1. Similitudes
- Todos ellos se basan en funciones.
- Los cambios en los datos dependientes activarán funciones relacionadas para implementar cambios en los datos.
补：methods 里面是用来定义函数的，需要手动才能执行
2. Diferencias
watchLos métodos similares a escucha de eventos + vigilancia del mecanismo de eventos no se ejecutarán de forma predeterminada y solo se ejecutarán si las propiedades dependientes cambian. (Ejecución automática) Observe un objeto, la clave es la expresión a observar y el valor es la función de devolución de llamada correspondiente. Se utiliza principalmente para monitorear cambios en ciertos datos específicos para realizar ciertas operaciones de lógica de negocios específicas; puede considerarse como una combinación de métodos computacionales.computedEs una propiedad calculada. Cuando las propiedades calculadas dependen del cambio, la propiedad calculada se volverá a calcular y se almacenará en caché. La propiedad calculada no se vuelve a calcular cuando cambian otros datos (no datos dependientes). Utilizado principalmente como atributos, no agregue () cuando lo use; mejorando así el rendimiento
3. Uso
En términos generales, si necesita realizar alguna lógica empresarial compleja para monitorear los cambios en los valores, puede usar watch.
Cuando necesite confiar en otros atributos para obtener el valor dinámicamente, puede usar calculado.
// 属性监听
watch:{
//firstName 在date中定义
firstName:function(value){
console.log(value);
this.name = this.firstName + '-' +this.lastName
},
lastName:function(value){
console.log(value);
this.name = this.firstName + '-' +this.lastName
},
},
// 属性计算
computed: {
// 属性不能和data中重复
name: {
get:function(){
return this.firstName + '-' +this.lastName;
},
// 只有当自身发生改变的时候才触发
set(value){
console.log(value);
console.log(value.split('-'));
if( value.split('-').length ==2){
this.firstName = value.split('-')[0]
this.lastName = value.split('-')[1]
}
}
},
},