<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[newway007的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/newway007</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; newway007]]></copyright><item><title><![CDATA[报表渲染1]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/152283152</link><guid>https://blog.youkuaiyun.com/newway007/article/details/152283152</guid><author>newway007</author><pubDate>Mon, 29 Sep 2025 22:26:34 +0800</pubDate><description><![CDATA[【代码】报表渲染1。]]></description><category></category></item><item><title><![CDATA[http相关]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/116239086</link><guid>https://blog.youkuaiyun.com/newway007/article/details/116239086</guid><author>newway007</author><pubDate>Thu, 29 Apr 2021 16:26:16 +0800</pubDate><description><![CDATA[http头信息



HTTP Request Header请求头

Header
			解释
			示例
		Accept
			指定客户端能够接收的内容类型
			Accept: text/plain, text/html
		Accept-Charset
			浏览器可以接受的字符编码集。
			Accept-Charset: iso-8859-5
		Accept-Encoding
			指定浏览器可以支持的web服务器返回内容压缩编码类型。
			Accept-Encoding: compre..]]></description><category></category></item><item><title><![CDATA[vue3 源码之内置组件]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/116067366</link><guid>https://blog.youkuaiyun.com/newway007/article/details/116067366</guid><author>newway007</author><pubDate>Fri, 23 Apr 2021 22:24:39 +0800</pubDate><description><![CDATA[teleport组件

有一种场景是组件的一部分逻辑上属于该组件，但是需要显示在其它地方，类似于react的portals；

一个常见的场景是创建一个包含全屏模式的对话框组件。在大多数情况下，我们希望对话框的逻辑存在于组件中，但是对话框的定位 CSS 是一个很大的问题，它非常容易受到外层父组件的 CSS 影响。

把该组件渲染的这部分 DOM 挂载到 body 下面，这样就不会受到父级样式的影响了。



而 Vue.js 3.0 把这一能力内置到内核中，提供了一个内置组件 Teleport，它可以轻松.]]></description><category></category></item><item><title><![CDATA[vue3 源码之生命周期钩子]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/116048518</link><guid>https://blog.youkuaiyun.com/newway007/article/details/116048518</guid><author>newway007</author><pubDate>Fri, 23 Apr 2021 16:34:15 +0800</pubDate><description><![CDATA[生命周期钩子对应的生命周期Option如下:


beforeCreate -&gt; 使用 setup() 
created -&gt; 使用 use setup() 
beforeMount -&gt; onBeforeMount 
mounted -&gt; onMounted 
beforeUpdate -&gt; onBeforeUpdate 
updated -&gt; onUpdated 
beforeDestroy-&gt; onBeforeUnmount 
destroyed -&gt; ]]></description><category></category></item><item><title><![CDATA[vue3源码之 组合式api]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/116028908</link><guid>https://blog.youkuaiyun.com/newway007/article/details/116028908</guid><author>newway007</author><pubDate>Thu, 22 Apr 2021 21:31:45 +0800</pubDate><description><![CDATA[vue3 提供了setupAPI来提供组合式API的使用. 我们开回顾一下vnode的挂载过程:


const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) =&gt; {
  // 创建组件实例
  const instance = (initialVNode.component = createComponentInstance(initialV]]></description><category></category></item><item><title><![CDATA[vue3响应式原理附]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/116019515</link><guid>https://blog.youkuaiyun.com/newway007/article/details/116019515</guid><author>newway007</author><pubDate>Thu, 22 Apr 2021 19:37:26 +0800</pubDate><description><![CDATA[上面讲了的N多源码。。其实只讲了怎么实现的，没有讲为什么要这么实现。

vue3为什么会采用不同的响应式原理：

这是因为vue2使用的Object.defineProperty存在一些问题：

1.为什么vue2.x不支持使用数组下标来响应数据变化，只能用$set？

事实上，Object.defineProperty 本身是可以监控到数组下标的变化的，只是在 Vue 的实现中，从性能 / 体验的性价比考虑，放弃了这个特性。 下面是栗子：


function defineReactive(data, k]]></description><category></category></item><item><title><![CDATA[vue3源码之响应式原理]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/116000826</link><guid>https://blog.youkuaiyun.com/newway007/article/details/116000826</guid><author>newway007</author><pubDate>Thu, 22 Apr 2021 16:24:06 +0800</pubDate><description><![CDATA[reactive的函数实现如下:


function reactive (target) {

   // 如果尝试把一个 readonly proxy 变成响应式，直接返回这个 readonly proxy

  if (target &amp;&amp; target.__v_isReadonly) {

     return target

  } 

  return createReactiveObject(target, false, mutableHandlers, mutableColl]]></description><category></category></item><item><title><![CDATA[页面刷新回退等]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/116005880</link><guid>https://blog.youkuaiyun.com/newway007/article/details/116005880</guid><author>newway007</author><pubDate>Thu, 22 Apr 2021 12:32:32 +0800</pubDate><description><![CDATA[刚才同事问我返回上一个路由的问题。。然后我就从vue3源码里面退出来，总结一下这些操作；



刷新页面

个人觉得刷新页面是一个备用选择，页面刷新无非是数据变了，要么从服务器获取新的数据，要么请求数据修改成功后自行修改数据；

如果万一真的有绕不开刷新页面的情形，就用

window.location.reload()

history.go(0)



回退页面：

history.go(-1)

history.back(-1)



go(-1): 返回上一页，原页面表单中的内容会丢失；bac...]]></description><category></category></item><item><title><![CDATA[vue3源码之diff以及最长递增子序列详解（多种方法）]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/115918718</link><guid>https://blog.youkuaiyun.com/newway007/article/details/115918718</guid><author>newway007</author><pubDate>Wed, 21 Apr 2021 19:00:54 +0800</pubDate><description><![CDATA[终于来到了我最想写的diff了。当时看这一块代码看了好久。然后顺带get了最长上升子序列算法和vue3源码中做的优化。



新子节点数组相对于旧子节点数组的变化, 无非是通过更新, 删除, 添加和移动节点来完成的.

新旧子节点数组很容易拥有相同的头尾节点. 对于相同的节点, 我们只需要对比更新即可.



1.同步头部节点


const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSus..]]></description><category></category></item><item><title><![CDATA[vue3源码之渲染和更新流程]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/115867148</link><guid>https://blog.youkuaiyun.com/newway007/article/details/115867148</guid><author>newway007</author><pubDate>Tue, 20 Apr 2021 20:46:17 +0800</pubDate><description><![CDATA[1.创建虚拟dom

在createAppAPI的mount方法中, 通过createVNode创建了VNode:


export function createAppAPI&lt;HostElement&gt;(
  render: RootRenderFunction,
  hydrate?: RootHydrateFunction
): CreateAppFunction&lt;HostElement&gt; {
  return function createApp(rootComponent, ]]></description><category></category></item><item><title><![CDATA[ts的断言]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/115522757</link><guid>https://blog.youkuaiyun.com/newway007/article/details/115522757</guid><author>newway007</author><pubDate>Thu, 08 Apr 2021 16:07:03 +0800</pubDate><description><![CDATA[今天看vue的源码。看到了变量后加！的用法；后来查了一下：

结论

1、as和!用于属性的读取，都可以缩小类型检查范围，都做判空用途时是等价的。只是!具体用于告知编译器此值不可能为空值（null和undefined），而as不限于此。

2、?可用于属性的定义和读取，读取时告诉编译器此值可能为空值（null和undefined），需要做判断。



as：

let someValue: any = "this is a string";

let strLength: number = (someVa.]]></description><category></category></item><item><title><![CDATA[vue3源码阅读-createApp]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/115285062</link><guid>https://blog.youkuaiyun.com/newway007/article/details/115285062</guid><author>newway007</author><pubDate>Sun, 28 Mar 2021 19:57:07 +0800</pubDate><description><![CDATA[CreateApp 作为 vue 的启动函数，返回一个应用实例



一个实例：


const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')



export const createApp = ((...args) =&gt; {
  const app = ensureRenderer()..]]></description><category></category></item><item><title><![CDATA[vuex4的使用]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/111599369</link><guid>https://blog.youkuaiyun.com/newway007/article/details/111599369</guid><author>newway007</author><pubDate>Wed, 23 Dec 2020 21:13:50 +0800</pubDate><description><![CDATA[import{createStore}from'vuex'



exportdefaultcreateStore({

state:{

count:0

},

getters:{

doubleCount:state=&gt;state.count*2

},

mutations:{

addCount(state,payload=1){

state.count+=payload;

}

},

act...]]></description><category></category></item><item><title><![CDATA[vue 的jsx语法]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/111185963</link><guid>https://blog.youkuaiyun.com/newway007/article/details/111185963</guid><author>newway007</author><pubDate>Mon, 14 Dec 2020 21:14:07 +0800</pubDate><description><![CDATA[&lt;script&gt;
  const grids = new Array(8).fill(1).map((_, r) =&gt; {
    return new Array(8).fill(1).map((_, c) =&gt; {
      return {
        key: `key-${r * 8 + c}`,
        ok: false
      };
    });
  });
  export default {
    name: "app",
    data.]]></description><category></category></item><item><title><![CDATA[从服务器下载]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/109097088</link><guid>https://blog.youkuaiyun.com/newway007/article/details/109097088</guid><author>newway007</author><pubDate>Tue, 27 Oct 2020 14:23:55 +0800</pubDate><description><![CDATA[从服务器下载文件：


 &lt;div class="uploadBtn" (click)="modeTableDownload1()"&gt;下载&lt;/div&gt;

modeTableDownload1() {
    const downUrl = `/meta/original_form`;
    const a = document.createElement('a');
    a.setAttribute('href', downUrl);
    a.click();
  }

.]]></description><category></category></item><item><title><![CDATA[任意多个的凸包以及具体的需求]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/109310011</link><guid>https://blog.youkuaiyun.com/newway007/article/details/109310011</guid><author>newway007</author><pubDate>Tue, 27 Oct 2020 14:23:07 +0800</pubDate><description><![CDATA[刚刚有一个需求，就是想要把路口和路段的区域包裹起来，并且按照它的图形的形状往外扩大一些。（为了美观）



首先是一连串点坐标的凸包的计算。

先找到坐标点中x轴最小的一个点，这个一定是这个多边形的一个顶点。然后这个点a和任意一个点的所构成的向量，其他的点都在它的一侧，那么另一个点b也是多边形的一个顶点。否则，则不是。然后将b与剩下的任意一个点构成的向量，判断其他点是否在同一侧。这样就可以顺序得到所有多边形的点。

这就是凸包。



图形扩大的问题。

首先先找到这个多边形的中心。这个中心与每个顶点的..]]></description><category></category></item><item><title><![CDATA[express的安装]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/105123001</link><guid>https://blog.youkuaiyun.com/newway007/article/details/105123001</guid><author>newway007</author><pubDate>Thu, 26 Mar 2020 17:16:03 +0800</pubDate><description><![CDATA[理论上这个安装应该没什么问题。。

我看到网上攻略都是说全局安装express，然后因为4.0+版本将命令行工具分离出来了。

所以需要安装npm install express-generator -g



但是我的node.js有点特殊，我之前安装一个什么东西将npm版本降低了。。然后前几天又安装一个啥，说npm版本和node.js？版本不一致？我又屁颠屁颠升高了npm版本。。又改了一些东...]]></description><category></category></item><item><title><![CDATA[react native]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/104982625</link><guid>https://blog.youkuaiyun.com/newway007/article/details/104982625</guid><author>newway007</author><pubDate>Fri, 20 Mar 2020 13:47:09 +0800</pubDate><description><![CDATA[我觉得这个最难的是安装环境。。。

公司的网限速，流量也限速，巨慢，再加上，昨天官网突然更新，我辛辛苦苦安装的环境又作废，重新安装。。。

晚上回去没拿电脑电池。。。。装到快没电了，（装到我睡着了）。。。。

今天峰回路转，就很顺利安装好了。。（还是要科学上网。。。。）



至于中间踩过的坑。。。。如果你可以科学上网，并且网速很快，其实装起来很快的。。

android studio 安装了很...]]></description><category></category></item><item><title><![CDATA[meta标签]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/104908629</link><guid>https://blog.youkuaiyun.com/newway007/article/details/104908629</guid><author>newway007</author><pubDate>Mon, 16 Mar 2020 21:40:30 +0800</pubDate><description><![CDATA[meta标签放在html头部；

用于描述页面元数据，元数据不会显示在客户端，但是会被浏览器解析。

属性
			值
			描述
		charset
			character_set
			文档的字符编码。
		content
			text
			定义与 http-equiv 或 name 属性相关的元信息。
		http-equiv
			content-type
			default-sty...]]></description><category></category></item><item><title><![CDATA[DOM操作]]></title><link>https://blog.youkuaiyun.com/newway007/article/details/104903014</link><guid>https://blog.youkuaiyun.com/newway007/article/details/104903014</guid><author>newway007</author><pubDate>Mon, 16 Mar 2020 20:23:11 +0800</pubDate><description><![CDATA[我觉得我最薄弱的是html部分。。。有一次面试（其实也没怎么面试。。。就是卡住了让我有点愤愤不平。）

反而是大家忽视的css部分，我有段时间花了很大力气学了一下。。。

添加dom元素


var p = document.createElement("p");

//创建文本节点

var content= "第"+index+"段落";

var txt = docu...]]></description><category></category></item></channel></rss>