在Vue项目中，你可以通过以下步骤来使用jsconfig.json文件

1. 在你的Vue项目的根目录下创建一个名为jsconfig.json的文件。

2. 在jsconfig.json中添加以下配置：

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

上述配置的含义是：

• target：指定编译器的目标版本，这里设为ES6。
• module：指定模块的导入导出规范，这里设为ES模块。
• baseUrl：指定相对于jsconfig.json文件的路径。
• paths：用于设置别名，例如@代表src文件夹，可以根据实际情况进行配置。
• exclude：指定需要排除的文件或文件夹，这里排除了node_modules和dist文件夹。

3. 保存jsconfig.json文件。

4. 接下来，你可以在你的Vue项目中使用别名来引用模块。例如，如果你有一个在src文件夹下的components文件夹，并且你在components文件夹中有一个Header.vue组件，你可以使用别名来引用它：

import Header from '@/components/Header.vue';

这里的@符号是之前在jsconfig.json中设置的别名，它指向了src文件夹，所以@/components/Header.vue实际上指向了src/components/Header.vue文件。

需要注意的是，jsconfig.json文件只在开发过程中起作用，对于构建打包后的代码是没有影响的。如果你使用的是Webpack等打包工具，你可能还需要相应的配置来解析别名。

Vue2的双向数据绑定原理及缺陷

利用订阅-开发者模式，vue初始化时会用Object.defineProperty()给data中的每一个属性添加getter和setter,同时创建dep和watcher进行依赖收集与派发更新，最后通过diff算法对比新老vnode的差异，通过patch即时更新。

Vue2使用Object.defineProperty()的缺陷是什么？

1. 一次性递归到底开销很大，如果数据很大，大量的递归导致调用栈溢出
2. 不能监听对象的新增属性和删除属性
3. 当监听的下标对应的数据发生改变时，无法正确的监听数组的方法
4. vue中通过重写了7个能够改变原数组的方法来进行数据监听

简洁说明：

无法对新添加或删除的属性进行监听、无法监听数组的变化

1. pop: 移除并返回数组的最后一个元素。

2. push: 向数组末尾添加一个或多个元素，并返回新数组的长度。

3. shift: 移除并返回数组的第一个元素。

4. unshift: 向数组开头添加一个或多个元素，并返回新数组的长度。

5. reverse: 颠倒数组中元素的顺序（第一个元素变为最后一个，最后一个变为第一个）。

6. sort: 对数组元素进行排序，默认按字符串Unicode码点进行排序。

7. splice: 在指定位置修改数组，可以删除、替换或添加新元素，并返回被删除的元素数组。

vuex的五个状态

//1.存储数据
  state: {

  },

//2.修改数据
  mutations: {

  },

3.运算属性
  getters: {

  },

4.//异步（发送请求） 
  actions: {

  },

5.模块化
  modules: {

  }

使用方法:

存储数据：

  state: {
    name:'张三',
    infodata:{},
  },

访问数据

this.$store.state.name

//推荐在计算属性里面访问

    computed: {
        x_name() {
            return this.$store.state.name
        }
    }

修改数据

定义一个方法，接受2个参数，第一个指向state,第二个是传入的值

  mutations: {
    changname(state, val) {
      state.name = val
    },
    data(state,val){
        state.infodata=val
    }
  },

触发事件通过this.$store.commit('changname', '李四')进行修改，传入2个参数，第一个是函数名，第二个修改的参数会被val接收。

代码示例

<button @click="a">点击发送修改/button>
<script>
export default {
       methods: {
          a() {
            this.$store.commit('changname', '野马')
        }
    },
}

发送请求

     //异步（发送请求） 
    //在顶部引入：import { $_ShopEeller } from '@/apis/index.js'
  actions: {
    async info (infos){ //infos,用于触发mutations里面修改方法
        let res = await $_ShopEeller()
        infos.commit('data',res)//data 定义修改的方法，res=值
    }
  },

页面调用请求

    created() { 
        //页面初始化触发actions里面请求info
        this.$store.dispatch('info')
    },

计算属性

  getters: {
    shoplist(state) {
      let newarr = []
      for (let key of state.goodlist) {
        for (let chil of key.foods) {
          if (chil.valueNum > 0) {
            newarr.push(chil)
          }
        }
      }
      return newarr
    }
  },

调用方法

在计算属性computed内调用，方法：$store.getters.shoplist 有利于性能，当引用的数据发生改变才会重新计算，有缓存性，
接收一个参数，指向state（vuex数据存储的地方）通过state.名字可以访问到，state里面的数据。

    computed: {
        numzj() {
            return this.$store.getters.shoplist
        },
    },

解决办法:

public下面的index.html改成index.ejs就行了

vue.set 是 Vue.js 提供的一个全局方法，用于在响应式对象中新增属性或修改数组的索引值。vue.set 是为了解决 Vue.js 在默认情况下无法检测到对象属性的新增或数组索引的变化而引入的。

vue.set 方法接受三个参数：目标对象、属性名或数组索引、属性值。其用法如下：

Vue.set(target, propertyName/index, value)

• 参数一:需要更新的数组或对象
• 参数二:是数组的下标或者对象的属性名，
• 参数三:是更新的内容

修改数组的方法：（修改下标为2的元素为D）

let arr = ["a","b","c"];
this.$set(arr, 2, "d");

修改对象的方法：(修改name属性值为：李四）

let obj = {
  name: "张三",
  age: 18,
  sex: "男"
};
this.$set(obj, "name", "李四");

新增对象的方法：(修新增身高属性）

this.$set(obj, "height", 180);

{
  name: "李四",
  age: 18,
  sex: "男",
  height: 180
}

新增数组元素

// 假设data中有一个数组变量名为myArray
// 初始化数组
this.myArray = ['item1', 'item2', 'item3'];

// 添加新元素
this.$set(this.myArray, this.myArray.length, 'newItem');

// 现在myArray为['item1', 'item2', 'item3', 'newItem']

在 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（销毁后）：

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

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

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

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

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>