Notes de chapitre Vue.js (détaillées)

Remarques

Concept de Vue.js

Vue.js est actuellement un framework frontal relativement populaire, et React est un framework frontal relativement populaire (en plus de développer des sites Web, React peut également développer des applications mobiles, et la syntaxe Vue peut également être utilisée pour développer des applications de collecte, qui nécessite l'aide de Weex)
Vue.js est l'un des principaux frameworks frontaux, avec Angular.js et React.js, et est devenu les trois principaux frameworks frontaux !
Vue.js est un framework pour la construction d'interfaces utilisateur, se concentrant uniquement sur la couche de vue . Il est non seulement facile à utiliser, mais également facile à intégrer à des bibliothèques tierces ou à des projets existants. (Vue dispose d'une bibliothèque de classes tierces, qui peut être intégrée pour le développement de projets à grande échelle)
Le travail principal du front-end ? Principalement responsable de la couche V dans MVC (le travail principal consiste à gérer l'interface pour créer l'effet de la page frontale)

Ce qui suit est un schéma de la relation entre MVC et MVVM

insérez la description de l'image ici

Quelle est l'idée de componentisation de vue.js ?

Il fournit une abstraction qui nous permet de développer des widgets indépendants et réutilisables pour construire nos applications.
Toute application sera résumée dans une arborescence de composants.

Étapes de base pour l'enregistrement des composants

Créez un constructeur de composant
et appelez la méthode Vue.extend()
Enregistrez le composant
et appelez la méthode Vue.component()
Utiliser des composants
Utiliser des composants dans le cadre d'une instance de Vue

<!-- 最基本的理解 -->
<div id="app">
    <my-cpn></my-cpn>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    //ES6  `abc`可以换行
    //1.创建组件构造器对象
    const cpnC = Vue.extend({
        template:`
         <div>
            <h2>我是标题</h2>
            <p>我是内容</p>
            <p>我是内容，哈哈哈哈哈哈</p>
         </div>`
    })
    //2.注册组件
    Vue.component('my-cpn',cpnC)
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好啊'
        },
        methods:{}
    })
</script>

Composant global : signifie qu'il peut être utilisé sous plusieurs instances de Vue

Composants locaux : montés directement sous l'instance de vue

 const app = new Vue({
        el:'#app',
        data:{
            message:'你好啊'
        },
        methods:{},
        //2.注册组件（局部组件）
        components:{
            //cpn使用组件时的标签名
            cpn:cpnC
        }
    })

composants parent et enfant

Il existe une relation hiérarchique entre les composants
et l'une des relations très importantes est la relation entre les composants parent et enfant

Sucre syntaxique pour l'enregistrement des composants

La façon d'enregistrer les composants ci-dessus peut être un peu lourde
Afin de simplifier ce processus, Vue fournit du sucre syntaxique pour l'enregistrement
La raison principale est que l'étape d'appel de Vue.extend() est omise, mais un objet peut être directement utilisé à la place.

<body>
<div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    //1.全局组件注册的语法糖
    //1.创建组建构造器
    //const cpnC1 = Vue.extend()
    //2.注册全局组件(语法糖)
    Vue.component('cpn1',{
        template:`
        <div>
            <h2>我是标题1</h2>
            <p>我是内容，全局</p>
        </div>`
    })
    //2.注册局部组件的语法糖
    const app = new Vue({
        el:'#app',
        data:{},
        components:{
            'cpn2':{
                template:`
                    <div>
                        <h2>我是标题1</h2>
                        <p>我是内容，局部</p>
                    </div>`
            }
        }
    })
</script>
</body>

Séparation des modèles

Le sucre syntaxique simplifie le processus d'enregistrement des composants Vue, et il existe un autre endroit où la méthode d'écriture est plus gênante, c'est-à-dire la méthode d'écriture du module de modèle.
Si nous pouvons séparer et écrire le html dedans, puis le monter sur les composants correspondants, la structure deviendra inévitablement très claire.
Vue propose deux options pour définir le contenu des modules HTML :
(1) utiliser <script type="text/x-template"></script>
(2) utiliser <template>des balises

Les composants peuvent-ils accéder aux données d'instance de Vue

Un composant est une encapsulation d'un module fonctionnel séparé (ce module a son propre module HTML et devrait également avoir ses propres données)
Les données de l'instance Vue ne sont pas directement accessibles dans le composant
Les composants Vue doivent avoir leur propre emplacement pour enregistrer les données (l'objet composant a également un attribut de données, et peut également avoir des attributs tels que des méthodes, mais cet attribut de données doit être une fonction, et cette fonction renvoie un objet, et l'objet stocke des données à l'intérieur)

Pourquoi l'attribut de données de composant doit être une fonction

Si ce n'est pas une fonction, ils auront beaucoup d'influence l'un sur l'autre.

Les composants parents transmettent des données (accessoires) aux composants enfants

La valeur des props a deux façons :

Un tableau de chaînes, les chaînes du tableau sont les noms lorsqu'ils sont passés.
Objet, le type d'objet peut être défini lors du passage, et la valeur par défaut peut également être définie.

Les composants enfants transmettent des données aux composants parents (événements personnalisés)

Lorsqu'un composant enfant doit transmettre des données à un composant parent, un événement personnalisé est utilisé.
v-on peut être utilisé non seulement pour écouter les événements DOM, mais également pour les événements personnalisés entre composants.

Le flux des événements personnalisés :

Dans les sous-composants, les événements sont déclenchés via $emit().
Dans le composant parent, écoutez les événements du composant enfant via v-on.

jugement conditionnel

1. v-if/v-else-if/v-else
2. La différence entre v-show et v-if

v-show est de changer l'attribut css, et v-if est de déterminer si l'étiquette existe ou non

Méthode d'accès des composants parent-enfant : $children

Le composant parent accède aux composants enfants : use $childrenou $refsreference (référence)
Les composants enfants accèdent aux composants parents : utilisez$parent
this.$childrenest un type de tableau qui contient tous les objets composants enfants.
Ici, nous utilisons une traversée pour extraire l'état du message de tous les sous-composants

fente

Emplacements de composants : pour rendre nos composants packagés plus évolutifs.
Laisser l'utilisateur décider ce que certains contenus à l'intérieur du composant peuvent afficher
Par exemple : la barre de navigation dans le site Web mobile, dans le développement mobile, presque chaque page a une barre de navigation. La barre de navigation doit être packagée en tant que plug-in, tel que le composant nav-bar. Une fois que nous avons ce composant, nous pouvons le réutiliser dans plusieurs pages.
La meilleure façon d'encapsuler est d'extraire les points communs dans les composants et d'exposer les différences sous forme de sockets
Une fois que nous avons réservé un créneau, les utilisateurs peuvent décider quoi insérer dans le créneau en fonction de leurs besoins
S'agit-il d'un champ de recherche, d'un texte ou d'un menu ? à l'appelant de décider

emplacement nommé

Utilisation basique des slots<slot></slot>
La valeur par défaut de l'emplacement<slot>button</slot>
S'il y a plusieurs valeurs, lorsqu'elles sont placées dans le composant pour le remplacement en même temps, elles seront utilisées ensemble comme éléments de remplacement

compiler la portée

Une directive officielle est donnée : tout ce qui se trouve dans le modèle de composant parent sera compilé dans la portée parent ; tout ce qui se trouve dans le modèle de composant enfant sera compilé dans la portée enfant.

Emplacements ciblés : prêts

Le composant parent remplace l'étiquette de l'emplacement, mais le contenu est fourni par le composant enfant.

Spécifications modulaires communes :
CommonJS, AMD, CMD et ES6 Modules
ES6 (export export/import import)

Implémentation modulaire de ES6

Introduisez deux fichiers js dans le code HTML, et le type doit être défini sur module
exporter en a.js

var name = '小明'
var age = 18
var flag = true

function sum(num1,num2) {
    
    
    return num1+num2;
}
if (flag){
    
    
    console.log(sum(20, 10));
}

//1.导出方式一
export {
    
    
    flag,sum
}
//2.导出方式二:
export var num1 = 1000;
export var height = 1.88;
//3.导出函数/类
export function mul(num1,num2) {
    
    
    return num1+num2
}
export class Person {
    
    
    run(){
    
    
        console.log('在蹦包');
    }
}
// class Perosn {
    
    
//
// }
//默认导出(default)
const a = '北京'
export default a

importer dans b.js

//1.导入的是{
    
    }中的定义的变量
import {
    
    flag,sum} from "./aaa.js";

if (flag){
    
    
    console.log('小明是天才,哈哈哈哈哈哈');
    console.log(sum(20, 30));
}

//2.直接导入export定义的变量
import {
    
    num1,height} from "./aaa.js";
console.log(num1);
console.log(height);

//3.导入 export的function
import {
    
    mul,Person} from "./aaa.js";
console.log(mul(30, 50));
const  p = new Person();
p.run();
//4.默认的导入
import aa from "./aaa.js";
console.log(aa);
//5.统一全部导入
import * as aaa from './aaa.js'
console.log(aaa.mul(10, 2));

Qu'est-ce que Webpack ?

Webpack est essentiellement un bundler de modules statiques pour les applications JavaScript modernes.
Comprendre à partir de deux points : modules et packaging
Avant ES6, si nous voulons développer de manière modulaire, nous devons utiliser d'autres outils pour nous permettre de développer de manière modulaire.
Et après avoir terminé le projet par le développement modulaire, il est nécessaire de gérer diverses dépendances entre les modules et de les intégrer et de les empaqueter.
L'un des cœurs de Webpack est de nous permettre de développer de manière modulaire et de nous aider à gérer les dépendances entre les modules.
Et pas seulement les fichiers JavaScript, nos CSS, images, fichiers json, etc. peuvent être utilisés comme modules dans webpack.
C'est le concept de modularité dans webpack.

Quelle est la différence entre grunt/gulp et webpack ?

Grunt/gulp met davantage l'accent sur l'automatisation du processus frontal, et la modularisation n'est pas son cœur.
webpack met davantage l'accent sur la gestion du développement modulaire, et des fonctions telles que la compression et la fusion de fichiers, le prétraitement, etc. sont ses fonctions associées.

installer webpack

Webpack est modularisé et empaqueté. Pour fonctionner normalement, webpack doit s'appuyer sur l'environnement de nœud. Pour que l'environnement de nœud exécute normalement beaucoup de code, il doit contenir divers packages dépendants de l'outil npm (gestionnaire de packages de nœuds)
Pour installer webpack, vous devez d'abord installer Node.js. Node.js est livré avec
les commandes utilisées par l'outil de gestion de packages npm
webpack ./src/main.js -o ./dist/bundle.js
npm init (initialise le projet et génère un fichier package.json)
npm run build (package [besoin de configurer un script "build": "webpack" dans pakeage.json])
npm install [email protected] --save-dev (dépendance au moment du développement)
npm install --save-dev css-loader (vous devez également le configurer dans webpack.config.js après l'installation)
npm install --save-dev style-loader (vous devez également le configurer dans webpack.config.js après l'installation)
npm install --save-dev chargeur d'url

env (environnement)
convertit la syntaxe ES6 en ES5, alors vous devez utiliser babel
dans webpack, nous pouvons directement utiliser le chargeur correspondant à babel
npm install -save-dev babel-loader@7 babel-core babel-preset-es2015
Configurer le webpack .config.js
à reconditionner, vérifiez le fichier bundle.js et constatez que le contenu est devenu la différence entre la syntaxe ES5
el et le modèle.
el est utilisé pour spécifier le DOM à gérer par Vue, ce qui peut aider à analyser les instructions et la surveillance des événements dans celui-ci, etc. Et si le modèle est spécifié dans l'instance de Vue en même temps, le contenu du modèle de modèle remplacera le modèle el correspondant monté.
Installez vue-loader et vue-template-compiler
npm install vue-loader vue-template-compiler --save-dev
Modifiez le fichier de configuration de webpack.config.js : ...
empaquetez le fichier index.html dans le dossier dist, cette fois Vous pouvez utiliser le plug-in HtmlWebpackPlugin
Le plug-in HtmlWebpackPlugin peut faire ces choses pour nous :
-Générer automatiquement un fichier index.html (vous pouvez spécifier un modèle à générer)
-Insérer le fichier js empaqueté dans le corps automatiquement via le balise de script
Installez le plug-in HtmlWebpackPlugin :
npm install html-webpack-plugin --save-dev
Modifiez les plugins dans le fichier webpack.config.js :...
js compressé Plugin
- ici, nous utilisons un plugin tiers uglifyjs-webpack-plugin, et le numéro de version spécifie 1.1.1, ce qui est cohérent avec CLI2 -npm
install uglifyjs-webpack-plugin @1.1.1 --save-dev
pour construire un serveur local
npm install --save-dev [email protected]
devserver est également une option dans webpack, l'option elle-même peut définir ce qui suit attributs :
-contentBase : pour celui-ci Le dossier fournit des services locaux. La valeur par défaut est le dossier racine. Ici, nous devons renseigner ./dist
-port : numéro de port
-inline : actualisation de la page en temps réel
- historyApiFallback : dans la page SPA , s'appuyer sur le mode historique de HTML5
- nous pouvons en configurer un autre Les scripts :–open paramètre signifie ouvrir le navigateur directement

Qu'est-ce que Vue CLI

Si vous écrivez simplement quelques programmes Vue Demo, vous n'avez pas besoin de Vue CLI. Si vous développez un grand projet, vous avez besoin et devez utiliser Vue CLI
Lorsque vous utilisez Vue.js pour développer des applications à grande échelle, nous devons prendre en compte des éléments tels que la structure du répertoire de code, la structure et le déploiement du projet, le chargement à chaud, les tests unitaires de code ; si chaque projet doit effectuer ces tâches manuellement, c'est sans aucun doute moins efficace , donc généralement Nous utiliserons des outils d'échafaudage pour aider le Seigneur à accomplir ces choses
CLI est Command-Line-Interface, traduit par interface de ligne de commande, mais communément appelé échafaudage
Vue CLI est une version officielle de l'échafaudage du projet vue.js
Utilisez vue-cli pour créer rapidement un environnement de développement Vue et la configuration Webpack correspondante
Installation globale de Webpack : npm install webpack -g

instructions d'installation de désinstallation de vue-cli

//Désinstaller la version avant 3.0
npm uninstall -g vue-cli
yarn global remove vue-cli
//Désinstaller la version après 3.0 (vous pouvez utiliser cette commande pour désinstaller)
npm uninstall -g @vue/cli
yarn global remove @vue/ cli

Installez la dernière version :

npm install -g @vue/cli
ou
yarn global add @vue/cli

Afficher tous les numéros de version :

//Interroger les versions avant 3.0
npm afficher les versions vue-cli --json
//Interroger les versions après 3.0
npm afficher les versions @vue/cli --json

Installez la version spécifiée :

//Installer la version 2.9.6
npm install -g [email protected]
yarn global add [email protected]
//Installer la version 4.0.5
npm install -g @vue/[email protected]
yarn global add @vue/[email protected]

Afficher le numéro de version actuel et les informations d'aide :

vue -V ou vue --version
vue -h ou vue --help

Installez la version de Vue CLI3. Si vous souhaitez initialiser le projet à la manière de Vue CLI2, vous pouvez installer un outil de pontage globalement.

npm install @vue/cli-init -g

Projet d'initialisation Vue CLI2
vue init webpack my-project
Projet d'initialisation Vue CLI3
vue create my-project

vue toute la famille : VueCore (vue core) + vue-router + vuex

La différence entre Runtime-Compiler et Runtime-only

Dans le développement ultérieur, si vous utilisez toujours le modèle, vous devez choisir Runtime-Compiler.
Si vous utilisez le dossier .vue pour le développement dans le développement ultérieur, vous pouvez choisir Runtime-only

Découvrez Vue CLI3

Il y a une grande différence entre vue-cli 3 et la version 2.
Vue-cli 3 est basé sur webpack 4. Vue-cli 2 est toujours webpack 3. Le
principe de conception de vue-cli 3 est '0 configuration', et la suppression le fichier de configuration se trouve dans le répertoire racine Oui, des répertoires tels que build et config.
Vue-cli 3 fournit des commandes vue ui, fournit une configuration visuelle et est plus convivial.
Suppression du dossier statique, ajout d'un nouveau dossier public et déplacement de l'index .html en public

Où est passée la configuration de Vue CLI3 ? Vous pouvez voir la modification via vue ui

Fonctions fléchées ES6

Comment cela se trouve-t-il dans la fonction flèche ?

Recherchez cette couche par couche dans la portée externe jusqu'à ce qu'il y ait une définition de cela.
La fonction de flèche n'a pas this, et le this à l'intérieur pointe vers la portée où elle a été définie.
Le this d'une fonction ordinaire est déterminé par la portée dynamique, qui pointe toujours vers son appelant direct. Si la fonction n'a pas d'appelant direct, il s'agit de window. En mode strict, si la fonction n'a pas d'appelant direct, celle-ci est indéfinie.
En utilisant cela, vous n'avez pas à vous soucier de la fonction que vous utilisez, de la fonction flèche ou autre chose. C'est une bonne méthode, et vous n'avez pas à vous soucier des différences de pointage du navigateur.

Qu'est-ce que le routage (Vue Router) ?

Le routage est un terme en ingénierie de réseau.
Le routage est l'activité de transfert d'informations d'une adresse source à une adresse de destination via un réseau interconnecté. -Wikipédia
Euh, qu'est-ce que c'est ? n'ai pas compris
Le routeur fournit deux mécanismes : le routage et la livraison
Le routage est la détermination du chemin emprunté par un paquet de la source à la destination
Le transfert déplace les données d'une entrée vers la sortie appropriée
Il existe un concept très important dans le routage appelé table de routage
La table de routage est essentiellement une table de mappage, qui détermine la direction du paquet de données.
Le routage consiste à afficher différents contenus ou pages selon différentes adresses url
Le cœur du routage frontal est le suivant : modifiez l'URL, mais la page ne s'actualise pas dans son ensemble.
Routage backend : le backend gère la relation de mappage entre les URL et les pages.

Qu'est-ce que le rendu frontal ? Qu'est-ce que le rendu back-end (rendu côté serveur) ?

Rendu frontal : la majeure partie du contenu de la page Web affichée dans le navigateur est exécutée par le code js écrit par le frontal dans le navigateur et la page Web finalement rendue. (On peut également dire : le backend renvoie les données JSON et le frontend utilise le modèle html pré-écrit pour lire les données JSON dans une boucle, en épissant les chaînes et en insérant la page.) Rendu du backend : le serveur produit et restitue directement la page HTML correspondante et
la renvoie au client pour qu'elle l'affiche. Par exemple : page jsp

Séparation du front-end et du back-end : avec l'émergence d'Ajax, il existe un modèle de développement de séparation du front-end et du back-end ; le back-end ne fournit qu'une API pour renvoyer les données, et le front-end obtient les données via Ajax, et peut rendre les données dans la page via JavaScript ; et lorsque le terminal mobile (ios/Android) apparaît, le backend n'a pas besoin d'effectuer de traitement, il suffit d'utiliser l'ensemble d'API précédent

`$router$route`la différence entre

$routerSi VueRoutervous souhaitez naviguer vers une URL différente pour l'instance, utilisez $router.pushla méthode
$routequi peut être obtenue dans l'objet de saut de routeur actuelpath、query、name 、params

keep-alive rencontre vue-router

keep-alive est un composant intégré de Vue, qui peut conserver l'état du composant contenu ou éviter un nouveau rendu.
Ils ont deux propriétés très importantes :
include - chaîne ou regex, seuls les composants correspondants seront mis
en
cache les composants correspondant au chemin seront mis en cache.

Qu'est-ce que la Promesse ?

Une fonctionnalité très utile dans ES6 est que Promise
Promise是异步编程的一种解决方案
utilise généralement Promise comme une opération asynchrone pour encapsuler lorsqu'il y a des opérations asynchrones
. Lors de l'entrée dans la fonction de rappel, deux paramètres seront transmis, résoudre et rejeter, qui sont eux-mêmes des fonctions.

Promesse trois états

Après le fonctionnement asynchrone promis, il y aura trois états, qui sont
en attente (état d'attente), par exemple, une demande réseau est en cours ou le temporisateur n'a pas expiré.
fullfill (état satisfait), lorsque nous rappelons activement resolve,
nous sommes dans cet état et nous rappellerons. )

Rappeler

Passez une fonction en tant que paramètre dans une autre fonction, puis rappelez la fonction après l'avoir passée

Composition et principe de Vuex

Composition : communication entre les composants, accès global via le magasin
Modification : le seul moyen est de commettre une mutation (synchrone) ou d'envoyer une action (asynchrone)
Raccourci : introduire mapState, mapGetters, mapActions

Explication officielle : Vuex est un modèle de gestion d'état spécialement développé pour les applications Vue.js.

Il prend 集中式存储管理l'état de tous les composants de l'application et applique des règles pour s'assurer que l'état change de manière prévisible.
Vuex est également intégré à l'outil de débogage officiel de Vue devtools extension, fournissant des fonctions de débogage avancées telles que le débogage du voyage dans le temps sans configuration, l'importation et l'exportation d'instantanés d'état, etc.

Devtools est un plugin de navigateur

Extraire un objet de magasin commun pour enregistrer l'état partagé entre plusieurs composants
Placez l'objet store dans le nouvel objet Vue, afin qu'il puisse être utilisé dans tous les composants
Vous pouvez utiliser l'état enregistré dans l'objet magasin dans d'autres composants ( this.$store.state.accéder à l'état via la méthode de propriété this.$store.commit('mutation中方法')pour modifier l'état)

Concept de base de Vuex

État (arbre d'état unique de données)
Getters (lorsque les données du composant sont modifiées puis utilisées par d'autres composants, les getters ne peuvent pas transmettre de paramètres par défaut. Si vous souhaitez transmettre des paramètres, vous pouvez uniquement laisser les getters eux-mêmes renvoyer une autre fonction) Mutations
( state Update : Le seul moyen de mettre à jour l'état de Vuex (submit Mutation) comprend principalement deux parties : 1. Le type d'événement (type) de la chaîne 2. Un gestionnaire de fonction de rappel, le premier paramètre de la fonction de rappel est l'état. Modules
Actions (Actions asynchrones (Promise))

Règles de réponse de mutation

L'état dans le magasin de Vuex est réactif. Lorsque les données de l'état changent, le composant Vue sera automatiquement mis à jour.
Cela nous oblige à respecter certaines règles correspondant à Vuex :
initialiser les propriétés requises dans le magasin à l'avance.
Lors de l'ajout de nouvelles propriétés aux objets dans l'état, utilisez la méthode suivante :
Méthode 1 (use Vue.set(obj, 'newProp ' , 123))
méthode 2 (réassigner l'ancien objet avec le nouvel objet)

Fonction de synchronisation des mutations

Normalement, Vuex exige que les méthodes de notre Mutation soient des méthodes synchrones.
La raison principale est que lorsque nous utilisons des devtools, les devtools peuvent nous aider à capturer des instantanés de mutations.
Mais s'il s'agit d'une opération asynchrone, devtools ne pourra pas savoir quand l'opération sera terminée.

Qu'est-ce qu'Axios ?

Axios est une bibliothèque HTTP basée sur des promesses, c'est-à-dire qu'elle peut envoyer des requêtes get et post.

Caractéristiques d'Axios

XMLHttpRequests peut être envoyé dans le navigateur
Vous pouvez envoyer des requêtes http dans node.js
API de promesse de soutien
Intercepter les demandes et les réponses
Transformer les données de requête et les données de réponse
Possibilité d'annuler les demandes
Convertir automatiquement les données JSON
Support client pour se protéger contre les attaques XSRF

Dans quel scénario Axios est-il utilisé ?

Comme mentionné dans la fonctionnalité, Axios peut être utilisé pour envoyer des requêtes à partir de navigateurs ou de Node.js. Des projets comme Vue, React, Node, etc. peuvent utiliser Axios. Si vous utilisez Jquery dans votre projet, vous n'avez rien à faire de plus pour le moment, jquery lui-même peut envoyer des requêtes.

En parlant de CSS

display: flex; flex-wrap: wrap;(Enveloppe : détermine le nombre à afficher en fonction de la largeur d'une ligne, la valeur par défaut est maintenant l'enveloppe sans habillage)
justify-content: space-around;(score égal)

Modificateur pour v-on(@)

Modificateur .native : Lorsque nous devons surveiller l'événement natif d'un composant, nous devons ajouter le modificateur .native à l'événement correspondant à surveiller

Problèmes avec les zones de défilement Better-Scroll

Lorsque Better-Scroll décide du nombre de zones pouvant défiler, il est déterminé en fonction de la propriété scrollerHeight
Surveillez si chaque image est chargée, tant qu'une image est chargée, exécutez refresh () une fois
Comment contrôler que le chargement de l'image est terminé ? Images de surveillance js natives : img.onload = function() {}
Écoute dans Vue : @load = 'method'
Appelez refresh() de scroll

Anti-secousse anti-rebond/accélérateur

La fonction anti-shake debounce/throttle
anti-shake fonctionne :
si nous exécutons le rafraîchissement directement, la fonction de rafraîchissement sera exécutée 30 fois.
Vous pouvez passer la fonction de rafraîchissement dans la fonction anti-rebond pour générer une nouvelle fonction

effet plafond

Lorsque vous l'obtenez, tabControl的offsetTopvous devez savoir jusqu'où vous avez défilé, et cela commencera à avoir un effet de plafond