Directorio de artículos
1. Instancia de Vue
El uso del marco Vue comienza con la creación de objetos de instancia de Vue. Una página puede verse como compuesta por varios componentes, y cada componente corresponde a una instancia de Vue. La instancia de Vue también se puede considerar como un modo MVVM parcial, que también se compone de tres partes: vista (V), modelo (M) y modelo de vista (VM). Tome la estructura de instancia de Vue más común como ejemplo:
1.1 Creación de instancias y atributo el
Decimos que Vue es en realidad un constructor (genera directamente los resultados de Vue como se muestra a continuación):
Similar a la declaración del constructor de objetos de instancia, la creación de instancias de Vue también toma prestadas newpalabras clave:
new Vue({
// 属性
})
O podemos usar una variable para emprender. Comúnmente utilizado en documentos oficiales vm, vmpor el ViewModelacrónimo, también confirmado desde el lado de una instancia de un objeto que Vue jugó en la vista de componentes es el modelo a seguir (VM). Por supuesto, este nombre de variable no importa, jaja.
let vm = new Vue({
// 属性
})
Después de que se crea cada instancia de Vue, primero es necesario aclarar qué plantilla HTML usará, es decir, para completar el enlace de vista del modo MVVM parcial. El valor de atributo específico utilizado es- el, que puede aceptar un selector de CSS como parámetro (ID, el nombre de clase más común).
<div id="app"></div>
let vm = new Vue({
el:"#app"
})
1.2 atributos de datos y métodos
Por lo general, definimos las propiedades ( property) y los métodos ( method) del componente en el objeto de instancia de Vue correspondiente, es decir, datay las methodspropiedades.
Podemos dataestablecer valores iniciales para las propiedades en la declaración o dataapuntar a un objeto global:
let vm = new Vue({
el:"#app",
data:{
name:"zevin"
}
})
var obj = {
name:"zevin"
}
let vm = new Vue({
el:"#app",
data:obj
})
methodsEn él se definen varios métodos de eventos, que se pueden v-onvincular fácilmente al nodo de destino en la plantilla mediante instrucciones. Por ejemplo, agregamos un evento de clic a la plantilla showTip:
(Se realizará un seguimiento de la vinculación del evento específico, veamos primero la emoción)
<div id="app" v-on:click="showTip">{
{
msg}}</div>
let vm = new Vue({
el:"#app",
data:{
msg:"zevin"
},
methods:{
showTip:function(){
alert(this.msg)
}
}
})
El efecto específico se muestra en la siguiente figura. Aparece un msgcuadro modal que contiene el valor de la variable actual :
2. Ciclo de vida
2.1 Ocho etapas
Al igual que en la vida de una persona, cada instancia de Vue también tiene su propio ciclo de vida. Desde la creación hasta la destrucción, se divide en las siguientes ocho etapas:
① BeforeCreate (ejecutado solo una vez)
antes de la inicialización, las propiedades y métodos en el objeto de instancia no se pueden usar.
② La
inicialización creada (ejecutada solo una vez)se completa y la instancia se crea, puede usar las propiedades y métodos en el objeto de instancia.
③ beforeMount (se ejecuta solo una vez)
Antes del montaje, determine a qué plantilla se aplica la instancia actual y los datos en este momento no se han vinculado a la plantilla.
④ montado (Ejecutado solo una vez) El
montaje está completo, es decir, los datos están vinculados a la plantilla.
⑤ beforeUpdate (ejecutable varias veces)
Antes de que se actualice el DOM virtual, es un grupo con la siguiente etapa actualizada, y se llamará cada vez que se actualice la vista.
⑥ actualizado (ejecutable varias veces)
después de que se actualice el DOM virtual.
⑦ beforeDestroy (ejecutar solo una vez)
antes de la destrucción, la instancia aún se puede usar en este momento
⑧ Después de Destroy (ejecutar solo una vez)
, la instancia no se puede utilizar.
2.2 Función de gancho de ciclo de vida
Cada etapa tiene su propio lugar único, y los usuarios también pueden optar por agregar funciones de enlace de ciclo de vida para cumplir con ciertos requisitos en diferentes etapas. Ahora verifiquemos la ejecución de cada etapa configurando la función de gancho de cada ciclo:
<div id="app"></div>
let vm = new Vue({
el:'#app',
beforeCreate(){
console.log('beforeCreate')
},
created(){
console.log('created')
},
beforeMount(){
console.log('beforeMount')
},
mounted(){
console.log('mounted')
},
beforeUpdate(){
console.log('beforeUpdate')
},
updated(){
console.log('updated')
}
})
Los resultados son los siguientes:
Puede ver que solo se imprimen las primeras cuatro etapas, porque solo se ejecutarán una vez en todo el ciclo de vida de la página. beforeUpdateY updatedno imprimir es solo que no hemos actualizado la vista, así que modifiquemos el código ahora:
<div id="app">
{
{
msg}}
<input type="text" v-model='msg'>
</div>
let vm = new Vue({
el:'#app',
data:{
msg:''
},
beforeCreate(){
console.log('beforeCreate')
},
created(){
console.log('created')
},
beforeMount(){
console.log('beforeMount')
},
mounted(){
console.log('mounted')
},
beforeUpdate(){
console.log('beforeUpdate')
},
updated(){
console.log('updated')
}
})
Agregamos un cuadro de entrada a la vista para cambiar la vista Es obvio en la figura siguiente que la beforeUpdatesuma se imprime cada vez que cambiamos la vista updated.
2.3 Expansión: la incomprensión de las funciones de las flechas
Cuando usamos el marco Vue para escribir código, necesitamos aplicar la función de flecha ES6 en el lugar correcto . Debido a la particularidad de esto en la función de flecha (no this, se thisusará como una variable para buscar el ámbito léxico superior hasta que se encuentre), el uso inadecuado a menudo conduce a una operación anormal del código o incluso a errores. Por ejemplo, los siguientes dos escenarios:
-
Establezca una propiedad de opción (equivalente a el, data) en la instancia para que sea igual a una función anónima:
al igual que la función de enlace del ciclo de vida aquícreated: () => console.log("created"), no debe escribirse en un formulario, de lo contrario, se informaráUncaught TypeError: Cannot read property of undefinedun error. -
Llame al método de instancia del prototipo de Vue fuera de la instancia, como Vue.prototype. $ Watch () para agregar un monitor:
<div id="app">
{
{
msg}}
<input type="text" v-model='msg'>
</div>
let vm = new Vue({
el:"#app",
data:{
msg:""
}
})
vm.$watch('msg',(newValue, oldValue)=>{
console.log(this.msg);
})
Puede ver que msgel valor que cambiamos , la representación en la página es correcta, pero la salida del monitor aquí undefinedse debe a que hemos adoptado el método de escritura de la función de flecha. En este momento, esta función en la flecha apunta al global y no al objeto de instancia de Vue actual vm.
Es normal cambiarlo a una función anónima normal, por lo que no lo demostraré aquí. O mueva el monitor al objeto de instancia y no habrá errores de ninguna manera. (esto apunta al objeto de instancia de Vue actual vm y no se informará ningún error)
let vm = new Vue({
el:"#app",
data:{
msg:""
},
watch:{
msg:(newValue, oldValue)=>{
console.log(newValue, oldValue);
}
}
})
2.4 Icono del sitio web oficial
También hay una imagen larga en el documento del sitio web oficial para presentar el ciclo de vida de la instancia de Vue en detalle. Solo eche un vistazo aquí ...
