在react中使用debounce和Throttle了。

{"data":[{"sort":0,"status":true,"_id":"5f88f04df7abf11905c884f1","title":"在react中使用debounce和Throttle了。","content":"先说结论 ，ahook是更好的选择 继之前的debounce，和throttle的js实现，然后看了loadash和underscroe的源码，改成typescript并整合到自己的utils库里。<pre class=\"ql-syntax\" spellcheck=\"false\">yarn add @kacoro/utils\n</pre> 然后接着用react中使用，<pre class=\"ql-syntax\" spellcheck=\"false\">import {throttle,debounce} from '@kacoro/utils'\n\n<input type=\"text\" onChange={(e)=>{\ne.persist()   // react默认会清除所有的默认属性，所以需要添加这段，保留参数的属性\ndebounce(()=>{\n    console.log(e.target.value\n) },500)()\n}} />\n</pre> 在hook来实现。参考：https://www.freecodecamp.org/news/debounce-and-throttle-in-react-with-hooks/通过使用useRef、和useCallback来实现。 使用useCallback实现bebounce在向子组件传递回调时，useCallback通常用于性能优化。但我们可以使用它的约束记忆一个回调函数，，以确保该<code style=\"color: rgb(77, 77, 77); background-color: rgb(255, 255, 255);\">debouncedSave</code>引用同去抖功能跨越渲染。<pre class=\"ql-syntax\" spellcheck=\"false\">   const [value, setValue] = useState('');\n  const [dbValue, saveToDb] = useState(''); // would be an API call normally\n  \n  const debouncedSaveByCallBack:Function = useCallback(debounce((nextValue: string) => saveToDb(nextValue), 1000),[],); // will be created only once initially\n  \n  const handleDbChange = (event: { target: { value: any; }; }) => {\n    const { value: nextValue } = event.target;\n    setValue(nextValue);\n     debouncedSaveByCallBack(nextValue);\n  };\n</pre> 使用useRef实现throttle<code style=\"background-color: rgb(255, 255, 255); color: rgb(103, 149, 181);\">useRef</code>为我们提供了一个可变对象，其<code style=\"background-color: rgb(255, 255, 255); color: rgb(77, 77, 77);\">current</code>属性引用传递的初始值。 如果我们不手动更改它，则该值将在组件的整个生命周期内保持不变 这类似于类实例的属性<pre class=\"ql-syntax\" spellcheck=\"false\">  const [value2, setValue2] = useState('');\n  const [thValue, saveToTh] = useState(''); // would be an API call normally\n  const throttledSaveByRef:Function = useRef(throttle((nextValue: string) => saveToTh(nextValue), 1000))\n  .current;\n  \n  const handleThChange = (event: { target: { value: any; }; }) => {\n    const { value: nextValue } = event.target;\n    setValue2(nextValue);\n    throttledSaveByRef(nextValue);\n  };\n</pre> 自定义hooks<pre class=\"ql-syntax\" spellcheck=\"false\">interface CurrentRef {\n  fn: Function;\n  timer?: ReturnType<typeof setTimeout> | null\n}\n\nfunction useDebounce(fn: Function, delay: number = 300, dep = []) {\n  const { current } = useRef<CurrentRef>({ fn, timer: null });\n  useEffect(function () {\n    current.fn = fn;  // eslint-disable-next-line \n  }, [fn]);\n\n  return useCallback(function f(...args: any[]) {\n    if (current.timer) {\n      clearTimeout(current.timer);\n    }\n    current.timer = setTimeout(() => {\n      current.fn.call(useDebounce, ...args);\n    }, delay); // eslint-disable-next-line \n  }, dep)\n}\n\nfunction useThrottle(fn: Function, delay: number = 300, dep = []) {\n  const { current } = useRef<CurrentRef>({ fn, timer: null });\n  useEffect(function () {\n    current.fn = fn; // eslint-disable-next-line\n  }, [fn]);\n\n  return useCallback(function f(...args) {\n    if (!current.timer) {\n      current.timer = setTimeout(() => {\n        delete current.timer; // eslint-disable-next-line\n      }, delay);\n      current.fn.call(useThrottle, ...args);\n    }// eslint-disable-next-line\n  }, dep);\n}\n</pre> <pre class=\"ql-syntax\" spellcheck=\"false\"> const [counter, setCounter] = useState(0);\n  const handleDebounceClick = useDebounce(function () {\n    setCounter(counter + 1)\n  }, 300)\n  const handleThrottleClick = useThrottle(function () {\n    setCounter(counter + 1)\n  }, 300)\n</pre> 完整代码<pre class=\"ql-syntax\" spellcheck=\"false\">import React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport {throttle, debounce } from '@kacoro/utils'\n\ninterface CurrentRef {\n  fn: Function;\n  timer?: ReturnType<typeof setTimeout> | null\n}\n\nfunction useDebounce(fn: Function, delay: number = 300, dep = []) {\n  const { current } = useRef<CurrentRef>({ fn, timer: null });\n  useEffect(function () {\n    current.fn = fn;  // eslint-disable-next-line \n  }, [fn]);\n\n  return useCallback(function f(...args: any[]) {\n    if (current.timer) {\n      clearTimeout(current.timer);\n    }\n    current.timer = setTimeout(() => {\n      current.fn.call(useDebounce, ...args);\n    }, delay); // eslint-disable-next-line \n  }, dep)\n}\n\nfunction useThrottle(fn: Function, delay: number = 300, dep = []) {\n  const { current } = useRef<CurrentRef>({ fn, timer: null });\n  useEffect(function () {\n    current.fn = fn; // eslint-disable-next-line\n  }, [fn]);\n\n  return useCallback(function f(...args) {\n    if (!current.timer) {\n      current.timer = setTimeout(() => {\n        delete current.timer; // eslint-disable-next-line\n      }, delay);\n      current.fn.call(useThrottle, ...args);\n    }// eslint-disable-next-line\n  }, dep);\n}\nfunction DebonceThrottle() {\n  const [counter, setCounter] = useState(0);\n  const handleDebounceClick = useDebounce(function () {\n    setCounter(counter + 1)\n  }, 300)\n  const handleThrottleClick = useThrottle(function () {\n    setCounter(counter + 1)\n  }, 300)\n\n  const [value, setValue] = useState('');\n  const [dbValue, saveToDb] = useState(''); // would be an API call normally\n  \n  const debouncedSaveByCallBack:Function = useCallback(debounce((nextValue: string) => saveToDb(nextValue), 1000),[],); // will be created only once initially\n  \n  const handleDbChange = (event: { target: { value: any; }; }) => {\n    const { value: nextValue } = event.target;\n    setValue(nextValue);\n     debouncedSaveByCallBack(nextValue);\n  };\n \n  const [value2, setValue2] = useState('');\n  const [thValue, saveToTh] = useState(''); // would be an API call normally\n  const throttledSaveByRef:Function = useRef(throttle((nextValue: string) => saveToTh(nextValue), 1000))\n  .current;\n  \n  const handleThChange = (event: { target: { value: any; }; }) => {\n    const { value: nextValue } = event.target;\n    setValue2(nextValue);\n    throttledSaveByRef(nextValue);\n  };\n \n  return (\n    <div>\n      <textarea value={value} onChange={handleDbChange} rows={5} cols={50} />\n      <section >\n        <div>\n          Editor (Client):\n          {value}\n        </div>\n        <div>\n          Saved (Debounce):\n          {dbValue}\n        </div>\n      </section>\n      <textarea value={value2} onChange={handleThChange} rows={5} cols={50} />\n      <section >\n        <div>\n          Editor (Client):\n          {value2}\n        </div>\n        <div>\n          Saved (Throttle):\n          {thValue}\n        </div>\n      </section>\n      <section>\n        <button\n          onClick={handleDebounceClick}\n        >click debounce</button>  <button\n          onClick={handleThrottleClick}\n        >click throttle</button>\n        <div>{counter}</div>\n      </section>\n    </div>\n  );\n}\n\nexport default DebonceThrottle;\n</pre>","keywords":"","addTime":"2020-10-16T00:28:07.303Z","cate_name":"技术","cate_id":"5d7fec39b6bed22db8ec922a","updateTime":"2020-10-17T01:28:50.353Z","__v":0},{"sort":0,"status":true,"_id":"5f68dc56f7abf11905c884ec","title":"节流防抖分析 _的.debounce和.throttle","content":"<h2>分析<code style=\"background-color: rgba(27, 31, 35, 0.05);\">_</code>的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">.debounce</code>和<code style=\"background-color: rgba(27, 31, 35, 0.05);\">.throttle</code></h2>DOM 上有些事件是会频繁触发的，比如<code style=\"background-color: rgba(27, 31, 35, 0.05);\">mouseover</code>、<code style=\"background-color: rgba(27, 31, 35, 0.05);\">scroll</code>、<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>...。以前有个需求，是做一个图表，是用<code style=\"background-color: rgba(27, 31, 35, 0.05);\">canvas</code>画的，最初，如果图表画完，用户拖拽浏览器窗口，改变浏览器大小的话，图表并不会自适应的变化，所以就需要监听<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>事件，每当窗口大小变化后，再重新绘制。但是<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>是频繁触发的，这就导致了页面的明显的卡顿，因为每次<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>后的回调要执行大量的计算。当时比较急，遇到这个问题以后，直接就查了<code style=\"background-color: rgba(27, 31, 35, 0.05);\">.debounce</code>和<code style=\"background-color: rgba(27, 31, 35, 0.05);\">.throttle</code>，就直接用了<code style=\"background-color: rgba(27, 31, 35, 0.05);\">lodash</code>。现在回过头了，看下源码，看看它的实现。<h2>Debounce</h2><h4>英文释义：</h4><blockquote>n. 防反跳</blockquote><blockquote>按键防反跳（Debounce）为什么要去抖动呢？机械按键在按下时，并非按下就接触的很好，尤其是有簧片的机械开关，会在接触的瞬间反复的开合多次，直到开关状态完全改变。</blockquote>我们希望开关只捕获到那次最后的精准的状态切换。在 Javascript 中，那些 DOM 频繁触发的事件，我们想在某个时间点上去执行我们的回调，而不是每次事件每次触发，我们就执行该回调。有点啰嗦，再简单一点的说，我们希望多次触发的相同事件的触发合并为一次触发（其实还是触发了好多次，只是我们只关注那一次）。所以，在 Javascript 中，我们就希望频繁事件的回调函数在某段连续时间内，在事件触发后只执行一次。拿<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>事件为例，在 2s 内的该事件会被触发多次（具体几次未知，不同浏览器并不一样）。我们需要对<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>的回调函数做 Debounce 100ms 化，这样<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>的回调会在 2.1s 后触发，之前 2s 以内的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>我就无视了。<h4>我们先自己实现一个</h4><pre class=\"ql-syntax\" spellcheck=\"false\">/**\n *\n * @param fn {Function} 实际要执行的函数\n * @param delay {Number} 延迟时间，单位是毫秒（ms）\n *\n * @return {Function} 返回一个“防反跳”了的函数\n */\n\nfunction debounce(fn, delay) {\n\n // 定时器，用来 setTimeout\n var timer\n\n // 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数\n return function () {\n\n // 保存函数调用时的上下文和参数，传递给 fn\n var context = this\n var args = arguments\n\n // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn\n clearTimeout(timer)\n\n // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），\n // 再过 delay 毫秒就执行 fn\n timer = setTimeout(function () {\n fn.apply(context, args)\n }, delay)\n }\n}\n</pre>将 Debounce 化后的闭包函数作为频繁触发的事件的回调，其实还是频繁执行的，只不过，返回的闭包函数内部通过<code style=\"background-color: rgba(27, 31, 35, 0.05);\">clearTimeout()</code>，让真正需要执行的回调函数不执行了，只有在连续时间内，不在触发频繁事件后的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">delay</code>秒后，执行真正的回调。<h4>Demo</h4><a href=\"http://lishengzxc.github.io/bblog/Debounce.html\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(3, 102, 214); background-color: initial;\">http://lishengzxc.github.io/bblog/Debounce.html</a><pre class=\"ql-syntax\" spellcheck=\"false\">document.addEventListener('mousemove', debounce(() => console.log(new Date().getTime()), 1000), false);\n</pre>再鼠标不移动后的 1000ms 后，执行了真正的回调，打印了当前时间戳。比较合理的应用场景还有，在一个表单的输入框中（包括多行文本输入框），想当用户停止输入后，再<code style=\"background-color: rgba(27, 31, 35, 0.05);\">ajax</code>：<pre class=\"ql-syntax\" spellcheck=\"false\">input.addEventListener('keyup', debounce(() => ajax(...), 1000), false);\n</pre><h4><code style=\"background-color: rgba(27, 31, 35, 0.05);\">_</code>的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">.debounce()</code>分析</h4>先看看<code style=\"background-color: rgba(27, 31, 35, 0.05);\">underscore</code>的。<pre class=\"ql-syntax\" spellcheck=\"false\"> _.debounce = function(func, wait, immediate) {\n var timeout, result;\n\n var later = function(context, args) {\n timeout = null;\n if (args) result = func.apply(context, args);\n };\n\n var debounced = restArgs(function(args) {\n if (timeout) clearTimeout(timeout);\n if (immediate) {\n var callNow = !timeout;\n timeout = setTimeout(later, wait);\n if (callNow) result = func.apply(this, args);\n } else {\n timeout = _.delay(later, wait, this, args);\n }\n\n return result;\n });\n\n debounced.cancel = function() {\n clearTimeout(timeout);\n timeout = null;\n };\n\n return debounced;\n };\n</pre>它的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">debounce</code>还接受第三个参数<code style=\"background-color: rgba(27, 31, 35, 0.05);\">immediate</code>，这个参数是用来配置回调函数是在一个时间区间的最开始执行（<code style=\"background-color: rgba(27, 31, 35, 0.05);\">immediate</code>为<code style=\"background-color: rgba(27, 31, 35, 0.05);\">true</code>），还是最后执行（<code style=\"background-color: rgba(27, 31, 35, 0.05);\">immediate</code>为<code style=\"background-color: rgba(27, 31, 35, 0.05);\">false</code>），如果<code style=\"background-color: rgba(27, 31, 35, 0.05);\">immediate</code>为<code style=\"background-color: rgba(27, 31, 35, 0.05);\">true</code>，意味着是一个同步的回调，可以传递返回值。关键的地方是，单独拿出了一个<code style=\"background-color: rgba(27, 31, 35, 0.05);\">later</code>函数通过控制<code style=\"background-color: rgba(27, 31, 35, 0.05);\">timer</code>来觉得连续的时间除一开始后，是不是要执行回调。<code style=\"background-color: rgba(27, 31, 35, 0.05);\">loadsh</code>的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">debounce</code>，接受更多的配置：<ul><li><code style=\"background-color: rgba(27, 31, 35, 0.05);\">[options.leading=false] (boolean)</code>: Specify invoking on the leading edge of the timeout.</li><li><code style=\"background-color: rgba(27, 31, 35, 0.05);\">[options.maxWait] (number)</code>: The maximum time func is allowed to be delayed before it’s invoked.</li><li><code style=\"background-color: rgba(27, 31, 35, 0.05);\">[options.trailing=true] (boolean)</code>: Specify invoking on the trailing edge of the timeout.</li></ul><code style=\"color: rgb(3, 102, 214); background-color: rgba(27, 31, 35, 0.05);\"><a href=\"https://github.com/lodash/lodash/blob/3.10.1/lodash.src.js#L7811\" rel=\"noopener noreferrer\" target=\"_blank\">lodash</a></code><a href=\"https://github.com/lodash/lodash/blob/3.10.1/lodash.src.js#L7811\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(3, 102, 214); background-color: initial;\">的</a><code style=\"color: rgb(3, 102, 214); background-color: rgba(27, 31, 35, 0.05);\"><a href=\"https://github.com/lodash/lodash/blob/3.10.1/lodash.src.js#L7811\" rel=\"noopener noreferrer\" target=\"_blank\">debounce</a></code><a href=\"https://github.com/lodash/lodash/blob/3.10.1/lodash.src.js#L7811\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(3, 102, 214); background-color: initial;\">源代码</a><code style=\"background-color: rgba(27, 31, 35, 0.05);\">leading=true</code>等效于<code style=\"background-color: rgba(27, 31, 35, 0.05);\">underscore</code>的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">immediate=true</code>。<code style=\"background-color: rgba(27, 31, 35, 0.05);\">trailing</code>则正好相反。<code style=\"background-color: rgba(27, 31, 35, 0.05);\">maxWait</code>设置了超时时间，在规定的超时间后，一定调用回调。（通过内部设置了两个<code style=\"background-color: rgba(27, 31, 35, 0.05);\">setTimeout</code>，一个用来完成基础功能，让回调只执行一次，还有一个用来控制超时）<h2>Throttle</h2><h4>英文释义：</h4><blockquote>n. 节流阀</blockquote><code style=\"background-color: rgba(27, 31, 35, 0.05);\">throttle</code>就是设置固定的函数执行速率，从而降低频繁事件回调的执行次数。前面提到的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">canvas</code>绘制好的图表后，用户改变窗口大小后，重新绘制图表，就很适合使用<code style=\"background-color: rgba(27, 31, 35, 0.05);\">throttle</code>。最近在写一个 Tank 游戏，用户可以非常快的点击开火，但是我们需要通过 Throttle，来降低一些开火的频率。<h4>我们先自己实现一个</h4><pre class=\"ql-syntax\" spellcheck=\"false\">/**\n*\n* @param fn {Function} 实际要执行的函数\n* @param delay {Number} 执行间隔，单位是毫秒（ms）\n*\n* @return {Function} 返回一个“节流”函数\n*/\n\nfunction throttle(fn, threshhold) {\n\n // 记录上次执行的时间\n var last\n\n // 定时器\n var timer\n\n // 默认间隔为 250ms\n threshhold || (threshhold = 250)\n\n // 返回的函数，每过 threshhold 毫秒就执行一次 fn 函数\n return function () {\n\n // 保存函数调用时的上下文和参数，传递给 fn\n var context = this\n var args = arguments\n\n var now = +new Date()\n\n // 如果距离上次执行 fn 函数的时间小于 threshhold，那么就放弃\n // 执行 fn，并重新计时\n if (last && now < last + threshhold) {\n clearTimeout(timer)\n\n // 保证在当前时间区间结束后，再执行一次 fn\n timer = setTimeout(function () {\n last = now\n fn.apply(context, args)\n }, threshhold)\n\n // 在时间区间的最开始和到达指定间隔的时候执行一次 fn\n } else {\n last = now\n fn.apply(context, args)\n }\n }\n}\n</pre>代码中，比较关键的部分是最后部分的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">if .. else ..</code>，每次回调执行以后，需要保存执行的函数的时间戳，为了计算以后的事件触发回调时与之前执行回调函数的时间戳的间隔，从而根据间隔判断要不要执行回调。<h4><code style=\"background-color: rgba(27, 31, 35, 0.05);\">_</code>的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">.throttle()</code>分析</h4>直接看<code style=\"background-color: rgba(27, 31, 35, 0.05);\">underscore</code>的。因为<code style=\"background-color: rgba(27, 31, 35, 0.05);\">lodash</code>没有对其再进行包装。<pre class=\"ql-syntax\" spellcheck=\"false\"> _.throttle = function(func, wait, options) {\n var timeout, context, args, result;\n var previous = 0;\n if (!options) options = {};\n\n var later = function() {\n previous = options.leading === false ? 0 : _.now();\n timeout = null;\n result = func.apply(context, args);\n if (!timeout) context = args = null;\n };\n\n var throttled = function() {\n var now = _.now();\n if (!previous && options.leading === false) previous = now;\n var remaining = wait - (now - previous);\n context = this;\n args = arguments;\n if (remaining <= 0 || remaining > wait) {\n if (timeout) {\n clearTimeout(timeout);\n timeout = null;\n }\n previous = now;\n result = func.apply(context, args);\n if (!timeout) context = args = null;\n } else if (!timeout && options.trailing !== false) {\n timeout = setTimeout(later, remaining);\n }\n return result;\n };\n\n throttled.cancel = function() {\n clearTimeout(timeout);\n previous = 0;\n timeout = context = args = null;\n };\n\n return throttled;\n };\n</pre>其中<code style=\"background-color: rgba(27, 31, 35, 0.05);\">previous</code>相当于自己实现代码中的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">last</code>。它还接受<code style=\"background-color: rgba(27, 31, 35, 0.05);\">leading</code>和<code style=\"background-color: rgba(27, 31, 35, 0.05);\">trailing</code>来控制真正回调触发的时机，这和<code style=\"background-color: rgba(27, 31, 35, 0.05);\">lodash</code>的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">_.debounce</code> 差不太多。<h2>最后</h2>这里有一个可视化分析页面：<a href=\"http://demo.nimius.net/debounce_throttle/\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(3, 102, 214); background-color: initial;\">http://demo.nimius.net/debounce_throttle/</a>，大家可以点开看看。","keywords":"","addTime":"2020-09-21T16:59:44.789Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-09-21T17:01:10.746Z","__v":0},{"sort":0,"status":true,"_id":"5f683f03f7abf11905c884eb","title":"vue3全球发布会总结9月18日 ","content":"刚刚看完珠峰的面试视频，之前看了开课吧vue访谈中。就已经有初步了解vue3，有几个令人激动的新特性，除了性能有很大的提升，也通过composition，解决了部分开发过程令人不爽的地方。也很让人期待vue3的正式发布，原本计划是八月。而已经拖到9月18号了。接下来就是看涉及的生态发展如何了。 2018年2月就开始有想法。 2018年9月12 使用typescript monorepo 尝试重写的原型阶段。半年之后，有了virtrul dom runtime 基于proxy，并也支持 activitys。2018年9月19 经过一周，建立vue-next repo2018年9月21日 选部启动计划 2018.09-2019早期 experiments（class,TypeScript,hooks,time slicing）2019.01.04 Established the RFC process2019.02.27 Class API RFC2019.03-2019.05 researching new rendering strategy2019.05.21 Class API dropped2019.05-2019.06 Re-writing core rendering logic(patch flag & block tree optimizations)2019.06-2019-06 Composition API design / feedback2019.08.16 Compostion API RFC2019.09 2.x Options API support . New Compiler implementation2019.10 v-model2019.11 Transition system2019 12 Tooling(SFC,HMR)2020.01.02 3.0.0-alpha.12020.01-2020.04 Server-side rendering2020.4.16 3.0.0-bata.12020.04-2020.07 Dogfooding via vite& vitePress Teams working on V3 support in sub projects 2020.07.17 3.0.0-rc.1 what's New In Vue 3More maintainabletypeScript + modularized internalsFasterPoxy-based Reactivity SystemCompiler-informed Virtual Dom & SSRSmallerTree-shakingCompile-time flagsScales betterComposition APIBetter DXNew Single-file Component improvements <img src=\"/upload/2020-09-21/14/39/15/2b0e8880-fbd5-11ea-9def-af6b01a723f7\">Unlocking Advanced Use CasesCompile-time customizations via compiler plugins (E.g. build time i18n)Custom renderres (E.g. Native,WebGL,Terminals)Standalone reactivity package (E.g with alternative templating system) TypeScriptInternalBetter IDE support -> easier & safer refactoringActually lowers contribution barrierExternalIncreasing demand for better Type Script integration from Vue usersAuto generating type declarationsmore consistency,less maintenance,better DX Composition APIPurely additive for advanced use casesNatural,complete TypeScript supportDesigned for logic organization,encapsulation and reuseRecommended replacement for mixins Compiler-infomed Virtual DomTemplate compilation phase provides inforamtion that can be used for runtime optimzationsCompiles templates into optimized Virtual DOM render functionsRuntime diff algorithm detects compiler-geneated hints and take fast paths whenever possibleFalls back to full diff mode on manually written,un-optimized render functions omiler-informed SSRPre-optimizes static content into plain stringsHandles mix of template or VDOM based componentsEfficient hydaration on the client Tree-shaking-aware global APIpay for what you useAll features inclued:~23kbMinimal hello world:~14kb*Compostion API only: ~12kb* New Single File Component Features<script setup>syntax sugar for Composition API in SFCs<style vars>state-driven CSS variables injection into SFC <style> blocks <Suspense>Declaratively wait on nested async dependenciesStill experimental,but you've already witnessed it in action in the Nuxt 3 demo! 支持的组件ant design view / vent UI建议2020年末/2021年初才投入生产。https://composition-api.vuejs.org/zh/","keywords":"","addTime":"2020-09-21T05:43:22.587Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-09-21T07:26:32.329Z","__v":0},{"sort":0,"status":true,"_id":"5f653d6ef7abf11905c884ea","title":"使用mkcer本地支持https服务","content":"Chocolatey ","keywords":"","addTime":"2020-09-18T23:05:41.311Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-09-18T23:14:57.756Z","__v":0},{"sort":0,"status":true,"_id":"5f64bdb9f7abf11905c884e9","title":"webrtc前端调研","content":"WebRTC\t，名称源自\t网页即时通信\t（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。 作为一名前端需要如何使用呢？ 简单实现直播1、主播端打开摄像头，采集视频。实时通过websocket实时推送2、观众端，通过websocket接收流，实时更换。 最新api<pre class=\"ql-syntax\" spellcheck=\"false\">MediaDevices.getUserMedia\n// 捕获摄像头和麦克风。\nconst mediaStreamConstraints = {\n  video: true,\n  audio: true\n};\n \n// 显示流的视频元素。\nconst localVideo = document.querySelector('video');\n \n// MediaStream获取成功的回调函数。\nfunction gotLocalMediaStream(mediaStream) {\n  // MediaStream添加到视频元素。\n  localVideo.srcObject = mediaStream;\n}\n \n// MediaStream获取失败的回调函数。\nfunction handleLocalMediaStreamError(error) {\n  console.log('navigator.getUserMedia error: ', error);\n}\n \nnavigator.mediaDevices.getUserMedia(mediaStreamConstraints)\n  .then(gotLocalMediaStream).catch(handleLocalMediaStreamError);\n</pre> 需要https支持，本地调试时可以使用虚拟摄像头或者obs进行调试。","keywords":"","addTime":"2020-09-18T13:59:16.060Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-09-18T23:09:52.584Z","__v":0},{"sort":0,"status":true,"_id":"5f62abebf7abf11905c884e8","title":"为什么离职？为什么又想找工作","content":"自由职业至今，我想这个肯定是一个绕不过去的问题。是时候言简意赅地做个总结。为什么离职？是为了重新定位，是偏向技术还是管理？进大企还是中企？还是放弃本行，从事其他职业，比如游戏或者销售。 离职这段时间做了什么？除了接一下外包工作。react16的再实践，开发个人博客记录。尝试了一下游戏开发，复刻《魔力宝贝》，了解游戏行业或成功或失败历史，此路的不易。读了一些书，看了一些故事，政治。更深刻的了解务实与平凡与这个时代下自己能做的事情。构思过服装生产，可惜始终没有信心投入。 为什么还要再就业？能力有限，实践失败，远离社群久了，需要回归社群寻求幸福，同时发挥自己微薄的能量。定位，以前的偏向管理，因为相信最终是人力管理。现在要把重心转移回到技术上，技术是硬道理。做好最擅长的前端工作。","keywords":"","addTime":"2020-09-17T00:07:08.747Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-09-17T00:22:41.111Z","__v":0},{"sort":0,"status":true,"_id":"5f4e1c1ff7abf11905c884e6","title":"关于游戏的重新认识","content":"为什么放弃了魔力宝贝的复刻？其实深度体验《魔力手游2》后，我就放弃了。当初是觉得没人做。可以尝试一下。发现有人已经复刻得如此“完美”，我就觉得没有那么大的价值了。 如何运营一款游戏被我看得更为重要。跳出“情怀”看待游戏。 经历了服务器从开荒到满级，各种节日活动，每日任务，到打击外挂脚本和工作室这一个过程。也算一直在捕捉一些运营策略，换成是我（在已经有一定运营经验的前提下），我未必能够做得比他们更好。只能算吸取一些经验。 这也关乎于游戏的生命周期。经济体系，数值平衡、玩家体验重重问题。 看了芒果冰70期《中国网游史》，各种游戏公司与游戏的生死浮层。三十年河东三十年河西。对于游戏有了更加客观的认识。点卡制与道具收费如何轮转的？无非也都是商业性质决定。游戏怎么从良心变成黑心，榨干玩家的价值。社交性的重要性，还有游戏的本地化的重要性。游戏更新迭代，与反外挂和工作室的平衡。 《暗黑破坏神3》原来是核心成员出走，接手的团队已经策略上决定不走暗黑2的风格，所以画面和游戏性都不同了。难怪我不喜欢。 国内多少游戏人曾怀揣着梦想进入游戏圈，誓要做出自己心中理想的游戏，就算最初立项不妥协，最终还是向资本妥协都做了自己不喜欢的游戏。 天生地对商业性抵触。而网游就是这么重商业性的产品。策划也都是从人性弱点的角度去榨干玩家。从我想要做什么游戏转变为这个时代的符合某个地区法规的某个地区的某些玩家需要什么游戏？ 那时候的游戏简单，那时候的玩家单纯。","keywords":"","addTime":"2020-09-01T09:54:23.116Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-09-01T10:47:29.102Z","__v":0},{"sort":0,"status":true,"_id":"5f4e19fbf7abf11905c884e5","title":"好久没更新博客了","content":"最近总于把免费的ssl证书更新了。每年一次也算是麻烦~不记录下生活，它似乎就停滞了。 还是看了不少动漫，近期的佳作都没拉下。国漫也是越来越多精品了。 魔力回忆让我玩到了82级3转弓传，和10级料理。再运营方重度打击工作室也被误伤，无法忍受断然和朋友弃坑。结识了数位好基友。算是比预想的更加深度体验了一把。还玩了一阵《神魔大陆》手游。 用vue做了一阵上海交通人力系统的前端。 其余生活上还买多了一个博士的冲击钻。又掌握一些墙上和瓷砖打孔不在话下。电视挂架、一字柜之类的。卫浴门的安装。大部分生活技能全面提升了。学会的菜也多了。 我要做什么？我能做什么？这个思考一直也没有停止过。 还是故事吧。最近看了芒果冰的70期【中国网游史】，对网游有了心的认识了，也许单机游戏更适合我。《黑神话·悟空》的出现，似乎也给了一个答案。 这个时代更需要什么游戏呢？","keywords":"","addTime":"2020-09-01T09:44:16.730Z","cate_name":"生活","cate_id":"5d7fff027bf17f6500ef7d9d","updateTime":"2020-09-01T10:05:59.157Z","__v":0},{"sort":0,"status":true,"_id":"5f0a50eaf7abf11905c884e4","title":"树莓派retropie的使用","content":"现在的主流系统 有retropie Batocera BatoceraPLUS Lakka Recalbox，目前只尝试了retropie。可以模拟的游戏系统挺多的。后面了解到，树莓派可能不是最好的选择。还是x86的好，可以模拟wii Dolphin。再结合batocera和win就可以做一台支持wii以及以下所有的模拟器并且还可以玩PC游戏。 最初入手树莓派 4b 也是为了搞homeAssistant和陶腾其他的东西。毕竟换张SD卡就可以了。为了有个地方专门来存放老游戏。偶尔情怀或研究下。ps2及以下也就够了。还可以和朋友偶尔可以打打街机休闲一下。 一、系统安装<a href=\"https://retropie.org.uk/download/\" rel=\"noopener noreferrer\" target=\"_blank\">https://retropie.org.uk/download/</a>1、下载树莓派4的镜像：https://github.com/RetroPie/RetroPie-Setup/releases/download/4.6/retropie-buster-4.6-rpi4.img.gz2、使用Win32DiskImager写入镜像到sd卡，无异常就可以启动系统了。 3、按F4进入终端模式，配置wifi<pre class=\"ql-syntax\" spellcheck=\"false\">cd /etc/wpa_supplicant/\nsudo nano wpa_supplicant.conf\ncountry=CN\nctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev\nupdate_config=1\nnetwork={\n ssid=\"winfi name\"\n key_mgmt=WPA-PSK\n psk=\"wifi password\"\n}\n</pre>使用【ctrl + x】然后回车退出，在运行reboot重启机器。 进入后配置手柄。 进入configuration 看看wifi是否配置正确了。可以查看ip来验证验证失败了，返回configuration，运行raspi-config NetworkOpitons Wi-fi,进入配置名称和密码 <pre class=\"ql-syntax\" spellcheck=\"false\">sudo raspi-config\n</pre><img src=\"https://kacoro.com/upload/2020-07-12/07/37/45/859f2ef0-c3cf-11ea-9def-af6b01a723f7\">开启ssh选择5.然后里面就可以开启ssh了。选择1，配置一下账号密码 备份源<pre class=\"ql-syntax\" spellcheck=\"false\">sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak\n\nsudo cp /etc/apt/sources.list.d/raspi.list /etc/apt/sources.list.d/raspi.list.bak\n</pre> 更换源<pre class=\"ql-syntax\" spellcheck=\"false\">sudo vim /etc/apt/sources.list\n</pre> <pre class=\"ql-syntax\" spellcheck=\"false\">deb http://mirrors.ustc.edu.cn/raspbian/raspbian/ stretch main contrib non-free rpi\n</pre> <pre class=\"ql-syntax\" spellcheck=\"false\">sudo nano /etc/apt/sources.list.d/raspi.list\n</pre> <pre class=\"ql-syntax\" spellcheck=\"false\">deb http://mirrors.ustc.edu.cn/archive.raspberrypi.org/ jessie main ui\ndeb-src http://mirrors.ustc.edu.cn/archive.raspberrypi.org/ jessie main ui\n</pre> <pre class=\"ql-syntax\" spellcheck=\"false\">sudo apt-get update\nsudo apt-get upgrade\n</pre> http://www.yz0228.com/index.php/2019/11/10/wpa_supplicant/ 运行retropie setup -> manage packages -> manage optional packages install all pagage 增加模拟器 以psp为例在PC访问 \\\\retropie\\roms 来放置游戏新建一个PSP的文件夹。再放入可以运行的游戏。之后软重启树莓派系统。 联网在retropie config里的optional包里安装lr-ppsspp,游戏放到roms/psp里(没有的话自己新建) 寻找游戏ROM的几点注意事项1、找到的不同游戏的ROM文件，应该放在不同的文件夹中，例如：如果是nes游侠，那么需要放在 retropie/roms /nes文件夹中。如过是nese游戏那么需要放在 retropie/roms /nese文件夹中。2、NeoGeo游戏文件是一个ZIP格式的文件，需要直接将Zip文件放在retropie/roms /neogeo文件夹中3、要运行neogeo游戏，比如拳皇97，合金弹头等游戏，还需要 neogeo.zip和mslug3.zip 这两个文件一起放入 retropie/roms /neogeo文件夹 中，才能运行游戏。4、像拳皇等游戏最好使用xbox或者PS3等手柄，因为SFC手柄可能不方便操作一些特定动作。所有街机游戏可以全部放在arcadehttps://retropie.org.uk/docs/MAME/ 然后指定模拟器，还要安装相应的插件，真心不容易。以安装 mame2003-plus 为例 Roms Dir: /home/pi/RetroPie/roms/mame-libretroSamples Dir: /home/pi/RetroPie/BIOS/mame2003-plus/samples/Binary Dir: /opt/retropie/libretrocores/lr-mame2003-plusConfig Dir: /opt/retropie/configs/mame-libretro/retroarch.cfg cd /opt/retropie/libretrocoresclone https://github.com/libretro/mame2003-plus-libretro.git <h1>更换主题 ES Themes (EmulationStation)</h1>参考：https://www.bilibili.com/video/av30458191下载推荐 Ultimate Pii要为RetroPie系统选择已安装的主题，您需要打开RetroPie主菜单。您可以通过按控制器上的 Menu 按钮来找到它。 <h1>支持中文</h1>sudo apt-get install fonts-droid-fallback<h1>预览图及视屏</h1>es menu里scaper里有可以自动根据你的rom下载预览图及视屏 支持wii模拟器 支持wine，运行windows游戏","keywords":"","addTime":"2020-07-11T23:36:17.435Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-09-07T16:07:07.083Z","__v":0},{"sort":0,"status":true,"_id":"5e9e9503f7abf11905c884e3","title":"魔力回忆","content":"回深圳前，老家的朋友又犯了魔力瘾。帮他搭建了私服。几个朋友生意处于淡季的朋友又一起玩了几天。而后我就回深圳了。 回深圳后，看到表哥在手机上玩魔力。名字是 《魔力回忆2》，立马分享给朋友们。玩自建私服的朋友都过来体验一下。我自己也想深入体验了一把。七八个人来玩几天后，最后只剩下3个人。意料之中。 一个RMB玩家，各种充值。买声望卡，卡时，找人带过任务。现在已经70级，开始做起料理生意。一个做了倒爷，45级。每天就晚上上去逛逛市场，做起倒卖的生意。还有摸鱼的表哥两个40的号。浪费了他内测玩家送的声望卡。和各种福利。我呢，59级。离二转的声望苍之风云还差20几天。主号一弓一传。昨天带着40级法师和弓和封印打败UD。今天应该能到60做一下兰国的任务。 引入了物资系统。需要缴纳足够的物资，才能解锁经验。导致了这款游戏变成了一款搬砖游戏。每天限额4万魔币。20级以前不可以交易。芙蕾雅的打的魔石绑定。不可以交易。只有到了40级。才算能玩得比较轻松。不过在雪山搬砖，3万平均也接近4个小时才能搬完。需要消耗太多的时间了。这是目前，我可以挑出这款游戏的毛病。 游戏目前处于不删档公测阶段，每个星期都有调整，大部分做出来的，不是封外挂，和阻挡工作，避免魔币贬值。但也造成了普通玩家的一些不便和提高了门槛。 说一下它的优点：1、完全的手机体验优化。2、可以设置原地遇敌，3、可以设置自动战斗4、优化的采集精灵系统，这个系统深得我心。没有了生产系。取而代之的是所有人都可以采集和生产。每个人可以初始带3只采集精灵。找到合适的采集点就可以挖矿，伐木，狩猎。一个小时的采集成本是5040魔币5、隔空交易6、绑定微信7、全平台通服、虽然还迟迟不支持ios 2、3适应了现在的节奏。但又没有引入页游的那种完全自动任务。自动寻路，全程挂机的状态。至少比腾讯的版本好太多。画面剧情几乎99%的还原。开荒服，逐步开放地图和任务。节日还有活动。运营得挺不错的。 缺点：思维，99%还原，但是必须要vip。 1、必须VIP死亡才会停止自动遇敌。我有一个号声望负1万多。每次练到20级。一不留神。就负声望。只能删号回炉了。遇到这个情况的普通玩家。绝不少数。最后为了安全起见我还是买了3个vip。 2、卖魔石只有vip免验证。普通玩家一旦验证失败，就得等20分钟。一方面是为了阻碍工作室，但据说一推出来就被破解了。所以被玩家调侃为拒绝0元党的设定。 3、物资搬砖劝退系统。物资哪里来。打魔石赚钱自己采集制作或买来。1个物资的成本是468。市场价在500左右。20级开始每个等级阶段所需物资的数量240,480,960,1680,2640,3840,5280。20-30.新手包送了200个物资。也就是到30级只需要40个物资。而后除了vip每天可以领取40个之外。其余都是得赚钱获得。从30级每个阶段需要的资金分别是：24w,48w,84w,132w,192w,264w.744w,以魔币商城价1：7000来算。一个90级的号，光物资就需要消耗1062rbm。每天都幸苦地去搬砖，也得搬186天。除非有别的收入来源。但大多数人还是普通玩家。也不是每个人都会去做封印或者生产职业。半年的搬砖生活是少不了的。除了练级你还要消耗料理费。各种装备费用，宠物费。这款游戏的生命周期也至少可以有1年多了。 目前估计有数万人在玩。开了10条线路，以前据说1条线承载5000人。有没有升级不知道。但不知道由于最近的更新又劝退了多少人。 6个官服2000人Q群满。至少也有1万多核心玩家。 处于卡声望阶段，我也不知道自己还能体验多久。也找到了刷碎片，挣钱。把料理成本算得清清楚楚。 我对这款游戏的评价还是很高的。能看出有很考量的。但是，以体验来说，还是差在，大家都跑去搬砖了，这或许也是魔力本来也是这样。不能通过做任务或者去不同的地方途径时获取游戏币的方式。所有人都堆在雪山1层，来回搬魔石。占据了每天游戏99%的时间。那么乐趣何在呢？ ","keywords":"","addTime":"2020-04-21T06:17:49.387Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-04-21T07:28:41.879Z","__v":0}],"pagination":{"page":1,"size":10,"hasMore":true,"total":33,"num":4}}