cycle de vie
Les grandes étapes du cycle de vie de Vue : 4 avant, 4 éd, créer, charger, mettre à jour, détruire
N'oubliez pas de dire les mots :
Exécuter les 4 premières fonctions de hook de cycle de vie pour la première fois,
Le modèle est rendu une fois monté,
L'ordre du cycle de vie des composants parent et enfant (les trois premiers dans le composant parent, les quatre premiers dans le composant enfant et le quatrième dans le composant parent)
// 生命周期/* */
// 初始化阶段（不常用），拿不到data中的数据
beforeCreate() {
// 创建实例前
},
created() {
// 发送ajax请求，获取数据，赋值data，渲染
},
// 挂载阶段
beforeMount() {
},
// 可以拿到dom元素，进行性dom操作
mounted() {
},
// 更新阶段 （触发它的更新，数据变化，dom元素新增或者删除）
beforeUpdate() {
},
updated() {
},
// 销毁阶段
// vue2:::
// beforeDestroy(){
// },
// destroyed(){
// }
// vue3:::
// 这两个钩子函数需要 触发页面的才可以看到执行
// 可以在这个阶段，清除定时器，或者一些全局的函数
// 想看到效果，需要销毁这个组件， 可以在父组件中销毁这个组件
beforeUnmount() {
},
unmounted() {
}computed :{} attribut calculé (prix total +-*/)
-
// Gère une logique complexe pour le traitement des données dans les données (ressemble à une méthode, utilise comme un attribut, calcule un attribut)
-
Les attributs de calcul mettront en cache les résultats traités après le traitement des premières données. Tant que les données dépendantes resteront inchangées, elles seront lues à partir du cache pour une utilisation future.
-
Les propriétés calculées sont mises en cache et les méthodes sont exécutées tant qu'elles sont appelées (les propriétés calculées économisent les performances)
-
Lisible et immuable, get set peut être modifié et lisible
//1.只能读，不能写
computed:{
revserMsg(){
console.log('烦死了');
return this.msg.split('').reverse().join('')
}
}
//2.这样写，可读可写
get **必选**:会在计算属性再第一次被调用或者是在依赖的数据改变之后会自动执行
并且返回一个处理好的结果
set **可选**:set里面必须有一个形参 这个形参就是计算属性修改之后的值
什么时候被调用:就是再计算属性处理好的值 被修改的时候调用
computed: {
// 这样写，可读不可写
// fullName(){
// return
// }
// 这样写，可读可写
fullName:{
get(){
return this.first+this.las
},
set(val){
console.log(val);
this.first = val.split('')[0]
this.las = val.split('')[1]
}
}
}watch : {} listener : écoutez les données dans les données, et lorsque les données changent, elles se déclenchent pour exécuter une logique
-
Scénario d'utilisation : effectuez des opérations asynchrones ou coûteuses lorsque les données changent.
-
Watch ne prend pas en charge la mise en cache. Lorsque la propriété correspondante change, la réponse est exécutée.
-
Utilisez la surveillance pour écouter les modifications apportées aux données. Les attributs de la surveillance doivent être les données qui existent déjà dans les données à ce stade.
-
简写： watch:{ 你要监听的data数据(newval，oldval){ 你的逻辑 } }
1. La fonction de rappel exécutée lorsque les données surveillées par la méthode du gestionnaire changent
2. La montre ne se déclenchera pas au premier chargement. Si nous voulons déclencher, nous devons utiliser l'attribut immedate pour activer le premier moniteur de charge
3, et la montre ne surveillera pas le changement de la propriété de l'objet par défaut . Si nous voulons surveiller le changement de la propriété de l'objet, nous pouvons utiliser deep
//监听器watch使用
<div id="app">
<!-- <input type="text" v-model="firsttext">
+
<input type="text" v-model="secondtext">
=
{
{sumtext}} -->
<input type="text" v-model="user.firsttext">
+
<input type="text" v-model="user.secondtext">
=
{
{user.sumtext}}
</div>
</html>
<script src="./lib/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
// firsttext:'',
// secondtext:'',
// sumtext:''
user: {
firsttext: '哈',
secondtext: '黑',
sumtext: ''
}
}
},
watch: {
// // 简单写法（侦听器：侦听属性）
// 1.
// firsttext: function (newval,oldval) {
// this.sumtext = newval + this.secondtext
// console.log(this.newval);
// },
// secondtext: function(newval,oldval){
// this.sumtext = this.firsttext + newval
// }
// 2.打点写法，层次多麻烦
// 'user.firsttext':function(newval,oldval){
// this.user.sumtext = newval + this.user.secondtext
// },
// 'user.secondtext':function(newval , oldval){
// this.user.sumtext = this.user.firsttext + newval
// }
// 复杂写法（深层侦听器：懒执行，添加立即执行即可解决）
user: {
// 开启深层监听器
deep: true,
// 强制回调函数立即执行
immediate: true,
// handler监听的数据改变的时候执行的回调函数
handler(newval,oldval){
this.user.sumtext = newval.firsttext + newval.secondtext
}
}
}
}).mount('#app')
</script>filter : {} filter : traite certaines données (pas dans la V3, les propriétés calculées peuvent être remplacées)
Filtre partiel : formatez et affichez le contenu sans modifier les données d'origine, mais il n'aura d'effet que sur les données comprises dans sa propre plage
<div id="app">
<!-- {
{ data数据 | 过滤器名}} -->
{
{time | newTime}}<br>
<!-- {
{ data数据 | 过滤器名(传递的值可以多个)}} -->
{
{msg | newMsg(' --- ','爱')}}<br>
<!-- {
{ data数据 | 过滤器名(传递的值可以多个) | 对前边的数据操作}} -->
{
{ msg | newMsg(' --- ','爱') | newNewMsg }}
</div>
<script src="./lib/vue.js"></script>
<!-- <script src="./lib/vue.global.js"></script> -->
<script>
let app = new Vue({
data() {//数据
return {
time: 1314521,
msg: 'hello world'
}
},
methods: {//方法
},
computed: {//计算属性
},
watch: {//侦听器
},
filters: {//过滤器
newTime(val) {// 传进的前一个值。默认值val
// 将时间戳转换成日期对象,转换成日期对象
return new Date(val).toLocaleString()
},
// newMsg(){
// return '哈哈哈哈哈'
// }，
newMsg(val) {
return val.split('').reverse().join('')
},
newMsg(val,x,y) {//val是默认的，是你处理的元素，x是reverseMsg的参数...val后可传递多个
return val.split('').reverse().join(x)+y
},
newNewMsg(){
return '哈哈哈哈哈'
}
},
compontent: {//全局组件
compontents: {//局部组件：带s
}
}
})
app.$mount("#app")
</script>Filtre global : le formatage et l'affichage du contenu sans modifier les données d'origine prendront effet pour toutes les données de localisation du projet en cours
// 全局过滤器filter
// Vue.filter("过滤器的名字",(你要过滤器的数据)=>{
// return 你的逻辑
// })
Vue.filter("xiaoming",(val)=>{
if(val.length>3){
return val.substr(0,3)+"..."
}else{
return val
}
})algorithmes v-for et virtual dom et diff
-
v-forLe comportement par défaut est d'essayer de modifier l'élément sur place au lieu de le recréer (mise à jour sur place)-
Comment faire fonctionner dom : faites défiler la nouvelle structure DOM virtuelle, comparez avec l'ancienne structure DOM virtuelle, essayez de réutiliser les balises pour mettre à jour le contenu en place
-
-
dom virtuel
-
En fait, il ne s'agit que d'une couche d'abstraction du DOM réel. L'arbre est basé sur des objets JavaScript (nœuds VNode), et les propriétés des objets sont utilisées pour décrire les nœuds. Enfin, l'arbre peut être mappé sur le vrai DOM. l'environnement par une série d'opérations
-
Avantages : améliorez les performances de la mise à jour du DOM, utilisez le vrai DOM rarement, trouvez la partie modifiée en mémoire, puis mettez à jour le vrai DOM (correctif)
DOM est très lent, ses éléments sont très volumineux et les problèmes de performances de la page sont principalement causés par de vrais nœuds DOM causés par des opérations DOM. Même le div le plus simple contient de nombreux attributs
Le coût d'exploitation du DOM est toujours élevé et des opérations fréquentes entraîneront toujours des gels de page, ce qui affectera l'expérience de l'utilisateur. Utilisez donc un dom virtuel.
-
Idées de mise en œuvre : les options de contexte (signification des attributs) de tous les objets dans Vue pointent vers l'instance de Vue, donc dans Vue, les balises du modèle #app doivent être traitées par Vue dans des objets DOM virtuels avant d'être rendues et affichées sur le réel Page DOM
-
-
algorithme de différence
-
Comment l'algorithme diff compare-t-il l'ancien et le nouveau DOM virtuel ? :
-
-
comparaison entre pairs
-
L'élément racine a changé : supprimer et reconstruire l'arborescence DOM
-
L'élément racine n'a pas changé, mais les attributs ont changé : réutilisation du DOM, ne mettre à jour que les attributs
-
Est-ce que v-for a : key=" "
-
L'identifiant unique du DOM virtuel
-
Sans clé, v-for maximisera les mises à jour sur place et réutilisera les éléments du même type
-
Avec l'attribut key, l'algorithme diff comparera en fonction de votre valeur de clé : il équivaut à l'insertion directe, ce qui améliore l'efficacité de la mise à jour
-
-