Vue.js Propiedades computadas

Palabras clave de las propiedades computadas:computed。

Las propiedades computadas son muy útiles al manejar lógica compleja.

Puedes ver el siguiente ejemplo de inversión de cadena:

Ejemplo 1

<div id="app"> {{ message.split('').reverse().join('') }} </div>

Pruébalo »

En el ejemplo 1, la plantilla se vuelve muy compleja y no es fácil de entender.

A continuación, veamos un ejemplo que utiliza propiedades computadas:

Ejemplo 2

<div id="app"> <p>Cadena original: {{ message }}</p> <p>Cadena invertida después del cálculo: {{ reversedMessage }}</p> </div> <script>var vm = new Vue({ el: '#app', data: { message: 'Ejemplo!' }, computed: { // getter de la propiedad computada reversedMessage: function () { // `this` apunta a la instancia de vm return this.message.split('').reverse().join('') } } })</script>

Pruébalo »

En el ejemplo 2 se declara una propiedad computada `reversedMessage`.

La función proporcionada se usará como getter de la propiedad `vm.reversedMessage`.

`vm.reversedMessage` depende de `vm.message`; cuando `vm.message` cambia, `vm.reversedMessage` también se actualiza.

computed vs methods

Podemos usar `methods` en lugar de `computed`; el efecto es el mismo para ambos, pero `computed` se basa en su caché de dependencias y solo vuelve a obtener el valor cuando la dependencia relevante cambia. En cambio, al usar `methods`, la función siempre se vuelve a llamar y ejecutar al volver a renderizar.

Ejemplo 3

methods: { reversedMessage2: function () { return this.message.split('').reverse().join('') } }

Pruébalo »

Se puede decir que usar `computed` tiene mejor rendimiento, pero si no deseas almacenar en caché, puedes usar la propiedad `methods`.

computed setter

La propiedad `computed` solo tiene getter por defecto, pero si es necesario también puedes proporcionar un setter:

Ejemplo 4

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] } } } }) //Al llamar al setter, `vm.name` y `vm.url` también se actualizan correspondientemente vm.site = 'Tutorial para novatos http://www.example.com'; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url);

Pruébalo »

Según el resultado de ejecución del ejemplo, al ejecutar `vm.site = 'Tutorial para novatos http://www.example.com';`, se llamará al setter, y `vm.name` y `vm.url` también se actualizarán correspondientemente.

Otras extensiones