2020年12月_zvapour

原创浏览器渲染流程

浏览器渲染流程(css html js)DOM Tree: 浏览器将HTML解析成树形的数据结构CSS Rule Tree: 浏览器将CSS解析成树形的数据结构Render Tree: DOM(Document Object Model)和CSSOM(CSS Object Model)合并生成Render Treelayout: 有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而取计算出每个节点在屏幕中的位置painting: 按照算出来的规

2020-12-30 16:09:49 54

原创 vue注册全局组件

vue注册全局组件 (Vue.component)step1: 自定义弹窗组件<template> <transition name="fade" v-if="true"> <div class="dialog-page"> <div class="dialog-box"> <h3 class="title">{{ title }}</h3> &lt

2020-12-30 09:45:39 385

原创 Vue全局API

Vue全局APIVue.use()如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入当 install 方法被同一个插件多次调用，插件将只会被安装一次。Vue.compile(template)将一个模板字符串编译成 render 函数,只在完整版可用var res = Vue.compile('<div><span>{{ msg }}</span&gt

2020-12-30 09:13:20 127

原创 git stash、git revert、git tag、git restore

git stash没有git add . 和 git commit -m ‘…’,使用git pull 并不能更新远程代码到本地,此时就需要使用git stash来存储未提交的代码git stash save ‘save message’执行存储时添加备注，方便查找，只有git stash也是可以的，只是不方便查找git stash list查看stash存储git stash show (简洁)终端中显示做了哪些改动,默认show第一个存储,后面加stash@{$num}，比如第二个 gi

2020-12-29 17:41:20 375

原创创建文件脚本(.sh文件)

echo "create project folder - input name"read namecd "./src/views"if [ ! -d "$name" ];thensed -i "" '/Vue.use(VueRouter);/i\import '$name'Routes from \"@\/views\/'$name'\/routes\";' ../router/index.tssed -i "" '/Vue.use(Vuex);/i\import '$name'

2020-12-28 10:45:11 1342

原创 Vue -- 插槽

插槽编译作用域父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。插槽可以访问该组件中的变量，而不能访问父模板中的变量后备内容(它只会在没有提供内容的时候被渲染)将它放在标签内具名插槽格式：ps: 一个不带 name 的出口会带有隐含的名字“default”使用：在向具名插槽提供内容的时候，我们可以在一个元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称<!-- <base-layout&gt

2020-12-24 18:06:37 158 2

原创关于vue-class-component和vue-property-decorator以及vuex-class的使用

关于vue-class-component和vue-property-decorator的使用tip: vue-property-decorator 依赖于 vue-class-component(vue-property-decorator 是在 vue-class-component的基础上进行扩展，所以vue-class-component有的vue-property-decorator也有，使用时可以只导入vue-property-decorator，但安装包时两个包都需要下载)基础写法i

2020-12-24 12:08:32 2207

原创 vue响应式原理

vue响应式原理Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。依赖收集：Proxy/Object.defineProperty派发更新：发布订阅模式(观察者模式)Vue不能检测数组和对象的变化对于对象 (Vue3.0 中解决此问题)Vue 无法检测 property 的添加或移除由于 Vue 会在初始化实例时对 property 执行 gett

2020-12-18 14:41:13 104

原创 JSON.parse(JSON.stringify())实现深拷贝的弊端

JSON.parse(JSON.stringify())实现深拷贝的弊端其过程说白了就是利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象；序列化的作用是存储(对象本身存储的只是一个地址映射，如果断电，对象将不复存在，因此需将对象的内容转换成字符串的形式再保存在磁盘上 )和传输（例如如果请求的Content-Type是 application/x-www-form-urlencoded，则前端这边需要使用qs.stringify

2020-12-18 14:16:33 839

原创 Generator

Generator执行Generator函数会返回一个遍历器对象（iterator）return不会被for…of遍历function* foo(){ yield 'hello'; yield 'world'; return 'ending';}const foo = foo()foo.next()foo.next()foo.next() // {value:'ending',done:true}yield表达式后面的表达式，只有当调用next方法、内部指针指向该语

2020-12-09 17:21:36 64

原创 Iterator接口

iterator接口默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”const arr = ['a','b','c']const iter = arr[Symbol.iterator]()iter.next()console.log(iter.next()) // {value:'b',done:false}原生具备iterator接口的数据结构：ArrayS

2020-12-07 20:02:36 714

原创函数节流、函数防抖

函数防抖(debounce)搜索事件短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。(触发重新计时)// 微信小程序module.exports = Behavior({ data: { canRun: true, timer: null, }, methods: { debounce(callback, wait = 800) { const { canRun, timer } = this.data;

2020-12-07 11:09:28 217

原创 Set Map 解构赋值

Set类似于数组，但是成员的值都是唯一的，没有重复的值for-of可以用于遍历Map和Set，for-in不行ps: set内部两个NaN是相等的方法: const s = new Set()s.add()add方法返回的是当前的Map对象，因此可以采用链式写法s.delete()s.has()s.clear()s.keys()Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致s.va

2020-12-04 19:51:08 411

原创 es10新特性

es10新特性可选链 ?.在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefinedconst obj = {first:{second:{third:'老三'}}}obj.first?.second // {third:'老三'}obj.first?.name // undefinedobj.first?.second?.third // '老三'空值合并运算符 ??当左侧的操作数为 null 或者 un

2020-12-02 18:56:38 369 1

原创正则全局匹配 g

正则的全局匹配 g每次匹配使用当前正则对象的lastIndex属性的值作为在目标字符串中开始查找的起始位置。lastIndex属性的初始值为0，找到匹配的项后lastIndex的值被重置为匹配内容的下一个字符在字符串中的位置索引，用来标识下次执行匹配时开始查找的位置,如果找不到匹配的项lastIndex的值会被设置为0。当没有设置正则对象的全局匹配标志时lastIndex属性的值始终为0，每次执行匹配仅查找字符串中第一个匹配的项。var str = "123#abc"; var re = /abc/i

2020-12-02 18:27:41 868

原创 proxy reflect使用

使用Proxy实现观察者模式// 观察队列const queueObservers = new Set();// 观察队列添加方法const observers = (fn) => queueObservers.add(fn);// 观察对象const observable = (obj) => new Proxy(obj, { set(target, key, value, receiver) { Reflect.set(target, key, val

2020-12-01 18:16:56 90

原创 Proxy

proxy要使得Proxy起作用，必须针对Proxy实例进行操作，而不是针对目标对象进行操作Proxy 拦截函数内部的this，指向的是handler对象get(target,key,receiver)set(target,key,value,receiver)apply(target,ctx,args)拦截函数的调用，包括call和apply操作function fn() { return 'i am target';}const proxy = new Proxy(fn

2020-12-01 18:15:31 113

qq_36303110的博客