Prefacio
Los atributos calculados se utilizan para describir la expresión declarativa de que un valor depende de otros valores. Cuando vincula los datos a una propiedad calculada en una plantilla, VUE actualiza el DOM cuando cualquier valor que dependa hace que la propiedad calculada cambie. Esta característica es muy poderosa, puede hacer que su código sea más declarativo, basado en datos y fácil de mantener.
Las expresiones en las plantillas son muy convenientes, pero en realidad solo se usan para operaciones simples.
La plantilla es describir la estructura de la vista. Poner demasiada lógica en la plantilla hará que la plantilla sea demasiado pesada y difícil de mantener.
Es por eso que Vue.js limita las expresiones de unión a una expresión,
Si se requiere más de una expresión, se deben usar propiedades calculadas.
Echemos un vistazo a este simple ejemplo
<div id = "Ejemplo"> a = {{a}}, b = {{b}} </div> var vm = new Vue ({// La razón para nombrar VM es que esto es realmente vm en mvvm el: '#Example', Data: {a: 1}, calculado: {// A BeTter para el atributo B: function () devuelve esto.a + 1}}})Resultado de salida:
a = 1, b = 2
Aquí declaramos una propiedad calculada b. La función que proporcionamos se utilizará como obteniendo la propiedad vm.b.
console.log (vm.b) // -> 2vm.a = 3console.log (vm.b) // -> 3
Puede unir las propiedades calculadas en una plantilla como si vinculara una propiedad normal. Vue sabe que VM.B depende de VM.A, por lo que cuando VM.A cambia, los enlaces que dependen de VM.B también se actualizarán. Y lo mejor es que creamos esta dependencia declarativamente: los obtenedores de las propiedades calculadas son limpios y no tienen efectos secundarios, por lo que también son fáciles de probar y comprender.
Si desea observar los cambios de datos en las instancias VUE, puede usar un método proporcionado por Vue.js $watch .
<div id = "Demo"> {{fullName}} </div> var vm = new Vue ({data: {FirstName: 'foo', LastName: 'Bar', FullName: 'Foo Bar'}}) vm. $ Watch ('FirstName', function (val) {this.fullName = ValeNe this.lastName}) vm. $ watch ('lastName', function (val) {this.fullName = this.firstname + '' + val}) Sin embargo, el método anterior también se puede implementar utilizando computed :
var vm = new Vue ({Data: {FirstName: 'foo', lastName: 'Bar'}, calculado: {fullName: function () {return this.firstname + '' ' + this.lastName}}}) ¿Es más fácil escribir de esta manera? ¿No hay un código duplicado innecesario? El funcionario también fomenta el uso de métodos computed .
Cuando hablé sobre computed anteriormente, se mencionó que este método proporciona el método get predeterminado. Entonces, ¿hay set ?
// ... Compute: {fullName: {// getter get: function () {return this.firstname + '' ' + this.lastName}, // setter set: function (newValue) {var nombres = newValue.ssplit (' '' ') this.firstName = nombres [0] this.lastName = nombres [nombres.lenggth - 1]}} // Si llamamos vm.fullName = 'John Doe' , se llamará setter . vm.firstName y vm.lastName también tendrán actualizaciones correspondientes. Este método es útil a veces.
Resumir
Lo anterior se trata de atributos de computación Vue.js. Espero que este artículo sea útil para todos. El editor también actualizará el contenido sobre Vue.js uno tras otro. Los amigos interesados pueden seguir siguiendo a Wulin.com.