Jungle

组件声明在React中，组件的声明方式有两种：函数组件和类组件， 来看看这两种类型的组件声明时是如何定义TS类型的。 类组件类组件的定义形式有两种：React.Component<P, S={}> 和 React.PureComponent<P, S={} SS={}>，它们都是泛型接口，接收两个参数，第一个是props类型的定义，第二个是state类型的定义，这两个参数都不是必须的，没有时可以省略： 12345678910111213141516171819202122232425interface IProps { name: string;}interface IState { count: number;}class App extends React.Component<IProps, IState> { state = { count: 0 }; render() { retur ...

React生命周期 挂载卸载过程constructor()constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。 注意：只要使用了constructor()就必须写super(),否则会导致this指向错误 componentWillMount()componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。 render（）componentDidMount()组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染 componentWillUnmount ()在此处完成组件的卸载和数据的销毁。 clear你在组建中所有的setTimeout,setInterval 移除所有组建中的监听 removeEventListener 有时候我们会碰到这个warning: 1Can only update ...

自我介绍项目介绍(做什么的)平台用户角色不同权限怎么做校验复制已登录角色链接到其他浏览器，会发生什么如何拆分和设计组件1、使用的场景：不同的场景需求也不一样 2、组件对外暴露的字段 什么是面向对象继承的设计上，是为了方便什么1、简单来说是为了更好复用代码 2、js怎么实现封装和继承 对MVVM框架的理解vm是连接视图层和数据层的桥梁 双向绑定的原理数据劫持，监听-发布类 vue中的key是做什么用的diff算法简述 vue不能对数组中的某一个数组进行变更原因MVVM框架，数据操作视图。对data对象中的数据进行监听，当侦测到数据改变时相应数据所影响的页面也会触发更新。所以我们所需要的这些响应式数据，受到javascript的限制，vue不能检测到对象属性的添加或删除，因为Vue利用的是Object的defineProperty()方法，在初始化实列时将属性转为getter/setter，所以属性必须在data对象上才能让vue转换它。 当然这只是一般的属性，以一般字符串，数字，布尔值这样的基本数据类型作为属性值的响应，当然我们有时候的诉求的初始化属性的属性值不只有这样的基本数据变量，我 ...

文章转载自看云《剖析vue.js内部运行机制》 总结 & 常见问题解答总结在本小册的第一节中，笔者对 Vue.js 内部运行机制做了一个全局的概览，当时通过下面这张图把 Vue.js 拆分成一个一个小模块来介绍，之后通过这一系列小节的学习，相信大家已经对 Vue.js 内部的原理有了一个更进一步的了解，对这张图也再也不会感觉到那么陌生。 每个小节中的代码都是笔者根据 Vue.js 原理单独抽离出来写成的 Demo，大家可以在我的 Gtihub 上查看完整的代码 (见 VueDemo 项目)。 本小册对 Vue.js 原理进行了初步的介绍，希望能够起到一个抛砖引玉的作用，读者读完以后，可以利用这些基础对 Vue.js 进行一个更加深入的探索，相信会有更大的收获。 常见问题 怎么实现 this._test 改变而不是 this._data.test 改变触发更新？ 答：其实这中间有一个代理的过程。 1234567891011121314151617_proxy(options.data);function _proxy (data) { const that = ...

Vuex 状态管理的工作原理为什么要使用 Vuex当我们使用 Vue.js 来开发一个单页应用时，经常会遇到一些组件间共享的数据或状态，或是需要通过 props 深层传递的一些数据。在应用规模较小的时候，我们会使用 props、事件等常用的父子组件的组件间通信方法，或者是通过事件总线来进行任意两个组件的通信。但是当应用逐渐复杂后，问题就开始出现了，这样的通信方式会导致数据流异常地混乱。 这个时候，我们就需要用到我们的状态管理工具 Vuex 了。Vuex 是一个专门为 Vue.js 框架设计的、专门用来对于 Vue.js 应用进行状态管理的库。它借鉴了 Flux、redux 的基本思想，将状态抽离到全局，形成一个 Store。因为 Vuex 内部采用了 new Vue 来将 Store 内的数据进行「响应式化」，所以 Vuex 是一款利用 Vue 内部机制的库，与 Vue 高度契合，与 Vue 搭配使用显得更加简单高效，但缺点是不能与其他的框架（如 react）配合使用。 本节将简单介绍 Vuex 最核心的内部机制，起个抛砖引玉的作用，想了解更多细节可以参考笔者 Github 上的另一 ...

批量异步更新策略及nextTick原理为什么要异步更新通过前面几个章节我们介绍，相信大家已经明白了 Vue.js 是如何在我们修改 data 中的数据后修改视图了。简单回顾一下，这里面其实就是一个“setter -> Dep -> Watcher -> patch -> 视图”的过程。 假设我们有如下这么一种情况。 1234567891011121314151617181920<template> <div> <div>{{number}}</div> <div @click="handleClick">click</div> </div></template>export default { data () { return { number: 0 }; }, methods ...

数据状态更新时的差异 diff 及 patch 机制数据更新视图之前讲到，在对 model 进行操作对时候，会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。最终是将新产生的 VNode 节点与老 VNode 进行一个 patch 的过程，比对得出「差异」，最终将这些「差异」更新到视图上。 这一章就来介绍一下这个 patch 的过程，因为 patch 过程本身比较复杂，这一章的内容会比较多，但是不要害怕，我们逐块代码去看，一定可以理解。 跨平台因为使用了 Virtual DOM 的原因，Vue.js具有了跨平台的能力，Virtual DOM 终归只是一些 JavaScript 对象罢了，那么最终是如何调用不同平台的 API 的呢？ 这就需要依赖一层适配层了，将不同平台的 API 封装在内，以同样的接口对外提供。 123456789101112131415161718192021const nodeOps = { setTextContent (text) { if (platform == ...

template 模板是怎样通过 Compile 编译的Compilecompile 编译可以分成 parse、optimize 与 generate 三个阶段，最终需要得到 render function。这部分内容不算 Vue.js 的响应式核心，只是用来编译的，笔者认为在精力有限的情况下不需要追究其全部的实现细节，能够把握如何解析的大致流程即可。 由于解析过程比较复杂，直接上代码可能会导致不了解这部分内容的同学一头雾水。所以笔者准备提供一个 template 的示例，通过这个示例的变化来看解析的过程。但是解析的过程及结果都是将最重要的部分抽离出来展示，希望能让读者更好地了解其核心部分的实现。 1234<div :class="c" class="demo" v-if="isShow"> <span v-for="item in sz">{{item}}</span></div>var html =  ...

实现 Virtual DOM 下的一个 VNode 节点什么是VNode我们知道，render function 会被转化成 VNode 节点。Virtual DOM 其实就是一棵以 JavaScript 对象（VNode 节点）作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。 实现一个VNodeVNode 归根结底就是一个 JavaScript 对象，只要这个类的一些属性可以正确直观地描述清楚当前节点的信息即可。我们来实现一个简单的 VNode 类，加入一些基本属性，为了便于理解，我们先不考虑复杂的情况。 1234567891011121314class VNode { constructor (tag, data, children, text, elm) { /*当前节点的标签名*/ this. ...

响应式系统的依赖收集追踪原理为什么要依赖收集？先举个栗子🌰 我们现在有这么一个 Vue 对象。 123456789101112new Vue({ template: `<div> <span>{{text1}}</span> <span>{{text2}}</span> <div>`, data: { text1: 'text1', text2: 'text2', text3: 'text3' }}); 然后我们做了这么一个操作。 1this.text3 = 'modify text3'; 我们修改了 data 中 text3 的数据，但是因为视图中并不需要用到 text3 ， ...