Cómo implementar la solución Mixins en el mini programa WeChat
En el proceso de desarrollo nativo de pequeños programas, descubrí que varias páginas usaban casi la misma lógica. Debido a que el miniprograma no proporciona oficialmente un mecanismo de reutilización de código Mixins, solo podemos usar un método de copiar y pegar de muy bajo nivel para "reutilizar" el código.
Qué son los Mixins
Mixins se traduce literalmente como "mezclar". Como sugiere el nombre, consiste en mezclar código reutilizable en el código actual. Si está familiarizado con VueJS, debe saber que proporciona una mayor reutilización de código, desacopla módulos duplicados y hace que el mantenimiento del sistema sea más fácil y elegante.
Echemos un vistazo a cómo usar Mixins en VueJS.
//Definir un objeto mixin
var myMixin = {
creado: función () {
this.hello()
},
métodos: {
hola.función () {
console.log('¡hola desde mixin!')
}
}
}
}
// Definir un componente que utilice esta mezcla
var Componente = Vue.extend({
mixins: [myMixin]
})
var componente = nuevo Componente() // = > "¡Hola desde mixin!"
En el código anterior, primero se define un objeto llamado myMixin, que define algunas funciones y métodos del ciclo de vida. Luego inyéctelo directamente en el nuevo componente a través de mixins: [myMixin], y el nuevo componente obtendrá los métodos de myMixin.
Ahora que comprendes qué son los mixins, puedes comenzar a implementarlos en tus subprogramas.
El mecanismo de los Mixins
Los Mixins también tienen algunos pequeños detalles a los que se debe prestar atención, es decir, el orden de ejecución de los eventos del ciclo de vida. En el ejemplo anterior, definimos el método creado() en myMixin, que es un evento del ciclo de vida en VueJS.
¿Qué sucede si definimos el método creado () en un nuevo componente Componente?
var Component = Vue.extend({
mixins: [myMixin],
creado: función () {
consola. log('¡hola desde el componente!')
}
})
var componente = nuevo componente()
// =
// ¡Hola desde mixin!
Puedes ver el resultado de la ejecución
Además de la función del ciclo de vida, también puedes ver los resultados de la mezcla de atributos del objeto:
/ / Definir un objeto mixin
const myMixin = {
data () {
return {
mixinData: 'datos de mixin'
}
}
}
// Definir un componente que utilice este mixin
var Component = Vue.extend( {
mixins: [myMixin],
datos () {
retorno {
componenteData: 'datos de componente'
}
},
montado () {