Princípio recente aprofundado
Já falamos sobre a maior parte do conteúdo básico e agora falaremos sobre o conteúdo subjacente. Um dos recursos mais significativos do vue.js é o sistema de resposta - o modelo é apenas um objeto normal e modificando que ele atualizará a visualização. Isso torna o gerenciamento do estado muito simples e intuitivo, mas entender seus princípios também é importante e pode evitar alguns problemas comuns. Em seguida, começaremos a cavar profundamente os detalhes subjacentes do sistema de resposta vue.js.
Como rastrear mudanças
Passando um objeto normal para a instância do VUE como sua opção de dados, o vue.js atravessará suas propriedades e os converterá para getter/setter com object.DefineProperty. Este é um recurso ES5 e não pode ser implementado com patches. É por isso que o vue.js não suporta o IE8 e diminui.
Os usuários não podem ver getters/setters, mas internamente permitem que o vue.js rastreie as dependências, notificando as alterações quando as propriedades são acessadas e modificadas. Um problema é que a formatação Getter/Setter é diferente ao imprimir objetos de dados no console do navegador e o uso do método da instância VM. $ Log () pode obter uma saída mais amigável.
Cada ligação de instrução/dados no modelo possui um objeto de observador correspondente, que registra os atributos como dependências durante o processo de cálculo. Depois disso, quando o setter dependente for chamado, o recálculo do observador será acionado, o que também fará com que suas instruções associadas atualizem o DOM.
Problema de detecção de alteração
Devido às restrições de ES5, o Vue.js não pode detectar a adição ou remoção das propriedades do objeto. Como o vue.js converte a propriedade para getter/setter ao inicializar a instância, a propriedade deve estar no objeto de dados para permitir que o vue.js o converta para torná -lo responsivo. Por exemplo:
var dados = {a: 1} var vm = new vue ({data: data}) // `vm.a` e` data.a` agora são v.b responsivos = 2 // `vm.b` não são dados responsivos.b = 2 //` data.b` não é responsivoNo entanto, existe uma maneira de adicionar atributos após a criação de instância e torná -la responsiva.
Para instâncias de Vue, você pode usar o método $ set (chave, value):
vm. $ set ('b', 2) // `vm.b` e` data.b` agora são responsivosPara objetos de dados normais, o método global vue.set (objeto, chave, valor):
Vue.set (dados, 'c', 3) // `vm.c` e` data.c` agora são responsivos
Às vezes, você deseja adicionar algumas propriedades a um objeto existente, como usar object.assign () ou _.extend () para adicionar propriedades. No entanto, novas propriedades adicionadas ao objeto não acionam atualizações. No momento, você pode criar um novo objeto, incluindo as propriedades do objeto original e as novas propriedades:
// Não use `object.assign (this.someObject, {a: 1, b: 2})` this.someObject = object.assign ({}, this.someObject, {a: 1, b: 2})Existem também alguns problemas relacionados à matriz que foram discutidos na renderização da lista antes.
Inicializar dados
Embora o vue.js forneça uma API para adicionar dinamicamente atributos de resposta, recomenda -se declarar todos os atributos de resposta nos objetos de dados.
Não faça isso:
var vm = new Vue ({modelo: '<div> {{msg}} </div>'}) // adicione `msg`vm. $ set ('msg', 'hello!')Faça isso:
var VM = new Vue ({Data: {// declara `msg` msg: ''}, modelo: '<div> {{msg}}} </div>'}) // então defina` msg`vm.msg = 'hello!'Existem duas razões para fazer isso:
1. O objeto de dados é como um esquema do estado do componente. A declaração de todas as propriedades nela facilita a compreensão do código do componente.
2. Adicionar uma propriedade de resposta de nível superior força todos os observadores a se recalcularem porque não existia antes e nenhum observador o rastreia. Esse desempenho geralmente é aceitável (especialmente em comparação com as verificações sujas do Angular), mas pode ser evitado na inicialização.
Fila de atualização assíncrona
O vue.js padrão para atualizar assíncrono o DOM. Sempre que as alterações de dados são observadas, o Vue inicia uma fila para armazenar em cache todas as alterações de dados no mesmo loop de evento. Se um observador for disparado várias vezes, ele será empurrado apenas para a fila uma vez. Aguarde até o próximo loop do evento, o Vue limpará a fila e executará apenas as atualizações de dom. O MutationObServer é preferido em filas assíncronas internas, e o setTimeout (FN, 0) é usado se não for suportado.
Por exemplo, com vm.somedata = 'new Value', o DOM não será atualizado imediatamente, mas atualizará na próxima vez que o loop do evento limpar a fila. Basicamente, não precisamos nos preocupar com esse processo, mas isso ajudará se você quiser fazer algo depois que o status DOM for atualizado. Embora o vue.js incentive os desenvolvedores a seguir a abordagem orientada a dados e evitar modificar diretamente o DOM, às vezes o faz. Para aguardar o vue.js concluir a atualização do DOM após as alterações dos dados, você pode usar o vue.nextTick (retorno de chamada) imediatamente após as alterações dos dados. O retorno de chamada é chamado após a conclusão da atualização do DOM. Por exemplo:
<div id = "exemplo"> {{msg}} </div>
var vm = new vue ({el: '#example', dados: {msg: '123'}}) vm.msg = 'nova mensagem' // modifique dados vm. $ el.textContent === 'nova mensagem' // false.nextTick (function) {vm.Este método de instância é mais conveniente porque não requer vue global, e esse retorno de chamada está automaticamente vinculado à instância atual do Vue:
Vue.component ('exemplo', {modelo: '<pan> {{msg}} </span>', dados: function () {return {msg: 'não atualizado'}}, métodos: {updatemessage: function () {this.msg = '' atualizada '>l). () {console.log (this. $ el.textContent) // => 'atualizado'})}}})O segredo dos atributos de computação
Você deve observar que as propriedades computadas do vue.js não são simples getters. As propriedades computacionais rastreiam continuamente suas dependências de resposta. Ao calcular uma propriedade calculada, o Vue.js atualiza sua lista de dependência e armazena em cache os resultados. Os resultados em cache são inválidos apenas quando uma das dependências muda. Portanto, desde que a dependência não mude, o acesso à propriedade calculada retornará diretamente o resultado em cache em vez de chamar getter.
Por que cache? Suponha que tenhamos uma propriedade de computação de alto consumo A, que vai iterar através de uma matriz gigante e fazer muitos cálculos. Em seguida, pode haver outras propriedades computadas que dependem de A. Se não houver cache, chamaremos o getter de A muitas vezes, mais do que o necessário.
Como a propriedade computada é armazenada em cache, o getter nem sempre é chamado ao acessá -la. Considere o seguinte exemplo:
var VM = new Vue ({Data: {msg: 'hi'}, computado: {exemplo: function () {date.now () + this.msg}}})Exemplo de propriedade computada tem apenas uma dependência: vm.msg. Date.now () não é uma dependência de resposta, porque não tem nada a ver com o sistema de observação de dados da Vue. Portanto, ao acessar o VM.Example, o registro de data e hora permanecerá inalterado, a menos que vm.msg alterem.
Às vezes, espero que o getter não altere o comportamento original e chama Getter toda vez que eu acessar vm.example. Neste momento, o cache pode ser desligado para o atributo computado especificado:
computado: {exemplo: {cache: false, get: function () {retorna date.now () + this.msg}}}Agora, toda vez que você acessa vm.example, o registro de data e hora é novo. No entanto, o acesso a JavaScript é assim; A ligação de dados ainda é conduzida por dependências. Se o atributo calculado {{Exemplo}} estiver vinculado no módulo, o DOM só será atualizado se a dependência da resposta mudar.
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
Para tutoriais nos componentes vue.js, clique no tutorial de aprendizado de componentes do Tópico Especial Vue.js para aprender.
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.