O construtor e o ciclo de vida que devem ser aprendidos todos os dias.

Construtor

Cada aplicativo vue.js começa criando uma instância raiz de vue através do construtor Vue:

 var vm = new vue ({// options})

Uma instância do VUE é na verdade o ViewModel descrito no modo MVVM - portanto, o nome da variável VM é frequentemente usado em documentos.

Ao instantar a VUE, você precisa passar em um objeto de opção, que pode conter opções como dados, modelos, elementos de montagem, métodos, ganchos de ciclo de vida etc. Todas as opções podem ser visualizadas na documentação da API.

O construtor Vue pode ser estendido para criar construtores de componentes reutilizáveis com opções predefinidas:

 var myComponent = vue.extend ({// Opções de extensão}) // todas as instâncias `myComponent` serão criadas com opções de extensão predefinidas var myComponentInstance = new MyComponent ()

Embora as instâncias de extensão possam ser criadas imperativamente, na maioria dos casos, o construtor do componente é registrado como um elemento personalizado e depois usado declarativamente no modelo. Explicaremos o sistema de componentes em detalhes posteriormente. Agora você só precisa saber que todos os componentes do vue.js são na verdade instâncias de vue estendidas.

Propriedades e métodos

Cada instância do Vue proxy todas as propriedades em seu objeto de dados:

 var dados = {a: 1} var vm = new vue ({data: data}) vm.a === data.a // -> true // A configuração de propriedades também afetará os dados originais vm.a = 2data.a // -> 2 // ... vice -versa Data.a = 3vm.a // -> 3 3

Observe que apenas esses atributos de proxy são responsivos. Se uma nova propriedade for adicionada à instância após a criação da instância, ela não acionará uma atualização de exibição. Discutiremos o sistema de resposta em detalhes posteriormente.

Além desses atributos de dados, as instâncias do VUE expõem alguns atributos e métodos úteis da instância. Essas propriedades e métodos prefixam $ para distinguir dos atributos de dados do proxy. Por exemplo:

 var dados = {a: 1} var vm = new vue ({el: '#example', dados: dados}) vm. $ data === data // -> truevm. $ el === document.getElementById ('exemplo') // -> true // $ watch é um método de instância vm. mudado})

Consulte a documentação da API para visualizar todas as propriedades e métodos da instância.

Ciclo de vida da instância

Uma instância do Vue possui uma série de etapas de inicialização quando é criado - por exemplo, requer estabelecer observações de dados, modelos de compilação e criação das ligações de dados necessárias. No processo, ele também chamará alguns ganchos do ciclo de vida, oferecendo uma oportunidade de corrida para a lógica personalizada. Por exemplo, o gancho criado é chamado após a criação da instância:

 var vm = new Vue ({Data: {a: 1}, criado: function () {// `this` aponta para o console de instância vm ('a é:' + this.a)}}) // ->" a é: 1 "

Existem também alguns outros ganchos chamados em diferentes estágios do ciclo de vida da instância, como compilados, prontos, destruídos. Esse gancho aponta para a instância do Vue que a chama. Alguns usuários podem perguntar se o vue.js tem o conceito de "controlador"? A resposta é, não. A lógica personalizada do componente pode ser dividida nesses ganchos.

Diagrama do ciclo de vida

A figura a seguir ilustra o ciclo de vida da instância. Você não precisa descobrir tudo imediatamente, mas isso ajudará no futuro.

Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.

O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.