xuan的博客

一、初始化状态（1）当我们使用Vue.js开发应用时，经常会使用一些状态，例如props、methods、data、computed和watch。在Vue.js内部，这些玩状态在使用之前需要进行初始化。（2）initState函数export function initState(vm){ vm._watchers = []; const opts = vm.$options;...

一、初始化实例属性（1）在Vue.js的整个生命周期中，初始化实例属性是第一步。（2）需要实例化的属性既有Vue.js内部需要用到的属性（如vm._watcher），也有提供给外部使用的属性（例如vm.$parent）。（3）以$开发的属性是提供给用户使用的外部属性，以_开头的属性是提供给内部使用的内部属性。（4）Vue.js通过initLifecycle函数向实例中挂载属性，该函...

一、概述（1）每个Vue.js实例在创建时都要经过一系列初始化，例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。（2）同时，也会运行一些叫作生命周期钩子的函数，只给在不同阶段添加自定义代码的机会。二、生命周期图示Vue.js生命周期可以分为4个阶段：初始化阶段、模板编译阶段、挂载阶段、卸载阶段。 初始化阶段 （1）new Vue（）到cr...

一、Vue.useVue.use(plugin);（1）参数{ Object | Function }plugin（2）用法安装Vue.js插件。如果插件是一个对象，必须提供install方法。如果插件是一个函数，它会被作为install方法。调用install方法时，会将Vue作为参数传入。install方法被同一个插件多次调用时，插件也只会被安装一次。（3）作用...

一、Vue.directiveVue.directive(id,[definition]);（1）参数{string }id { Function | Object } [definition ]（2）用法注册或获取全局指令。<!-- 注册 -->Vue.directive('my-directive',{ bind:function(){}, ...

一、Vue.nextTickVue.nextTick([callback,context]);（1）参数{ Function } [callback] { Object } [context]（2）用法在下次DOM更新渲染结束之后执行延迟回调，修改数据之后立即使用这个方法获取更新后的DOM。（3）示例<!-- 修改数据 -->vm.msg = 'Hel...

一、Vue.extendVue.extend( optons );（1）参数{object }options（2）用法使用基础Vue构造器创建一个“子类”，其参数是一个包含“组件选项”的对象。data选项是特例，在Vue.extend（）中，它必须是函数。<div id="mount-point"></div><!-- 创建构造器 -...

一、概述（1）不常用该方法，原因是如果在实例化Vue.js时设置了el选项，会自动把Vue.js实例挂载到DOM元素上。（2）但是，无论我们在实例化Vue.js时是否设置了el选项，想让Vue.js实例具有关联的DOM元素，只有使用vm.$mount方法这一途径。二、使用方式 vm.$mount( [elementOrSelecotr] )（1）参数{ Element }...

一、vm.$nextTick（1）nextTick接收一个回调函数作为参数，它的作用是将回调延迟到下次DOM更新周期之后执行。（2）它与全局Vue.nextTick一样，不同是是回调的this自动绑定到调用它的实例上。（3）如果没有提供回调且在支持Promise的环境中，则返回一个Promise。（4）在Vue.js中，当状态发生改变时，watcher会得到通知，然后触发虚拟DOM...

一、生命周期相关的实例方法（1）vm.$destroy、vm.$forceUpdate从lifecycleMixin中挂载到Vue构造函数的prototype属性上。export function lifecycleMixin(Vue){ Vue.prototype.$forceUpdate = function(){ //做点什么 } Vue.prototype.$des...

一、Vue构造函数import { initMinxin } from './init'import { stateMinxin } from './state'import { renderMinxin } from './render'import { eventsMinxin } from './events'import { lifecycleMinxin } from '....

一、概述（1）在Vue.js中创建HTML并不是只有模板这一种途径。既可以手动写渲染函数来创建HTML，也可以在Vue.js中使用JSX来创建HTML。（2）渲染函数是创建HTML最原始的方法。（3）模板最终会通过编译转换成渲染函数，渲染函数执行后，会得到一份vnode用于虚拟DOM渲染。所以模板编译其实是配合虚拟DOM进行渲染。（4）模板编译所介绍的内容是如何让虚拟DOM拿到vn...

一、概述（1）虚拟DOM最核心的部分是path，它可以将vnode渲染成真实的DOM。（2）patch也可以叫作patching算法，通过它渲染真实DOM时，并不是暴力覆盖原有DOM，而是比对新旧两个vnode之间有哪些不同，然后根据对比结果找出需要更新的节点进行更新。（3）patch本身就有补丁、修补等意思，其实际作用是在现有DOM上进行修改来实现更新视图的目的。（4）原因：DO...

一、什么是VNode（1）Vue.js中存在一个VNode类，使用它可以实例化不同类型的vnode实例，而不同类型的vnode实例各自表示不同类型的DOM元素。（2）其实vnode只是一个名字，本质上其实是Javascript中一个普通的对象，是从VNode类实例化的对象。我们用这个Javascript对象来描述一个真实DOM元素的话，那么该DOM元素上的所有属性在VNode这个对象上都存...

一、什么是虚拟DOM（1）Vue是声明式操作DOM。（2）我们通过描述状态和DOM之间的映射关系是怎样的，就可以将状态渲染成视图。关于状态到视图的转换过程，框架会帮我们做，不需要我们自己动手去操作DOM。（3）应用中所使用的变量都是状态。（4）状态可以是Javascript中的任意类型。Object、Array、String、Number、Boolean等都可以作为状态，这些状态可...

一、作用（1）vm.$delete的作用是删除数据中个某个属性。（2）由于Vue.js的变化侦测是使用Object.defineProperty实现的，所以如果数据使用delete关键字删除的，那么无法发现数据发生了变化。（3）为了解决这个问题，Vue.js提供了vm.$delete方法来删除数据种的某个属性，并且词时Vue.js可以侦测到数据发生了变化。二、用法vm.$de...

一、用法vm.$set(target,key,value)（1）参数{Object | Array} target {string | number} key {any} value（2）返回值{ Function } unwatch（3）用法在object上设置一个属性，如果object是响应式的，Vue.js会保证属性被创建后也是响应式的，并且触发视图更新。这个...

一、vm.$watch（1）用法vm.$watch(expOrFn,callback,[options])（2）参数1、{string | Function} expOrFn2、{Function | Object} callback3、{Object} [options]{boolean} deep{boolean} immediate（3）返回值...

为什么Array和Object的侦测方式不同object通过getter/setter来实现侦测，但数组中有许多方法，如push来改变数组，但它并不会出发getter/setter。正因为我们可以通过Array原型上的方法来改变数组的内容，所有object那种通过getter/setter的实现方式就行不通了。一、如何追踪变化（1）可以用自定义的方法去覆盖原生的原型方法。（2）可以使...

Vue.js （1）渐进式框架。所谓渐进式框架，就是把框架分层。（2）最核心的部分是视图层渲染，然后往外是组件机制，再这个基础上再加入路由机制，再加入状态管理，最外层是构建工具。（3）所谓分层，就是说你既可以只用最核心的视图层渲染功能来快速开发一些需求，也可以使用一整套全家桶来开发大型应用。Vue.js有足够的灵活性来适应不同的需求，所以你可以根据自己的需求选择不同的层级。 ...