hi_zf的博客

使用方式 jest功能最全配置少有断言库 test-utils sinon 辅助库 创建测试替身

Vetur ESLint Prettier vue-devtools Vetur ESLint ESLint 代码检查工具 devtools vue浏览器插件

Element UI / Ant Design Vue / iView

缺点 解决 预渲染 SSR 动态渲染配置比较繁琐 Nuxt Nuxt核心原理 流程

传统模式 每个url都会重新加载页面 单页面模式根据url加载不同的组件 vue router解决的问题 使用方式 路由类型 底层原理


vue生态虽然没有reactc丰富,但vue技术多为官方提供,使用者不必为选型困扰 vuex状态管理工具 单向数据流: 绿色框为vue的功能,State:响应式数据; Dispatch:派发; Mutations:更改State,在Devtools中记录数据变化,通过插件进一步调试. Action中异步操作,Mutation同步 Vuex如何提供响应式数据? 如何在Vue中使用Vuex 创建 // 创建项目 选择默认配置 vue create vuex-deml1 // 安装vuex cd v

组件实例,组件加载完成后都会有一个组件实例,一般情况下我们只需要操作数据,但是随着业务的复杂,也有需要操作实例的情况 ref 引用信息 在标签中使用ref属性标记标签,在代码中this.refs.XXX 得到引用,如果是普通标签得到的是DOM节点,如果是组件得到的是组件的实例(上图有注释) 跨层获取可以通过parent/children 但是复杂的跨层就会很麻烦,如使用递归: callback ref 利用钩子函数,主动通知消费者 标签: 组件: ...

组件通信

优化前： 优化后： setTimeout是用来延迟代码执行的定时任务，clearTimeout是用来取消setTimeout的定时任务

使用template模式就会很常用 语法糖 标志位 自定义指令有固定的生命周期钩子

每个vue组件在创建的时候都会经过一系列的初始化过程，数据更新的过程也会有一系列的钩子函数 执行业务代码，销毁的时候也会有钩子提供。 创建和销毁只执行一次 创建阶段 更新阶段 销毁阶段 函数式组件 functional: true 无状态 无实例 没有this上下文 无生命周期 这是一个组件 借助函数式组件使用临时变量，计算属性的数据必须是响应式数据 ...

计算属性computed 减少模板计算逻辑 数据缓存 依赖固定的数据类型（响应式数据） 计算属性只在数据改变的时候执行计算 监听watch 更加灵活，通用 watch中可以执行任何逻辑，如函数节流，Ajax异步获取数据，甚至操作DOM vs computed能做的，watch都能做，反之则不行 能用computed的尽量用computed ...

如何处罚组件的更新 数据驱动 数据来源 来自父元素的属性 来自组件自身的状态如data 来自状态管理器，如vuex，Vue.observable 状态 data vs 属性props 状态是来自组件自身的数据 属性是来自父组件的数据 状态的改变未必会触发更新 属性的改变未必会触发更新 状态不会更新的情况 状态未做响应式 模板未用到此状态 响应式更新 在数据层增加了代理层 在获取/维护数据的时候代理层代理； 渲染的过程中： 首先render用到的数据Data会放到Watcher里面，当这些数据

参考 :https://www.w3school.com.cn/xmldom/dom_intro.asp 1.什么是 DOM？ DOM 是 W3C（万维网联盟） 的推荐标准。 DOM 定义了访问诸如 XML 和 XHTML 文档的标准。 “W3C 文档对象模型（DOM）是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。” W3C DOM 被分为 3 个不同的部分/级别（parts / levels）： 核心 DOM 用于任何结构化文档的标准模型 XML.

window.opener.document.all.yszh.value; 定义和用法 opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。 当使用window.open()打开一个窗口，您可以使用此属性返回来自目标窗口源（父）窗口的详细信息。 代码提示：window.opener.close()将关闭源（父）窗口。 ...