Barry's Blog

vue父子组件的生命周期顺序加载渲染过程1父beforeCreate -> 父created-> 父beforeMount-> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 父组件会先执行到beforeMount，接着会执行子组件钩子到挂载结束，再挂载父组件。 子组件更新过程1父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated 父组件更新过程1父beforeUpdate -> 父updated 销毁过程1父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔记/02.组件/90.vue父子组件的生命周期顺序.md。原作者：xugaoyi。许可证：MIT。

vue中使用Animate.css库自定义过渡类名我们可以通过以下 attribute 来自定义过渡类名： enter-class enter-active-class enter-to-class (2.1.8+) leave-class leave-active-class leave-to-class (2.1.8+) 他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css结合使用十分有用。 使用Animate.css库1234567<transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hel...

非父子组件间传值当组件的嵌套多时，非父子组件间传值就显得复杂，除了使用vuex实现之外，还可以通过Bus（或者叫 总线/发布订阅模式/观察者模式）的方式实现非父子组件间传值。 123456789101112131415161718192021222324252627282930313233343536373839404142<div id="root"> <child1 content="组件1：点我传出值"></child1> <child2 content="组件2"></child2></div>&lt;script type="text/javascript"> Vue.prototype.bus = new Vue() // 每个Vue原型上都会有bus属性,而且指向同一个Vue实例 Vue.component('child1', ...

自定义事件API 在组件标签v-on绑定的事件是自定义事件123456789101112131415161718<div id="root"> <child @click="handleClick"></child> <!--这里click是自定义事件--></div>&lt;script type="text/javascript"> Vue.component('child', { template: '<button>Child</button>', }) var vm = new Vue({ el: '#root' methods: { handleClick() { alert('...

使用组件的细节点解析 DOM 模板时的注意事项1234567891011121314151617<div id="root"> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table></div>&lt;script type="text/javascript"> Vue.component('row', { template: '<tr><td>this is a row</td></tr>' }) var vm = new Vue({ ...

函数式编程JavaScript 语言从一诞生，就具有函数式编程的烙印。它将函数作为一种独立的数据类型，与其他数据类型处于完全平等的地位。在 JavaScript 语言中，你可以采用面向对象编程，也可以采用函数式编程。有人甚至说，JavaScript 是有史以来第一种被大规模采用的函数式编程语言。 ES6 的种种新增功能，使得函数式编程变得更方便、更强大。本章介绍 ES6 如何进行函数式编程。 柯里化柯里化（currying）指的是将一个多参数的函数拆分成一系列函数，每个拆分后的函数都只接受一个参数（unary）。 12345function add (a, b) { return a + b;}add(1, 1) // 2 上面代码中，函数add接受两个参数a和b。 柯里化就是将上面的函数拆分成两个函数，每个函数都只接受一个参数。 12345678910function add (a) { return function (b) { return a + b; }}// 或者采用箭头函数写法const a...

最新提案本章介绍一些尚未进入标准、但很有希望的最新提案。 do 表达式本质上，块级作用域是一个语句，将多个操作封装在一起，没有返回值。 1234{ let t = f(); t = t * t + 1;} 上面代码中，块级作用域将两个语句封装在一起。但是，在块级作用域以外，没有办法得到t的值，因为块级作用域不返回值，除非t是全局变量。 现在有一个提案，使得块级作用域可以变为表达式，也就是说可以返回值，办法就是在块级作用域之前加上do，使它变为do表达式，然后就会返回内部最后执行的表达式的值。 1234let x = do { let t = f(); t * t + 1;}; 上面代码中，变量x会得到整个块级作用域的返回值（t * t + 1）。 do表达式的逻辑非常简单：封装的是什么，就会返回什么。 12345// 等同于 <表达式>do { <表达式>; }// 等同于 <语句>do { <语句> } do表达式的好处是可以封装多个语句...

SIMD概述SIMD（发音/sim-dee/）是“Single Instruction/Multiple Data”的缩写，意为“单指令，多数据”。它是 JavaScript 操作 CPU 对应指令的接口，你可以看做这是一种不同的运算执行模式。与它相对的是 SISD（“Single Instruction/Single Data”），即“单指令，单数据”。 SIMD 的含义是使用一个指令，完成多个数据的运算；SISD 的含义是使用一个指令，完成单个数据的运算，这是 JavaScript 的默认运算模式。显而易见，SIMD 的执行效率要高于 SISD，所以被广泛用于 3D 图形运算、物理模拟等运算量超大的项目之中。 为了理解 SIMD，请看下面的例子。 123456789var a = [1, 2, 3, 4];var b = [5, 6, 7, 8];var c = [];c[0] = a[0] + b[0];c[1] = a[1] + b[1];c[2] = a[2] + b[2];c[3] = a[3] + b[3];c // Array[6, 8, 1...

参考链接官方文件 ECMAScript® 2015 Language Specification: ECMAScript 2015 规格 ECMAScript® 2016 Language Specification: ECMAScript 2016 规格 ECMAScript® 2017 Language Specification：ECMAScript 2017 规格（草案） ECMAScript Current Proposals: ECMAScript 当前的所有提案 ECMAScript Active Proposals: 已经进入正式流程的提案 ECMAScript proposals：从阶段 0 到阶段 4 的所有提案列表 TC39 meeting agendas: TC39 委员会历年的会议记录 ECMAScript Daily: TC39 委员会的动态 The TC39 Process: 提案进入正式规格的流程 TC39: A Process Sketch, Stages 0 and 1: Stage 0 和 Stage 1 的含义 TC39 Process S...

Symbol概述ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。 ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。 Symbol 值通过Symbol函数生成。这就是说，**对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。**凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。 1234let s = Symbol();typeof s// "symbol" 上面代码中，变量s就是一个独一无二的值。typeof运算符的结果...