useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  }, [count]);

useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

const [state, dispatch] = useReducer(reducer, initialState);
const { count, step } = state;

useEffect(() => {
  const id = setInterval(() => {
    dispatch({ type: 'tick' }); // Instead of setCount(c => c + step);
  }, 1000);
  return () => clearInterval(id);
}, [dispatch]);

const initialState = {
  count: 0,
  step: 1,
};

function reducer(state, action) {
  const { count, step } = state;
  if (action.type === 'tick') {
    return { count: count + step, step };
  } else if (action.type === 'step') {
    return { count, step: action.step };
  } else {
    throw new Error();
  }
}

useEffect(()=>{
    fetchData()
})

const [data,setData] = useState()

useEffect(()=>{
    const fetchData = async() => {
        const res = await fetchNewData()
        setData(res.data)
    }
    fetchData()
},[data])

function SearchResults() {
  const [query, setQuery] = useState('react');

  // ✅ Preserves identity until query changes
  const getFetchUrl = useCallback(() => {
    return 'https://hn.algolia.com/api/v1/search?query=' + query;
  }, [query]);  // ✅ Callback deps are OK

  useEffect(() => {
    const url = getFetchUrl();
    // ... Fetch data and do something ...
  }, [getFetchUrl]); // ✅ Effect deps are OK

  // ...
}

class EventEmitter {
    constructor(){
        this.events={};
    }
    on(type,handler){
        if(!this.events[type]){
            this.events[type]=[]
        }
        this.events[type].push(handler)
    }
    addListener(type,handler){
        this.on(type,handler)
    }
    prependListener(type,handler){
        if(!this.events[type]){
            this.events[type]=[]
        }
        this.events[type].unshift(handler)
    }
    removeListener(type,handler){
        if(!this.events[type]){
            return;
        }
        this.events[type]=this.events[type].filter(item=>item !== handler)
    }
    off(type,handler){
        this.removeListener(type,handler)
    }
    emit(type,...args){
        if(!events[type]||events[type].length==0){
            return;
        }
        this.events[type].forEach(item=>{
            Reflect.apply(item,this,args);
        })
    }
    once(type,handler){
        function temp(...args){
            handler(args)
            this.off(type,handler)
        }
        this.on(type,temp)//为事件注册单次监听器
    }
}

let myImage=(function(){
    let ImageNode = document.createElement('img')
    document.body.appendChild(ImageNode)
    return function(src){
        ImageNode.src = src
    }
})()
let proxyImage = (function(){
    let img = new Image
    img.onload=function(){
        myImage(this.src)
    }
    return function(){
        myImage('file://C:/Users/sevenaeng/Desktop/loading.jpg')
        img.src=src
    }
})()
proxyImage('http://imgcache.qq.com/music/a.jpg')

//虚拟代理合并http请求
let synchronusFile = function(id){
    console.log('开始同步文件,id为:'+id)
}
let proxySynchronousFile=(function(){
    let cache = [],timer;
    return function(){
        cache.push(id)
        if(timer){
            return;
        }
        timer=setTimeout(function(){
            synchronusFile(cache.join(','))//两秒内向本体发送需要同步的ID集合
            clearTimeout(timer)
            timer=null
            cache.length=0//清空ID集合
        },2000)
    }
})()
let checkbox = document.getElementsByTagName('input')
for(let i=0;c;c=checkbox[i++]){
    c.onclick=function(){
        if(this.checked === true){
            proxySynchronousFile(this.id)
        }
    }
}

//缓存代理计算乘积
let mult =function(){
    let a = 1
    for(let i=0;i<arguments.length;i++){
        a= a*arguments[i]
    }
    return a
}
//缓存代理工厂
let createProxyFactory=function(fn){
    let cache={}
    return function(){
        let args = Array.prototype.join.call(arguments,',')
        if(args in cache){
            return cache[args]
        }
        return cache[args]=fn.apply(this,arguments)
    }
}
let proxyMult = createProxyFactory(mult)

//以/api/开头的不用权限，配置成功了express-jwt这个中间件，就可以把解析出来的用户信息挂载到req.user上
app.use(expressJWT({
    secret:secretkey,
    algorithms: ['HS256'],
    }).unless({path:[/^\/api\//]}))

{
    path:'/problem',
    name:'problem',
    component:resolve=>require(['../pages/problemList'],resolve)
}

routes:[{
       path:'/',
       name:"通讯录",
       component:()=>Promise.resolve(import("../components/contact/contact.vue"))
   },
]

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{
		require.ensure(['@/components/HelloWorld'],()=>{
			resolve(require('@/components/HelloWorld'))
		})
	}
Vue.use('Router')
export default new Router({
	routes:[{
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
	}]
})

configureWebpack:{
      plugins:[
        require('unplugin-element-plus/webpack')({

        }),
   	]
   }

configureWebpack:{
    plugins:[
      require('unplugin-element-plus/webpack')({

      }),
        //代码压缩
      new UglifyJsPlugin({
        uglifyOptions:{
          compress:{
            drop_debugger:true,
            drop_console:true,
            pure_funcs:['console.log']
          }
        },
        sourceMap:false,
        parallel:true
      })
    ],
  },

const cors=require('cors')
const io=require('socket.io')(server,{
    //服务端配置cors
    cors: {
        origin: "https://coloey.github.io"
      }
})

module.exports = {
    devServer: {
        open: true,
        host: 'localhost',
        port: 8000,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: { //配置跨域
            '/security': {
                target: 'http://127.0.0.1:8000/', //要代理到的api地址
                ws: true,
                changOrigin: true, //允许跨域
                pathRewrite: {
                    '^/security/': '/security' 
                }
            }
        }
    }
}

let proxyObj = {};
proxyObj['/ws'] = {
    ws: true,
    target: "ws://localhost:8081",//目标服务器
};
proxyObj['/api'] = {
    ws: false,
    target: "http://localhost:8081",
    changeOrigin: true,
    pathRewrite: {
        '^/api': '/api'
    }
};
module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: proxyObj

location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html|txt|pdf|) {
   root /usr/local/nginx/html/;#所有静态文件直接读取硬盘
   expires 30d; #缓存30天
} 

...
export default createStore({
  state: {
    ...
  },
  mutations,
  actions,
  getters,
  plugins: [
    persistedState({
      key: "state",
      render(state) {
        return state.msg;
      },
    }),
  ], //默认使用localStorage存储数据
});

socket.on("disconnect", () => {
   console.log(`${socket.id}断开连接`);
   delete onlineUsers[fromUser];
 });

const handler = () => {      
      const username = JSON.parse(window.localStorage.getItem("userInfo")).username
      console.log('刷新',username)
      //刷新页面时，socket.io主动断开连接，因此如果localStorage里面有用户信息，则可以直接再为用户初始化一个socket对象，加入onlineUsers,
      if(username){
        nextTick(()=>{
          CHAT.init(username,true)
        })
      }
    }
    onMounted(()=>{
      //监听刷新事件
       window.addEventListener('load',handler)
       CHAT.message(store.state.userInfo.username)
    })
    onUnmounted(()=>{
      //卸载刷新事件
      window.removeEventListener('load',handler)
    })

init: function (username, flush = false) {
    socket = io("http://127.0.0.1:3007", {
      "force new connection": true,
    });
    socket.on("open", function () {
      //如果
      console.log("已连接");
      //console.log(`client:${socket.connected}`);
      //刷新成功后，重新建立socket连接，但是message方法是同步的，这时候socket还是undefined,
      //因此要在刷新后成功建立连接后再监听服务端发过来的信息，才会成功建立新的socket连接
      if (flush) {
        socket.on(username, function (obj) {
          console.log("CHAT.msgArr", obj);
          store.commit("ChangeMsg", obj);
        });
        flush = false;
      }
    });
    socket.emit("addUser", username);
  },
...
message: function (username) {
    socket.on(username, function (obj) {
      console.log("CHAT.msgArr", obj);
      store.commit("ChangeMsg", obj);
    });
  },
...

//改变聊天信息
   ChangeMsg(state,obj){
       state.msg.push(obj);
   },

const UglifyJsPlugin=require('uglifyjs-webpack-plugin')
module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
    ? '/Vue-chat/'
    : '/' ,
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // use the full build with in-browser compiler?
    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    // compiler: false,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    //代码压缩
    configureWebpack:{
      plugins:[
        new UglifyJsPlugin({
          uglifyOptions:{
            compress:{
              drop_debugger:true,
              drop_console:true,
              pure_funcs:['console.log']//删除console.log语句
            }
          },
          sourceMap:false,
          parallel:true
        })
      ],
    },
    // vue-loader 配置项
    // https://vue-loader.vuejs.org/en/options.html
    // vueLoader: {},
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: true,
    // css相关配置
    //  css: {
    // //  // 是否使用css分离插件 ExtractTextPlugin
    //     extract: true,
    //  // 开启 CSS source maps?
    //     sourceMap: false,
    // //  // css预设器配置项
    //     loaderOptions: {
    //       css:{},//这里的选项会传递给css-loader
    //       postcss:{}//这里的选项会传递给postcss-loader
    //     },
    // //  // 启用 CSS modules for all css / pre-processor files.
    //     requireModuleExtension: false
    //  },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,// 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
    // 是否启用dll
    // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
    // dll: false,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {
      open: process.platform === 'darwin',
      disableHostCheck: true,
      port:8081,
      https: false,
      hotOnly: false,
      
     before: app => {}
    },
    
    // 第三方插件配置
    pluginOptions: {
     // ...
    }
   }
  

routes:[{
      path:'/',
      name:"通讯录",
      component:()=>Promise.resolve(import("../components/contact/contact.vue"))

  },

import ElemtPlus from 'element-plus'

import {Button,Input,Table,TableColumn,MessageBox} from 'element-plus'

const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/Vue-chat/" : "/",
  // 输出文件目录
  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  configureWepeack:{
    plugins:[
      AutoImport({
        resolvers:[ElementPlusResolver()],
      }),
      Components({
        resolvers:[ElementPlusResolver()]
      })
    ]
  },
 
  productionSourceMap: true,
};

npm i compression-webpack-plugin -D

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }

set(target,key,newValue){
            //如果是只读的打印警告信息
            if(isReadOnly){
                console.warn(`属性${key}是只读的`)
            }
            //获取旧值
            const oldValue=target[key]
            //如果代理目标对象是数组，则检测被设置的索引值是否小于数组长度
            //如果是，则为SET操作，否则为ADD操作
            const type=Array.isArray(target)
                        ?Number(key)<length?'SET':'ADD'
                        :Object.prototype.hasOwnProperty.call(target,key)?'SET':'ADD'
           
            //设置属性值
            const res=Reflect.set(target,key,receiver,newValue)
            //说明receiver是target的代理对象
            if(target===receiver.raw){
                //比较新值和旧值，只有当它们不全等并且都不是NAN才触发响应
                if(oldValue!==newValue&&(oldValue===oldValue||newValue===newValue)){
                   //假如设置数组length属性为0，会影响数组元素，因此要触发新的响应
                    trigger(target,key,type,newValue)
                }
            }
            
            return true;
        }

function trigger(target,key){
    const depsMap=bucket.get(target)
    if(!depsMap)return
    const effects=depsMap.get(key)
    const effectsToRun=new Set(effects)
    //当操作类型是ADD或者DELETE,需要触发与length相关的副作用函数执行
    if(type==='ADD'||type==='DELETE'){
        const iterateEffects=depsMap.get('length')
        lengthEffects&&lengthEffects.forEach(effectfn=>{
            if(effectfn!==activeEffect){
                effectsToRun.add(effectfn)
            }
        })
    }
    effects&&effects.forEach(effectfn=>{
        if(activeEffect!=effectfn){//只有当trigger触发执行的副作用函数和当前正在执行的副作用函数不相同时才触发执行，否则会出现栈溢出
            effectsToRun.add(effectfn)
        }
    })   
    effectsToRun.forEach(effectfn=>effectfn())
    //effect&&effect.forEach(fn=>fn())//会产生无限执行
}

function reactive(obj){
    //每次调用reactive时都会创建新的代理对象
    return createReactive(obj)
    
}

//当参数Obj是相同的不用创建新的代理对象
//存储原始对象到代理对象的映射
const reactiveMap=new Map()
function reactive(obj){
    //优先通过原始对象obj查找之前创建的代理对象，如果找到了，直接返回已有的代理对象
    const existionProxy=reactiveMap.get(obj)
    if(existionProxy)return existionProxy
    //否则创建新的代理对象
    proxy=createReactive(obj)
    reactiveMap.set(obj,proxy)
    return proxy
    
}

const obj = {};
const arr = reactive([obj])
console.log(arr.includes[obj])//false

const arrInstrumentations={}
//重写方法
['includes','indexOf','lastIndexOf'].forEach(method=>{
    const originMethod=Array.prototype[method]
    arrInstrumentations[method]=function(...args){
        //先在代理对象中查找，结果存储在res实现了arr.includes(obj)的默认方法
        //找不到就去原始数组上查找
        const res=originMethod.apply(this,args)
        //找不到则在原始对象中查找
        if(res===false){
            res=originMethod.apply(this.raw,args)
        }
    }
    return res;
})

get(target,key,receiver){
            //通过"raw”属性访问原始对象
            if(key==='raw'){
                return target
            }
            //如果操作对象存在于arrInstrumentations上，返回定义在arrInstrumentation上的值
            if(Array.isArray(target)&&arrInstrumentations.hasOwnProperty(key)){
                return Reflect.get(arrInstrumentations,key,receiver)
            }
    ...
}
    

const arr=reactive([])
effect=(()=>{arr.push(1)})
effect=(()=>{arr.push(1)})

//一个标记变量，代表是否追踪
let shouldTrack = true
['push'].forEach(method=>{
    //取得原始push方法
    const originMethod = Array.prototype[method]
    //重写
    arrInstrumentations[method] = function(...args){
        //在调用方法前禁止追踪
        shouldTrack=false;
        let res = originMethod.apply(this,args)
        //调用原始方法后，恢复原来行为，即允许追踪
        shouldTrack=true
        return res
    }
})

function track(target,key){
    //禁止追踪时直接返回
    if(!activeEffect || !shouldTrack)return 
    ...
}

const obj={foo:1}
const p= new Proxy(obj,{
    has(target,key){
        track(target,key)
        return Reflect.has(target,key)
    }
})

const ITERATE_KEY=Symbol()
function trigger(target,key){
    const depsMap=bucket.get(target)
    if(!depsMap)return
    //取得与key相关联的副作用函数
    const effects=depsMap.get(key)
    //取得与ITERATE_KEY相关联的副作用函数
    const iterateEffects = depMaps.get(ITER)
    const effectsToRun=new Set(effects)
    //当操作类型是ADD或者DELETE,需要触发与ITERATE_KEY相关的副作用函数执行
    if(type==='ADD'||type==='DELETE'){
        const iterateEffects=depsMap.get(ITERATE_KEY)
        iterateEffects&&iterateEffects.forEach(effectfn=>{
            if(effectfn!==activeEffect){
                effectsToRun.add(effectfn)
            }
        })
    }
    effects&&effects.forEach(effectfn=>{
        if(activeEffect!=effectfn){//只有当trigger触发执行的副作用函数和当前正在执行的副作用函数不相同时才触发执行，否则会出现栈溢出
            effectsToRun.add(effectfn)
        }
    })   
    effectsToRun.forEach(effectfn=>effectfn())
    //effect&&effect.forEach(fn=>fn())//会产生无限执行
}

const obj={}
const proto={bar:1}
const child=reactive(obj)
const parent=reactive(proto)
//使用parent作为child的原型
Object.setPrototypeOf(child,parent)
effect(()=>{
    console.log(child.bar)//1
})
child.bar=2//会导致副作用重新执行两次

function reactive(obj){
    return new Proxy(obj,{
        get(target,key,receiver){
            //通过"raw”属性访问原始对象
            if(key==='raw'){
                return target
            }
            track(target,key)
            return Reflect.get(target,key,receiver)
    
        },
        set(target,key,newValue){
            //获取旧值
            const oldValue=target[key]
            const type=Object.prototype.hasOwnProperty.call(target,key)?'SET':'ADD'
            
            //设置属性值
            const res=Reflect.set(target,key,receiver,newValue)
            //说明receiver是target的代理对象
            if(target===receiver.raw){
                //比较新值和旧值，只有当它们不全等并且都不是NAN才触发响应
                if(oldValue!==newValue&&(oldValue===oldValue||newValue===newValue)){
                    trigger(target,key)
                }
            }
            
            return true;
        }
    })
}

const obj={
    foo:1,
    get bar(){
       return this.foo
    }
}
const p= new Proxy(obj,{
    get(target,key){
        track(target,key)
        return target[key]
    },
    set(targte,key,newVal,receiver){
        target[key]=newVal;
        trigger(target,key)
    }
})

effect(()=>{
    console.log(p.bar)
})

const p= new Proxy(obj,{
    get(target,key){
        track(target,key)
        return Reflect.get(target,key)
    },
    set(targte,key,newVal,receiver){
        
        Reflect.set(target,key,newVal,receiver)
        trigger(target,key)
        return true
    }
})

app.component('date-picker',{
    template:`
    <div class="data-picker">
    	<input type="datetime-local">
    </div>
    `
})

app.component('date-picker', {
  template: `
    <select>
      <option value="1">Yesterday</option>
      <option value="2">Today</option>
      <option value="3">Tomorrow</option>
    </select>
  `
})

app.component('date-picker',{
    inheritAttrs:false,
    template:`
    <div class="date-picker">
      <input type="datetime-local" v-bind="$attrs" />
    </div>
    `
})