const obj = {}
obj.age = 18

const arr = ['a', 'b', 'c']
arr[0] = 'd'

// const obj = {}
// obj.age = 18
// 解决
this.$set(this.obj, 'age', 19)
Vue.set(this.obj, 'age', 19)

// const arr = ['a', 'b', 'c']
// arr[0] = 'd'
// 解决
this.$set(this.arr, 0, 888)
// 使用数组的变更方法
this.arr.splice(0, 1, 888)

const form = new FormData()
form.append('avatar', e.target.files[0])

<input type="file" hidden id="file" />
<img id="img" alt="" />
<button id="btn">click</button>
<script>
  btn.onclick = function () {
    file.click()
  }
  file.onchange = function (e) {
    const f = e.target.files[0]

    const formData = new FormData()
    formData.append('avatar', f)
    // axios({ url: '/xxx', data: formData })
    /* const s = URL.createObjectURL(f)
       img.src = s */
    const fileReader = new FileReader()
    // 图片 => base64
    fileReader.readAsDataURL(f)
    fileReader.onload = function () {
      img.src = this.result
    }
  }
</script>

// mock/index.js
Mock.mock('/api/users', 'get', (req, res) => {
  // 通过 req 拿到前端的信息
  // 根据此信息返回对应的数据（Mock 的数据）
  res.send({ mock 的数据 })
})

// main.js
import './mock'

this.$children[0].changeAge(this.age)

// 非 props 属性
this.$attrs

export default class EventBus {
  constructor() {
    this.subs = {}
  }
  // 订阅 => 订阅的是一个回调函数
  on(eventType, callback) {
    this.subs[eventType]
      ? this.subs[eventType].push(callback)
      : (this.subs[eventType] = [callback])
  }
  // 发布 => 发布事件让其（事件）对应的回到函数执行
  emit(eventType, ...args) {
    this.subs[eventType].forEach((callback) => callback(...args))
  }
}

function isFn(flag) {
  return ['a', 'b', 'c', 'DELETE'].includes(flag)
}

<button v-if="isFn('DELETE')">删除</button>

// #1 Call 式继承 / 构造函数继承：继承的是属性
Person.call(this, name, age)
// #2 原型继承：继承的是方法
Star.prototype = new Person()
Star.prototype.constructor = Star
// 组合继承 = 构造函数继承 + 原型继承

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  say() {
    console.log('!!!')
  }
}
class Star extends Person {}
const s = new Star('尼古拉斯', 40)
console.log(s.name, s.age)
s.say()

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  say() {
    console.log('!!!')
  }
}
class Star extends Person {
  // 儿子有 constructor 一定要有 super，有 constructor 的目的是为了添加 Star 自己的属性
  constructor(name, age, money) {
    super(name, age)
    this.money = money
  }
}
const s = new Star('尼古拉斯', 40, 1000)
console.log(s.name, s.age, s.money)
s.say()

// ..........JSON.stringify 的确点............

// 1. 会忽略值为 undefined、函数、Symbol
// 2. 当值为 bigint 或循环引用的时候会报错
// 3. 日期会被转成字符串、正则会被转成空对象
// 4. ...

它们都是用来进行浅拷贝的，好的地方是能拷贝 undefined、函数、Symbol、正则...

// const copy = (target) => {
//   const type = Object.prototype.toString.call(target)
//   // 正则、日期
//   if (/(regexp|date)/i.test(type)) return new target.constructor(target)
//   // 错误对象
//   if (/error/i.test(type)) return new target.constructor(target.message)
//   // 函数
//   if (/function/i.test(type)) return new Function('return ' + target.toString())()
//   // null 和 简单数据类型
//   if (target === null || typeof target !== 'object') return target
//   // 数组和对象
//   /* const arr = []
//   const obj = {} */
//   const result = new target.constructor()
//   for (const attr in target) {
//     result[attr] = copy(target[attr])
//   }
//   return result
// }

// const copy = (target, m = new Map()) => {
//   const type = Object.prototype.toString.call(target)
//   // 正则、日期
//   if (/(regexp|date)/i.test(type)) return new target.constructor(target)
//   // 错误对象
//   if (/error/i.test(type)) return new target.constructor(target.message)
//   // 函数
//   if (/function/i.test(type)) return new Function('return ' + target.toString())()
//   // null 和 简单数据类型
//   if (target === null || typeof target !== 'object') return target
//   // 数组和对象
//   /* const arr = []
//   const obj = {} */
//   // #2 m 里面存储了 target 就直接返回
//   // console.log(target, 233)

//   if (m.get(target)) return m.get(target)
//   const result = new target.constructor()
//   // #3
//   m.set(target, result)

//   for (const attr in target) {
//     // #4 传递 m
//     result[attr] = copy(target[attr], m)
//   }
//   return result
// };

const o = _.cloneDeep(obj1)

// 是什么？
// 防抖和节流都是性能优化的一种手段。
// 防抖：持续触发不执行，不触发的一段时间后才执行。
// 节流：持续触发也执行，只不过，执行的频率变低了。
// 实现一个？
// 匈牙利命名法的简版
// 类型 + 具体的含义
// const iNum = 8
// const bBar = false
// const aDiv = document.querySelctorAll('div')
// 把鼠标相对于盒子位置放到盒子里面
/*  oDiv.onmousemove = function (e) {
       let x = e.pageX - this.offsetLeft
       let t = e.pageY - this.offsetTop
       this.innerHTML = `x: ${x}, y: ${t}`
     }; */

// 防抖一下
/* let timer = null
    oDiv.onmousemove = function (e) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        let x = e.pageX - this.offsetLeft
        let t = e.pageY - this.offsetTop
        this.innerHTML = `x: ${x}, y: ${t}`
      }, 200)
    }; */
// 封装一个防抖/节流函数？
/* const debounce = (callback, time) => {
      let timer = null
      return function (e) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          callback.call(this, e) // window.callback(e)
        }, time)
      }
    } */

/* oDiv.onmousemove = _.debounce(function (e) {
      let x = e.pageX - this.offsetLeft
      let t = e.pageY - this.offsetTop
      this.innerHTML = `x: ${x}, y: ${t}`
    }, 200) */
// 生活中的例子？
// 王者荣耀英雄回城是防抖还是节流
// 打散弹枪，节流

// 应用场景？
// 根据输入的内容请求接口？防抖
// 获取窗口缩放的大小，滚动位置？节流

// 实际开发怎么做？
oDiv.onmousemove = _.throttle(function (e) {
  let x = e.pageX - this.offsetLeft
  let t = e.pageY - this.offsetTop
  this.innerHTML = `x: ${x}, y: ${t}`
}, 1000)

const p = new Promise((resolve, reject) => {
  reject(new Error('233'))
})
p.catch((r) => {
  console.log(r)
  // return Promise.resolve(undefined)
}).then((r) => {
  console.log(r)
})

Promise.all([p1, p2]).then((r) => {
  // r => [p1 的结果, p2 的结果]
})

// const p1 的结果 = await p1
// const p2 的结果 = await p2

// 需求：双向数据绑定（数据变了，视图改变；视图改变，数据也变）

const data = {
  name: 'ifer'
}

/* const tempData = { ...data }
    Object.defineProperty(data, 'name', {
      get() {
        // 获取 name 的时候会走这儿
        return tempData.name
      },
      set(newValue) {
        // 设置 name 的时候会走这儿
        tempData.name = newValue
      }
    })

    // console.log(data.name) // 'ifer'
    data.name = 'elser'
    console.log(data.name) */

/* const tempData = { ...data }
    Object.defineProperty(data, 'name', {
      get() {
        // 获取 name 的时候会走这儿
        return tempData.name
      },
      set(newValue) {
        // model => view => Data bindings
        // #2 设置 name 的时候会走这儿
        tempData.name = newValue
        oP.innerHTML = newValue
        oInput.value = newValue
      }
    })

    // view => model => DOM Listeners
    oInput.oninput = function (e) {
      // #1
      data.name = e.target.value
    } */

/* oInput.oninput = function (e) {
      oP.innerHTML = e.target.value
    } */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <p id="oP"></p>
    <input id="oInput" type="text" />
    <script>
      // 需求：双向数据绑定（数据变了，视图改变；视图改变，数据也变）

      const data = {
        name: 'ifer',
        address: '北京'
      }

      /* const tempData = { ...data }
    Object.keys(data).forEach(key => {
      Object.defineProperty(data, key, {
        get() {
          return tempData[key]
        },
        set(newValue) {
          tempData[key] = newValue
          oP.innerHTML = newValue
          oInput.value = newValue
        }
      })
    })
    oInput.oninput = function (e) {
      data.address = e.target.value
    } */

      // 上面 Vue2 的问题：如果 data 里面有 100 个属性，那可不是要循环 100 次吗？

      // p 就是一个代理，我对 p 的任何操作都会影响到 data
      const p = new Proxy(data, {
        get(target, attr) {
          // 获取的时候触发
          // console.log(target, attr)
          // target => data
          // attr => 属性
          return target[attr]
        },
        set(target, attr, newValue) {
          target[attr] = newValue
          oP.innerHTML = newValue
          oInput.value = newValue
        }
      })
      // p.name = 'xxx'
      // console.log(data.name);

      /* p.name = 'xxx'
    console.log(p.name) */

      oInput.oninput = function (e) {
        // p.address = e.target.value
        p.test = e.target.value
      }
    </script>
  </body>
</html>

Vue.use({
  install(Vue) {
    // 干了哪些事情
    Vue.mixin()
    Vue.component()
    Vue.directive()
    Vue.prototype.bus = new Vue()
  }
})
Vue.use(function (Vue) {})

<template>
  <div>User {{ $route.params.id }}</div>
</template>

<script>
  export default {
    name: 'User',
    created() {
      console.log(this.$route.params.id)
    },
    watch: {
      $route(newRoute) {
        console.log(newRoute.params.id)
      }
    }
  }
</script>

<router-view :key="$route.fullPath"></router-view>

JSON.parse('{ "ID": 9007199254740999 }')

JSON.parse('{ "ID": "90071992547409998888888888888888" }')

import jsonBigInt from 'json-bigint'
// transformResponse
axios.create({
  transformResponse(data) {
    data => JSON 格式的字符串
    // 默认
    // return JSON.parse(data)
    // 内部用一种算法，如果是大数字转出来的是一个对象，这个对象里面的信息经过运算可以得到大数字
    return jsonBigInt.parse(data)
  }
})