在 Vue.js 2.x 中，有八个生命周期钩子函数，它们按照组件的创建、更新和销毁阶段被依次调用

1. beforeCreate（创建前）：

在实例被创建之前调用。这个阶段，组件的数据和方法还未初始化，无法访问到组件实例的属性。

2. created（创建后）：

在实例被创建之后调用。在这个阶段，组件的数据和方法已经初始化完成，可以访问组件实例的属性。

3. beforeMount（挂载前）：

在组件被挂载到 DOM 之前调用。在这个阶段，模板已经编译完成但尚未渲染到页面。

4. mounted（挂载后）：

在组件被挂载到 DOM 后调用。在这个阶段，模板已经编译完成并且已经渲染到页面上，可以进行 DOM 操作。

5. beforeUpdate（更新前）：

在组件更新之前调用。在这个阶段，组件的数据发生了变化，但 DOM 尚未重新渲染。

6. updated（更新后）：

在组件更新之后调用。在这个阶段，组件的数据已经变化并且 DOM 已经重新渲染完毕。

7. beforeDestroy（销毁前）：

在组件销毁之前调用。在这个阶段，组件实例仍然完全可用，可以进行一些清理操作。

8. destroyed（销毁后）：

在组件销毁之后调用。在这个阶段，组件实例已经被销毁，无法再访问到组件实例的属性和方法。

这些生命周期函数允许你在不同的阶段执行代码，从而能够处理一些特定的逻辑，比如在创建阶段初始化数据、在挂载阶段发起数据请求、在更新阶段执行一些计算或请求等。通过对这些生命周期的合理利用，可以更好地控制和管理组件的行为和状态。

$nexttick 的详细说明:

$nexttick 是一个异步编程的概念，常见于一些 JavaScript 框架和库中，比如 Vue.js 和 React.js。它允许你推迟一个函数的执行，以便在当前的 JavaScript 代码块执行完成之后再执行该函数。这对于处理一些需要在 UI 更新后执行的操作非常有用。

在 JavaScript 中，所有代码都运行在一个单线程的事件循环中。事件循环负责不断从消息队列中取出任务并执行它们。通常情况下，JavaScript 会按照代码的顺序一次执行任务，中途不会插入其他任务。这就意味着，如果有一个耗时较长的任务，它会阻塞其他任务的执行。

这时，$nexttick 就派上了用场。它的主要作用是将一个回调函数推迟到下一个事件循环中执行，而不是立即执行。这样，当前代码块的执行可以顺利完成，不会被耗时较长的任务阻塞。

在 Vue.js 和 React.js 中，$nexttick 通常用于处理 DOM 的更新。当你修改了 Vue.js 或 React.js 组件中的数据或状态时，框架会进行异步的 DOM 更新。而有时你可能需要在 DOM 更新完成后执行一些操作，比如获取元素的尺寸、操作真实的 DOM 元素等。这时你可以把这些操作放在 $nexttick 的回调函数中，确保在 DOM 更新完成后再执行它们。

值得注意的是，$nexttick 并不是 JavaScript 的原生 API，它是一些框架和库提供的特定方法。因此，具体的使用方式和语法可能会有所差异。在 Vue.js 中，你可以使用 Vue.nextTick(callback) 来注册一个 $nexttick 回调函数。在 React.js 中，你可以使用 ReactDOM.nextTick(callback) 来实现类似的功能。

$nexttick 的简单理解:

$nexttick 允许你推迟一个函数的执行，以确保在当前的 JavaScript 代码块执行完成之后再执行该函数。它常见于一些 JavaScript 框架和库中，用于处理异步操作和 DOM 的更新。

简单来说，$nexttick 就是让某个函数在 JavaScript 的事件循环中的下一个周期执行，而不是立即执行。这样可以避免长时间运行的函数阻塞主线程，保证其他任务的执行。在一些前端框架中，它常用于确保在 DOM 更新完成后再执行一些额外的操作。例如，在改变 Vue.js 或 React.js 组件的数据或状态后，你可以使用 $nexttick 来确保在 DOM 更新完毕后再进行一些操作，比如获取元素的尺寸或操作真实的 DOM 元素。

// 使用 Object.assign() 进行浅拷贝
this.form = Object.assign({}, row)

// 使用展开操作符 ... 进行浅拷贝
this.form = { ...row }

调用接口出现 Netword Error 表示未授权

解决办法:
1.检查网络是否错误
2.检查接口名，请求方式，请求参数是否正确
3.以上都无错误，表示接口授权问题

宽度计算属性

width: calc(100% + 43px);

Vue中有很多表单事件可以用来监听表单元素上的交互事件，常见的表单事件包括：

1. input：监听输入框输入的事件，包括键盘输入和复制粘贴操作；

2. change：监听表单元素的值改变的事件，例如下拉框、单选框或复选框的选择；

3. submit：监听表单提交时的事件；

4. blur：在一个元素失去焦点时触发该事件，例如离开输入框；

5. focus：在一个元素获得焦点时触发该事件，例如标签被点击或通过Tab键移动到元素上。

与这些事件相对应，Vue也提供了对应的事件处理函数，你可以在Vue组件中使用这些事件的处理函数来响应用户的操作。下面是一些示例：

<template>
  <div>
    <input v-model="message" @input="inputHandler" type="text">
    <span>输入内容: {{ message }}</span>

    <select v-model="selected" @change="changeHandler">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
    <span>选择的内容: {{ selected }}</span>

    <form @submit.prevent="submitHandler">
      <input type="text">
      <button type="submit">提交</button>
    </form>

    <input type="text" @blur="blurHandler">
    <input type="text" @focus="focusHandler">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      selected: ''
    }
  },
  methods: {
    inputHandler: function(event) {
      console.log(event.target.value); //input值发生改变执行
    },
    changeHandler: function(event) {
      console.log(event.target.value);
    },
    submitHandler: function() {
      console.log('提交表单');
    },
    blurHandler: function() {
      console.log('失去焦点');
    },
    focusHandler: function() {
      console.log('获得焦点');
    }
  }
}
</script>

注册自定义指令，全局可用，可以自己写指令里面的逻辑 directive使用方法

1.在main.js中

Vue.directive("border", {
  inserted(dom, val) {
    console.log(dom, val);
  }
})

2.dom代表当前dom节点，val代表传入的值 v-border="3"

3.使用方法 v-border 可传入参数 v-border="3"

<p v-border="3">{{ 8 | twoZero }}</p>

当组件用的地方比较多时，可以注册全局组件

1.注册方法，在main.js中 引入组件

import XzgButton from '@/components/XzgButton.vue'

2.挂在到全局

Vue.component("XzgButton", XzgButton)