分类
未分类

vue3变化

vue3的变化

全局api

createApp 返回实例 替代 new Vue 使得返回实例不再共享全局配置 全局的方法也从Vue上转移到了实例上

2.x全局API 3.x实例API(app)
Vue.config app.config
Vue.config.productionTip removed
Vue.config.ignoredElements app.config.isCustomElement
Vue.component app.component
Vue.directive app.directive
Vue.mixin app.mixin
Vue.use app.use
Vue.prototype app.config.globalProperties

config.ignoredElements 就是现在 config.isCustomElement

引入此配置选项旨在支持本机自定义元素,因此重命名可以更好地传达其功能。新选项还期望一个比旧字符串/ RegExp方法具有更大灵活性的函数:

 // before
 Vue.config.ignoredElements = ['my-el', /^ion-/]
    
 // after
 const app = Vue.createApp({})
 app.config.isCustomElement = tag => tag.startsWith('ion-')

Vue.prototype 取而代之 config.globalProperties

在Vue 2中,Vue.prototype通常用于添加所有组件都可以访问的属性。 Vue 3中的等效项是config.globalProperties。在实例化应用程序内的组件时,将复制这些属性:

// before - Vue 2
Vue.prototype.$http = () => {}
// after - Vue 3
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

一个经过转换的例子如下

const app = createApp(MyApp)

app.component('button-counter', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

app.directive('focus', {
  mounted: el => el.focus()
})

// button-counter 组件与 focus指令 不会污染全局 只在当前实例
app.mount('#app')

Provide / Inject

// 在父级
app.provide('guide', 'Vue 3 Guide')

// 在任意层次的子级
export default {
  inject: {
    book: {
      from: 'guide'
    }
  },
  template: `<div>{{ book }}</div>`
}

Tree-shaking

因为内部都重写了,所以组件内部也完全是支持摇树优化的,带来的后果就是一些方法需要显式导入来使用

import { nextTick } from 'vue'

nextTick(() => {
  // something DOM-related
})
//before
import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'

test('an async feature', async () => {
    const wrapper = shallowMount(MyComponent)

    // execute some DOM-related tasks

    await wrapper.vm.$nextTick()

    // run your assertions
})
//after
import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'
import { nextTick } from 'vue'

test('an async feature', async () => {
    const wrapper = shallowMount(MyComponent)

    // execute some DOM-related tasks

    await nextTick()

    // run your assertions
})

####受影响的API

2.x全局API 3.x用法
Vue.nextTick 拆分
Vue.observable 替换为 Vue.reactive
Vue.version 拆分
Vue.compile 仅完整版本
Vue.set 仅在兼容版本中
Vue.delete 仅在兼容版本中

参考链接

$attrs的变化

在vue2中,classstyle会被直接设置到组件的根元素并且不会出现在 $attrs中, 当inheritAttrs:false的时候

<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

当这样使用的时候

<my-component id="my-id" class="my-class"></my-component>

vue2将生成以下html

<label class="my-class">
    <input type="text" id="my-id" />
</label>

vue3中$attr包含所有属性包括class与style vue3将生成以下html

<label>
    <input type="text" id="my-id" class="my-class" />
</label>

$listeners 在vue3也被移除,现在是$attrs的一部分

自定义指令的生命周期变化

简要总结:

  • API 已重命名,以便更好地与组件生命周期保持一致
  • 自定义指令将由子组件通过 v-bind="$attrs"

对比

2.x 3.x
bind beforeMount
inserted mounted
beforeUpdate
update 已经移除 改用 updated
componentUpdated updated
beforeUnmount
unbind unmounted

###生命周期变化 TODO

###scopedSlots正式弃用 v-slot 指令自 Vue 2.6.0 起被引入,提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。 v-slot 完整的由来参见这份 RFC 。 在接下来所有的 2.x 版本中 slot slot-scopeattribute 仍会被支持, 但不会出现在 Vue 3 中。 结合具名插槽要这样写

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

异步组件需要显式定义

Mixin合并行为变更

当来自组件的 data() 及其 mixin 或 extends 基类被合并时,现在将浅层次执行合并:

const Mixin = {
  data() {
    return {
      user: {
        name: 'Jack',
        id: 1
      }
    }
  }
}
const CompA = {
  mixins: [Mixin],
  data() {
    return {
      user: {
        id: 2
      }
    }
  }
}

vue2中结果是

{
  user: {
    id: 2,
    name: 'Jack'
  }
}

vue3中结果是

{
  user: {
    id: 2
  }
}
分类
未分类

flex布局常用属性

写组件的时候常常遇到这种情况

设计给的一个设计图 头是固定高度的 底下是自适应的

一般情况下

div{
display:flex;
flex-direction: column;
height:100%;
}

header{
height:50px;
}

body{
height:100%;
}

对一些要求不高的已经可以实现了,但是当下面组件高度很高的时候,flex会进行缩放,导致实际的header高度与预期的不一致,这个时候显式的给header 加上这两个属性就可以让他不缩放了

header{
flex-grow:0;
flex-shrink:0;
height:50px;
}

顺带一提 flex:1 flex: 1; !== flex: 1 1 auto;

  • 第一个参数表示: flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
  • 第二个参数表示: flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
  • 第三个参数表示: flex-basis 给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

分类
未分类

下一阶段预告

接下来半年内要做的事情

1.重构一个v-viewer-vue3版本的

2.开源一个可配置页面的前后端版本

欢迎加群催更 交流技术 秋秋群号:768901972

分类
未分类

git设置导致的血案-jenkins 编译 vue项目

可以看到前面报错了两次,查看报错信息 报的是

其实代码里是有这个文件的

后来想了一下 这个文件的名字我改过 之前是 user.js 后来改成了 User.js

但是我是windows git 默认不区分大小写 这边打包的是在docker里打包的 区分大小写 所以导致了这个结果

为了避免这样的惨剧 请瞧上这个设置

git config core.ignorecase false

这样windows 下 git就区分大小写了

顺带一提 git 在windows下文件目录长度是260 git自身是4096

要想突破可以

git config –global core.longpaths true

但还是建议适当控制长度

如果你有ci/cd,或者前端方向的想法,欢迎加群交流 球球群:768901972

分类
未分类

typescript 给ws添加属性类型报错怎么解决?类型“WebSocket”上不存在属性xxx

其实很简单 我以我这边使用的ws库为例子 新建一个 shims.d.ts 文件

import ws from "ws";

declare module "ws" {
  export interface WebSocket extends ws {
    $id: string;
  }
}

这样就可以实现扩展了,成功的在ws 上扩展了$id属性

另外注意一点 d.ts文件不要和.ts文件一样命名 不推荐通过后缀区分文件

还有疑问可以加群讨论 秋秋群:768901972

分类
未分类

leetcode刷题记录

随缘更新,记录下自己的刷题记录

刷题要有思路的刷题,这轮刷题的目的就是熟悉题型,没事造造火箭。所以我选择的刷题思路是按照tag进行刷题。每个tag刷一个月。刷题的频率暂定是每个工作日刷一题,不论简单或难,总之要有一题,纯粹当爱好。

更新-2020-06-09

//这题是考常见的排序,冒泡,快排,插入排序等常见的排序都可以
// https://leetcode-cn.com/problems/kth-largest-element-in-an-array/submissions/
/**
 * @param {number[]} nums
 * @param {number} k
 * @return {number}
 */
var findKthLargest = function(nums, k) {
    return nums.sort(compareNumbers)[nums.length - k]
};

function compareNumbers(a, b) {
  return a - b;
}

sort 的源码实现目前有新旧两版 旧版的是根据数组的长度,内部调用的不同的算法来实现的,数组小于10的时候调用的是插入排序 数组大于10的时候 使用的是快排

具体可以看这里https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js

新版的看这里 https://github.com/v8/v8/blob/master/third_party/v8/builtins/array-sort.tq

更新-2020-06-08

// 这题是leetcode第一题 https://leetcode-cn.com/problems/two-sum/
// 可以使用暴力穷举法进行,也可以采用HashMap,这里采用的是HashMap来实现
/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number[]}
 */
var twoSum = function (nums, target) {
    let myMap = Object.create({});
    var index = 0;
    for (var value of nums) {
        if (myMap[target - value] !== undefined) {
            return [myMap[target - value], index]
        }
        myMap[value] = index;
        index += 1;
    }
};

执行用时 :60 ms, 在所有 JavaScript 提交中击败了97.56%的用户

内存消耗 :37.9 MB, 在所有 JavaScript 提交中击败了5.08%的用户

分类
未分类

GIS基础科普1-坐标系与地图投影

北京54坐标系 是参心坐标系 因为原点离国内太远,所以国内使用实际误差较大

西安80坐标系 是参心坐标系 换了一个大地基准面,大地原点设在陕西省泾阳县永乐镇 基准面采用的是青岛验潮站1952年到1979年确定的黄海平均海水面 也叫85高程

国家CGCS2000的坐标系原点 是整个地球的质量中心  也叫地心坐标系  参考椭球参数基本与WGS84椭球体差不多 两个坐标系的坐标精度要求不高的情况下可以直接使用

两个不同的三维空间直角坐标系之间转换时,通常使用七参数模型,需要知道7个未知参数

3个坐标的平移量 3个坐标轴的旋转角度 加上一个尺度因子K 一共七个参数

分类
未分类

deno的初体验-环境安装与第一个程序

denoDeno 的目标是为现代程序员提供一个高效、安全的脚本环境。

它始终以单个可执行文件形态,作为分发文件,并且该可执行文件,足够运行任何 deno 程序。

给定一个 deno 程序的 URL,您应该能够用不超过 50MB 的 Deno 可执行文件,来执行它。

Deno 明确承担运行时,和包管理器的角色。它用标准的浏览器兼容协议,来加载模块:URLs。

Deno 为提供了程序访问系统的安全保证,默认情况下,它是最严格的安全沙盒。Deno 提供一套经过评审(审核)的标准模块这保证了与 Deno 的合作。
windows 下安装Deno 在 OSX、Linux 和 Windows 上工作。deno 是单个二进制可执行文件。它没有外部依赖关系。deno_install提供方便的脚本,来下载和安装二进制文件。

使用 Shell:

$ curl -fsSL https://deno.land/x/install/install.sh | sh

使用 PowerShell:

> iwr https://deno.land/x/install/install.ps1 | iex

使用Scoop(Windows):

scoop install deno


也可以通过github.com/denoland/deno/releases下载 tarball 或 zip 文件,手动安装 deno。这些包只包含一个可执行文件。您必须在 Mac 和 Linux 上,设置可执行的环境变量(PATH)。

安装完成之后初体验
新建一个 helloworld.ts在里面写下

console.log("hello world");

终端中运行

deno run .\helloworld.ts

新建一个 a.ts

export const a = {  name: "i am a",};

在helloworld.ts中引入

import { a } from "./a.ts";
console.log("hello world",a.name);

注意a.ts 的后缀目前版本并不能省略,需要明确写出

先体验到这里,后续在更新

分类
未分类

学习网站记录

项目模板:https://github.com/gothinkster/realworld

博客:V8: https://v8.dev/

Chromium:https://blog.chromium.org/

Google:https://web.dev/blog/

React Dan:https://overreacted.io/

Chrome Manager:https://medium.com/@addyosmani

Google Chrome Developer: https://jakearchibald.com/
Vue: https://zhuanlan.zhihu.com/evanyou

设计模式:https://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html

司徒正美:https://www.cnblogs.com/rubylouvre/
Egg:https://www.yuque.com/egg

Taobao: https://fed.taobao.org/blogs/?spm=taofed.homepage.header.3.7eab5ac8VeGZCx

腾讯:http://www.alloyteam.com/page/0/

网易:https://zhuanlan.zhihu.com/musicfe

编码规范 https://github.com/ecomfe/spec
JavaScript权威指南pdf版 http://rjxz7.gds.name/2015/JavaScriptqwzn6.pdf
git 简易指南 http://rogerdudler.github.io/git-guide/index.zh.html
svn 手册 http://svnbook.red-bean.com/nightly/zh/index.html
史上最全设计模式导学目录 https://blog.csdn.net/lovelion/article/details/17517213
koa实战项目教程 https://github.com/ikcamp/koa2-tutorial
博客工具
git book http://www.chengweiyang.cn/gitbook/index.html
vuepress https://www.vuepress.cn/

《CSS选择器》作者 张鑫旭:https://www.zhangxinxu.com/

木易杨前端进阶 https://muyiy.cn/blog/

冴羽 https://github.com/mqyqingfeng/Blog

cesium介绍 http://cesium.marsgis.cn/go.html?id=cesium-started


Vue 相关源码地址:

vue2.0         https://github.com/vuejs/vue

Vue3.0         https://github.com/vuejs/vue-next

Vuex            https://github.com/vuejs/vuex

Vue-Router  https://github.com/vuejs/vue-router

Nuxt             https://github.com/nuxt

LRU缓存机制:

介绍:https://baike.baidu.com/item/LRU

LeetCode:  https://leetcode-cn.com/problems/lru-cache/solution/lru-huan-cun-ji-zhi-by-leetcode/

最佳实践: https://github.com/isaacs/node-lru-cache

Canvas学习 https://827652549.github.io/CanvasStudy/

分类
未分类

JS 排序方法总结

正序排序:

function campare(value1,value2){

if(value1>value2){

return 1;

}else if(value1 == value2){

return 0;}else{

return -1;

}}

降序排序:

function campare(value1,value2){

if(value1<value2){

return 1;}else if(value1 == value2){

return 0;

}else{

return -1;

}}

冒泡排序:

function sort(arr) {

for (let i = 0; i < arr.length – 1; i++) {

for (let j = 0; j < arr.length – 1; j++) {

if (arr[j] > arr[j + 1]) {

let temp = arr[j];

arr[j] = arr[j + 1];

arr[j + 1] = temp;

}

}

}

return arr;

}