Vue语法基础-CSDN博客

本文链接：https://blog.csdn.net/weixin_60968779/article/details/125055811

生命周期

  beforeCreate() {
    // 一般会结合  混入 使用
  },
  created() {
    // 可以使用 vue数据
    // 一般可以用来做一些ajax的请求
  },
  mounted() {
    console.log(this.$el === app);
    // 可以获取到真实DOM元素 echarts swiper 百度地图 
    this.timer = setInterval(() => {
      console.log('ok');
    }, 1000)
  },
  beforeUpdate() {
    console.log(beforeUpdate);
  },
  updated() {
    console.log('');
  },
  // 销毁的钩子函数中 我们一般会做一些清除动作
  // 组件销毁之后 是 切断数据的双向绑定
  beforeDestroy() {
    clearInterval(this.timer)
  },
  destroyed() {
    
  },

nextTick原理

首先 nextTick是为了做出一个异步操作，这里利用了事件池，把用户传给nextTick的回调函数放 (实际是在用户的回调函数的基础上又套了一层函数) 到事件池中，放完之后，让pending变成true，让一个timerFunc函数执行，这个timerFunc函数里面调用了一个异步（优先使用微任务没有再用宏任务）函数，在异步函数中执行了 flushCallbacks，flushCallbacks执行的时候就是把pending 变成了 false；让事件池中所有函数挨个执行并且清空了事件池；

pending的作用: 第一次执行nextTick的时候吊起了异步（不管怎么底都要等同步执行完成），也就是说下边的nextTick调用不会再启用新的异步了知识单纯的向事件池中添加事件

子组件未使用就是一个普通对象，只有当组件使用的时候才会把这个对象中的配置转换成对应的实例

父子组件生命周期执行顺序

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

总结：

1.beforeCreate执行时：data和el均未初始化，值为undefined

2.created执行时：Vue 实例观察的数据对象data已经配置好，已经可以得到data的值，但Vue 实例使用的根 DOM 元素el还未初始化

3.beforeMount执行时：data和el均已经初始化，但此时el并没有渲染进数据，el的值为“虚拟”的元素节点

4.mounted执行时：此时el已经渲染完成并挂载到实例上

5.beforeUpdate和updated触发时，el中的数据都已经渲染完成，但只有updated钩子被调用时候，组件dom才被更新。
————————————————

Vuex

作用: 解决组件间的数据交互

<template>
  <div>
    {{ $store.state.count }}
    {{ a }}
    <!-- {{ $store }} -->
    <button @click="add">+</button>
    <button @click="minux">-</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  methods: {
    // add() {
    //   this.$store.commit('add')
    // },
    // sub() {

    // },
    ...mapMutations(['add', 'minux']) // 使用辅助函数
  },
  computed: {
    // count() {
    //   return this.$store.count
    // },
    // ...mapState(['count']) 数组写法
    ...mapState({
      a: 'count'
    })
  }
}
</script>

<style scoped lang="less">
</style>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 看传递的参数中能不能找到一个 install的方法 找到就执行 没找到
// 再去查看 参数是不是一个函数 是函数就执行
// 其他不管
export default new Vuex.Store({
  state: {
    // 放置的是以写公用数据
    count: 100
  },
  mutations: {
    // 放置的都是用来改变数据的方法
    // 这里面的函数 必须是一些同步函数 // 原则（不是技术限制）
    add(state, option = 10) {
      state.count += option
    },
    minux(state) {
      state.count -= 3
    },
    // asyncAdd(state) {
    //   setTimeout(() => {
    //     state.count += 120
    //   }, 1000);
    // }
  },
  actions: {
    asyncAdd(store, option) {
      // store 就是new 出来的vuex实例
      setTimeout(() => {
        state.count += 120
      }, 1000);
    }
  },
  modules: {
    // abc // 简写
  }
})


// modules 模块举例
/* let abc = {
  state: { abc: 100 },
  // getters: {},
  // mutations: {},
  // actions: {},
  // modules: {}
} */