Primeiro defina os atributos a serem monitorados nos dados, porque o ouvinte de observação monitora os atributos nos dados e não pode monitorar diretamente o
padrão de exportação da janela { data () { return { screenWidth: document.body.clientWidth, } } }
Chamar a janela para monitorar o evento de redimensionamento em mouted irá disparar mount
() { let that = this; window.addEventListener ("resize", function () { return (() => { window.screenWidth = document.body.clientWidth; that.screenWidth = window.screenWidth; }) (); }); }
Finalmente, você pode monitorar a propriedade creepWidth nos dados do
relógio de relógio: { screenWidth: { handler (newVal, oldVal) { // Para evitar o acionamento frequente da função de redimensionamento e fazer com que a página congele , use o cronômetro se ( ! this.timer) { / / Assim que o valor monitorado screenWidth mudar, reatribua-o a screenWidth nos dados this.screenWidth = newVal; this.timer = true; let that = this; setTimeout (function () { // Imprima o valor alterado do console screenWidth .log (that.screenWidth) that.timer = false; that.contentWidthChange (); // Execute sua própria lógica }, 400) } }, imediato: verdadeiro, } }
Nota: A instância
criada
é chamada depois de ter sido criada. Nesta etapa, a instância concluiu a seguinte configuração: observação de dados, cálculo de atributos e métodos, retorno de chamada de evento de observação / evento, inicialização de dados de dados concluída, el não . No entanto, a fase de suspensão ainda não começou e o atributo $ el não está visível; a suspensão
montada
está concluída, ou seja , o HTML no modelo é renderizado na página HTML e montado será executado apenas uma vez.