Tomorrow

我学了多少技术 读了多少本书

学习MutationObserver

原生API-MutationObserver观察者

MutationObserver Mutation Observer API 用来监视DOM变动。DOM的任何变动,比如节点的增删、属性的变动、文本内容的变化,这个API都可以得到通知。 首先这个API归属于微任务,也就是说是异步的,这样设计也是为了应付Dom变动频繁的特点,防止频繁变动占用js执行栈造成页面卡顿。比如说:如果不是异步当DOM变动触发观察者的回调函数执行,就会堵塞后续代码的...

MessageChannel消息频道

学习MessageChannel消息频道

MessageChannel MessageChannel可以实现一个通讯机制,允许我们创建一个新的消息通道。它是一个构造函数。 实例化 const channel = new MessageChannel(); console.log(channel); 实例化对象上有两个MessagePort对,象并且这两个对象是只读的。这两个对象间可以相同通信。例如: const channel...

两种方式实现超简单的数据双向绑定

探究第一步:两种方式实现超简单的数据双向绑定

Object.defineProperty Proxy/Reflect Object.defineProperty Object.definedPropery是ES5的一种方式,需要使用一个中间人角色,作为中间数据交换者。 var input = document.querySelector("#input"); var obj = {}; var a; Object.defi...

Vue组件缓存:Keep-alive

Vue keep-alive组件缓存

页面缓存 在Vue构建的单页面应用(SPA)中,路由模块一般使用vue-router。vue-router不保存被切换组件的状态,也就是说,当组件切换的时候,旧组件会被销毁,而新组件会被建立,走一遍完整的生命周期。 但有时候,我们有这样一个需求,比如跳转到详情页面时,需要保持列表页的滚动条的深度,等返回的时候依然在这个位置,这样可以提高用户体验。在Vue中,对于这种页面缓存的需求,我们可以...

Vue hooks初体验

初探Vue Hooks

自从React出了hooks之后,Vue也相继除了hooks这个东西。我们都知道Vue是可以使用JSX语法的,使用JSX语法的Vue hooks和React hooks并不相差多少。并且使用React形式的hooks在vue中是可以运行的。 hooks vue hooks包括以下几种: import { withHooks, //使用hooks,return出组件 use...

Vue的生命周期

学习Vue的生命周期

Vue的每个实例在被创建时都要经过一系列的初始化过程,例如:需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。这个钩子给了开发者在不同阶段添加自己代码的机会。 Vue的生命周期可以大致分为四个阶段:创建->挂载->更新->销毁。 Vue声明周期图 由上面图可以看出,每个阶段都有与之相对应...

Vue-Directive

Vue自定义指令

Vue有着它的很强大的指令系统。回顾一下什么是指令:例如v-on,v代表vue,on表示指令名。 Vue是提供自定义指令的,使用Vue.directive方法就可以自定义属性。 Vue.directive方法有两个参数: 第一个参数是指令的名字,例如:on。 第二个参数是一个对象,对象的属性是指令的相关钩子函数, 其他情况下,第二个参数也可以写成一个函数,函数参数和钩子函数...

Vue动画效果

初识Vue动画效果

Vue原生有一个transition组件,可以用于做动画。把想要做动画的DOM元素放在transiton标签内就可以了。Vue原生只是提供了这样一种途径,但是并没有提供动画效果,动画效果还需要我们开发者自己来做。 过渡类名 Vue动画使用一系列钩子来得到动画执行时期的状态。 在进入/离开的过渡中,会有 6 个 class 切换: v-enter:定义进入过渡的开始状态。在元素被插入之...

Vue组件与异步获取数据的方式

Vue定义组件,异步获取数据

定义一个组件 声明组件使用Vue.component方法,这个方法有两个参数,一个是定义组件的名字,另一个是一个对象,相当于实例化Vue所传入的对象。 Vue.component('my-app',{ template : "<h1>Hello Vue</h1>" //template 是组件模板 }) 上述就定义好了一个组件,使用直接在把<my-a...

Vue基础-样式转换

Vue样式转换相关:style转换与class转换

样式转换 前端如果不能交互改变css样式的话,那么连咸鱼都不如。 vue改变样式有两种方式:一种是通过内联style改变;一种是通过class改变。 内联style改变 我们都知道v-bind可以为DOM元素绑定属性,既然可以绑定属性,那么就可以绑定style属性,通过style来改变样式。 当DOM元素中同时存在style和v-bind:style的时候,vue会自动的将两个样式进行一...