A continuación, el contenido de la anterior: https://www.cnblogs.com/yanggb/p/12571062.html .
propiedad computarizada
La expresión en la plantilla es muy conveniente, pero están diseñados principalmente para una operación sencilla. Si se pone demasiado lógica en la plantilla, la plantilla será demasiado pesada y difícil de mantener.
< Div ID = "ejemplo" > {{message.split ( ''). Reverse (). Join ( '')}} </ div >
Por ejemplo, en el código anterior, la plantilla ya no es un simple lógica declarativa, usted tiene que pasar por algún tiempo darse cuenta de que en el momento de la lectura, aquí es el mensaje que desea reversión de visualización de una variable de cadena. Cuando se desea invertir una cadena entre comillas aquí varias veces en la plantilla, que será más difícil de tratar, ya que puede tener que repetir la misma expresión escrita en múltiples referencias. Por lo tanto, para cualquier lógica compleja, se recomienda utilizar la propiedad calculada.
Ejemplos de cálculo de una base de atributos
< Div ID = "ejemplo" > < p > Mensaje original: "{{mensaje}}" </ p > < p > computarizada invierte mensaje: "{{}} reversedMessage" </ p > </ div >
Vue nueva nueva vm = var ({
EL: '#example',
Datos: {
mensaje: 'Hola el'
},
calcula: {
// Cálculo captadores de propiedad
reversedMessage: function () {
// `this` instancia de VM punto de
devolver este. message.split ( ''). atrás (). la unión ( '')
}
}
})
resultados:
Mensaje original: "Hola"
computarizada invierte mensaje: "Olleh"
En el ejemplo anterior, un cálculo de la declaró reversedMessage atributo. Ofrecemos una función que se utiliza como la función getter vm.reversedMessage propiedad.
console.log (vm.reversedMessage) // => 'Olleh' vm.message = 'adiós' console.log (vm.reversedMessage) // => 'eybdooG'
Si en ese momento la consola navegador para modificar sus propios ejemplos de VM, entonces el valor de vm.reversedMessage siempre dependerá del valor de vm.message.
Podemos calcular que las propiedades de unión de la plantilla como propiedad común de unión. Desde vue saben vm.reversedMessage depende de vm.message, por lo que cuando el valor de vm.message cambió todo depende de los enlaces de vm.reversedMessage será actualizado. Y lo mejor de todo es que tenemos que forma declarativa para crear esta dependencia: calcular las funciones de propiedades getter hay efectos secundarios (efectos secundarios), ya que no cambia los valores de los atributos son dependientes. Vm.reversedMessage ejemplo anterior no cambia el valor de vm.message (manera dependiente), de modo que las propiedades calculadas fácilmente entendidos y probados.
Método de cálculo vs caché de propiedades
Si la expresión mediante una llamada al método, entonces, puede ser calculada para alcanzar las mismas propiedades de efectos.
< P > mensaje Invertida: "{{reversedMessage ()}}" </ p >
// en la Asamblea Métodos: { reversedMessage: función () { devolver el este .message.split ( '') .. Reverse () la unión ( '' ) } }
Como se ve en el ejemplo anterior, podemos definir un método para la misma función en lugar de un atributo calculado, y los resultados finales de las dos formas es de hecho idéntico. Sin embargo, las dos formas diferentes en que lugar, atributo de caché se calcula en base a sus atributos de dependencia de respuesta calculados se almacenan en caché en base a sus atributos de dependencia de respuesta calculados se almacenan en caché en función de su dependencia de respuesta, cambios sólo dependientes de respuesta relacionados en el cálculo de la propiedad será re-evaluado. Esto significa que el tiempo que el mensaje no ha cambiado, muchas visitas a los resultados de los cálculos antes de la propiedad devolverá cálculo inmediatamente reversedMessage, sin tener que realizar de nuevo la función, esta función se llama [de] la caché.
calculado: { ahora: la función () { retorno Date.now () } }
Entonces, en el ejemplo anterior, ya que el Date.now () no es en respuesta a la actualización, ahora ya no se actualizará el atributo calculado. Por el contrario, cada vez que el gatillo re-representación, siempre llame al método ejecutará la función una vez más.
Es decir, la página en caché es aumentar el rendimiento. Supongamos que hay una gran cantidad de cómputo propiedad sobrecarga de rendimiento A, se necesita atravesar una enorme variedad y hacer un montón de cómputo, pero esta vez no es otro atributo de cálculo B depende de A, si A no se almacena en caché, entonces inevitablemente ocurrirá se realiza un cálculo muchas veces en la función getter de la propiedad, incluso si el valor a ser devuelto sin ningún cambio. Y con [caché] de esta función es evitar funciones getter innecesarios para realizar cálculos muchas veces atributo A, pueden mejorar considerablemente el rendimiento de la página.
Y si no es así, entonces la caché, puede utilizar el método de reemplazar, ya que puede decirse que no sea [caché] de esta característica, casi no hay diferencia entre los dos.
getter propiedades calculadas
El atributo por defecto sólo se calcula getter, pero cuando es necesario, también puede proporcionar una incubadora.
// ... computarizada: { fullName: { // getter get: la función () { devolver este .firstName + '' + esta .lastName }, // colocador conjunto: la función (nuevoValor) { var nombres = newValue.split ( '' ) esta .firstName = nombres [0 ] este .lastName = nombres [names.length - 1 ] } } } // ...
Esta vez, si la consola de navegador que se ejecuta vm.fullName = 'xxx xxxx' tiempo, la función se llama colocador, vm.firstName y vm.lastName se actualizarán en consecuencia.
Listener (propiedades de la escucha)
vue proporciona una más versátil manera de observar cambios y el ejemplo de datos de respuesta vue. Aunque las propiedades de computación más apropiado en la mayoría de los casos, pero a veces también requiere una escucha personalizado (propiedades de la escucha). La implementación de gran funcionamiento asíncrono o sobre la cabeza, este enfoque es útil cuando los datos necesarios para el cambio.
< Div ID = "reloj-ejemplo" > < p > Haz / no un sí: < entrada de v-modelo = "pregunta" > </ p > < p > {{respuesta}} </ p > </ div >
<! - porque la biblioteca de AJAX ecológica y herramientas comunes ya bastante rica, código del núcleo Vue no se repite -> <! - ofrece estas capacidades con el fin de mantenerse delgada. También le permite la libertad de elegir sus herramientas más conocidas. -> <script src = el "https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"> </ script> <script src = el "HTTPS: // CDN. jsdelivr.net/npm/[email protected]/lodash.min.js "> </ script> <script> var watchExampleVM = nueva nueva Vue ({ EL: 'Mira-Ejemplo #' , datos: { pregunta: '' , respuesta: 'no puede el te dará una hasta que responder a una hacer una pregunta!' }, reloj: { // Si `cambios Question`, esta función se ejecutará pregunta: = .Answer 'Deja de escribir la espera de que ...' la presente .debouncedGetAnswer () } }, Creado: función () { // `_.debounce` Lodash operación de limitación es una función de la frecuencia a través. // En este ejemplo, queremos limitar la frecuencia de acceso yesno.wtf/api // petición AJAX se emitirá hasta que se complete la entrada del usuario. Para obtener más información sobre // `función de los conocimientos _.debounce` (y su estrecha relatives` _.throttle`), y // consulte: HTTPS: //lodash.com/docs#debounce la presente .debouncedGetAnswer = _.debounce ( el este .getAnswer, 500 ) }, Métodos: { getAnswer: función () { SI ( el este.question.indexOf ( '?') === -1 ) { este .answer = 'Preguntas por lo general contiene un signo de interrogación. ;-)' retorno } este .answer = 'Pensamiento ...' var vm = esta axios.get ( 'http://www.yanggb.com.cn/api' ) .then ( función (respuesta) { vm. respuesta = _.capitalize (response.data.answer) }) . captura ( función (error) { vm.answer = 'Error! No se pudo llegar a la API.' + error }) } } }) </ Script>
En este ejemplo, se utiliza la opción reloj permite un funcionamiento asíncrono (el API para el acceso a), se realiza el límite de frecuencia de operación y antes de llegar al resultado final, un estado intermedio. Estos atributos se calculan no se puede hacer.
Propiedades del Oyente vs Propiedad Calcular
Cuando usted tiene algunos datos con otros datos necesarios para el cambio y el cambio, puede ser fácilmente abusado propiedad oyentes reloj, por lo general mejor práctica es utilizar el atributo de cálculo en lugar de devolución de llamada reloj imprescindible.
< Div ID = "demo" > {{}} fullName </ div >
var vm = nueva Vue ({ EL: '#demo' , de datos: { nombre: 'Foo' , lastName: 'Bar' , fullName: 'Foo Bar' }, reloj: { primerNombre: función (val) { este .FullName = val + '' + este .lastName }, lastName: función (val) { este .FullName = esta .firstName + '' + val } } })
En el código anterior, la escucha nombre y apellido dos propiedades, si estas dos propiedades cambio dará lugar a los atributos de devolución de llamada de escucha, de valores de atributos para empalmar dos fullName propiedad. Este enfoque es imprescindible, y la función se repite dos propiedades de la escucha.
var vm = nueva Vue ({ EL: '#demo' , de datos: { nombre: 'Foo' , lastName: 'Bar' }, calculado: { fullName: la función () { devolver este .firstName + '' + esta .lastName } } })
Tras el cálculo de la propiedad en una declarativa, un código más claro y conciso mucho.
"Todavía me gusta que, como el tiempo sonrisa Dimei, más que mil palabras".