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: 在指定位置修改数组，可以删除、替换或添加新元素，并返回被删除的元素数组。

1.监听页面是否刷新，如果页面刷新了，把state对象存入到sessionStorage或者localStorage中，

2.页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值。

通过调用window.onresize 来实现，当窗口缩放之后，echarts也会重新绘制

window.onresize = function () {
      myChart.resize()
   }

let d1 = new Date(this.lists.joindate);
this.lists.joindate = d1.getFullYear() + "-" + (d1.getMonth() + 1) + "-" + d1.getDate();

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

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

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