![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue学习
文章平均质量分 96
zxuanxuanz
这个作者很懒,什么都没留下…
展开
-
深入浅出vue.js----生命周期---初始化状态
一、初始化状态(1)当我们使用Vue.js开发应用时,经常会使用一些状态,例如props、methods、data、computed和watch。在Vue.js内部,这些玩状态在使用之前需要进行初始化。(2)initState函数export function initState(vm){ vm._watchers = []; const opts = vm.$options;...原创 2020-01-14 11:09:53 · 775 阅读 · 0 评论 -
深入浅出vue.js----生命周期---初始化实例属性、事件
一、初始化实例属性(1)在Vue.js的整个生命周期中,初始化实例属性是第一步。(2)需要实例化的属性既有Vue.js内部需要用到的属性(如vm._watcher),也有提供给外部使用的属性(例如vm.$parent)。(3)以$开发的属性是提供给用户使用的外部属性,以_开头的属性是提供给内部使用的内部属性。(4)Vue.js通过initLifecycle函数向实例中挂载属性,该函...原创 2019-12-30 16:59:13 · 1410 阅读 · 0 评论 -
深入浅出vue.js----生命周期篇幅一
一、概述(1)每个Vue.js实例在创建时都要经过一系列初始化,例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。(2)同时,也会运行一些叫作生命周期钩子的函数,只给在不同阶段添加自定义代码的机会。二、生命周期图示Vue.js生命周期可以分为4个阶段:初始化阶段、模板编译阶段、挂载阶段、卸载阶段。 初始化阶段 (1)new Vue()到cr...原创 2019-12-27 15:16:17 · 565 阅读 · 0 评论 -
深入浅出vue.js---全局API的实现原理----Vue.use、Vue.minxin、Vue.compile、Vue.version
一、Vue.useVue.use(plugin);(1)参数{ Object | Function }plugin(2)用法安装Vue.js插件。如果插件是一个对象,必须提供install方法。如果插件是一个函数,它会被作为install方法。调用install方法时,会将Vue作为参数传入。install方法被同一个插件多次调用时,插件也只会被安装一次。(3)作用...原创 2019-12-26 11:54:33 · 551 阅读 · 0 评论 -
深入浅出vue.js---全局API的实现原理----Vue.directive、Vue.filter、Vue.component
一、Vue.directiveVue.directive(id,[definition]);(1)参数{string }id { Function | Object } [definition ](2)用法注册或获取全局指令。<!-- 注册 -->Vue.directive('my-directive',{ bind:function(){}, ...原创 2019-12-25 16:34:59 · 615 阅读 · 0 评论 -
深入浅出vue.js---全局API的实现原理----Vue.nextTick、Vue.set、Vue.delete
一、Vue.nextTickVue.nextTick([callback,context]);(1)参数{ Function } [callback] { Object } [context](2)用法在下次DOM更新渲染结束之后执行延迟回调,修改数据之后立即使用这个方法获取更新后的DOM。(3)示例<!-- 修改数据 -->vm.msg = 'Hel...原创 2019-12-24 17:31:21 · 289 阅读 · 0 评论 -
深入浅出vue.js---全局API的实现原理----Vue.extend
一、Vue.extendVue.extend( optons );(1)参数{object }options(2)用法使用基础Vue构造器创建一个“子类”,其参数是一个包含“组件选项”的对象。data选项是特例,在Vue.extend()中,它必须是函数。<div id="mount-point"></div><!-- 创建构造器 -...原创 2019-12-24 17:04:48 · 968 阅读 · 0 评论 -
深入浅出vue.js----实例方法与全局API的实现原理---生命周期相关的实例方法-vm.$mount
一、概述(1)不常用该方法,原因是如果在实例化Vue.js时设置了el选项,会自动把Vue.js实例挂载到DOM元素上。(2)但是,无论我们在实例化Vue.js时是否设置了el选项,想让Vue.js实例具有关联的DOM元素,只有使用vm.$mount方法这一途径。二、使用方式 vm.$mount( [elementOrSelecotr] )(1)参数{ Element }...原创 2019-12-23 16:05:23 · 338 阅读 · 0 评论 -
深入浅出vue.js----实例方法与全局API的实现原理---生命周期相关的实例方法-vm.$nextTick
一、vm.$nextTick(1)nextTick接收一个回调函数作为参数,它的作用是将回调延迟到下次DOM更新周期之后执行。(2)它与全局Vue.nextTick一样,不同是是回调的this自动绑定到调用它的实例上。(3)如果没有提供回调且在支持Promise的环境中,则返回一个Promise。(4)在Vue.js中,当状态发生改变时,watcher会得到通知,然后触发虚拟DOM...原创 2019-12-04 17:35:58 · 246 阅读 · 0 评论 -
深入浅出vue.js----实例方法与全局API的实现原理---生命周期相关的实例方法-vm.$destroy、vm.$forceUpdate
一、生命周期相关的实例方法(1)vm.$destroy、vm.$forceUpdate从lifecycleMixin中挂载到Vue构造函数的prototype属性上。export function lifecycleMixin(Vue){ Vue.prototype.$forceUpdate = function(){ //做点什么 } Vue.prototype.$des...原创 2019-11-29 16:48:32 · 505 阅读 · 1 评论 -
深入浅出vue.js----实例方法与全局API的实现原理---数据、事件相关的实例方法
一、Vue构造函数import { initMinxin } from './init'import { stateMinxin } from './state'import { renderMinxin } from './render'import { eventsMinxin } from './events'import { lifecycleMinxin } from '....原创 2019-11-26 17:02:43 · 427 阅读 · 0 评论 -
深入浅出vue.js----模板编译原理
一、概述(1)在Vue.js中创建HTML并不是只有模板这一种途径。既可以手动写渲染函数来创建HTML,也可以在Vue.js中使用JSX来创建HTML。(2)渲染函数是创建HTML最原始的方法。(3)模板最终会通过编译转换成渲染函数,渲染函数执行后,会得到一份vnode用于虚拟DOM渲染。所以模板编译其实是配合虚拟DOM进行渲染。(4)模板编译所介绍的内容是如何让虚拟DOM拿到vn...原创 2019-11-20 16:23:14 · 905 阅读 · 0 评论 -
深入浅出vue.js----patch
一、概述(1)虚拟DOM最核心的部分是path,它可以将vnode渲染成真实的DOM。(2)patch也可以叫作patching算法,通过它渲染真实DOM时,并不是暴力覆盖原有DOM,而是比对新旧两个vnode之间有哪些不同,然后根据对比结果找出需要更新的节点进行更新。(3)patch本身就有补丁、修补等意思,其实际作用是在现有DOM上进行修改来实现更新视图的目的。(4)原因:DO...原创 2019-11-19 16:07:30 · 1118 阅读 · 0 评论 -
深入浅出Vue.js----VNode
一、什么是VNode(1)Vue.js中存在一个VNode类,使用它可以实例化不同类型的vnode实例,而不同类型的vnode实例各自表示不同类型的DOM元素。(2)其实vnode只是一个名字,本质上其实是Javascript中一个普通的对象,是从VNode类实例化的对象。我们用这个Javascript对象来描述一个真实DOM元素的话,那么该DOM元素上的所有属性在VNode这个对象上都存...原创 2019-11-19 08:39:08 · 1626 阅读 · 0 评论 -
深入浅出Vue.js----虚拟DOM
一、什么是虚拟DOM(1)Vue是声明式操作DOM。(2)我们通过描述状态和DOM之间的映射关系是怎样的,就可以将状态渲染成视图。关于状态到视图的转换过程,框架会帮我们做,不需要我们自己动手去操作DOM。(3)应用中所使用的变量都是状态。(4)状态可以是Javascript中的任意类型。Object、Array、String、Number、Boolean等都可以作为状态,这些状态可...原创 2019-10-27 21:06:20 · 417 阅读 · 0 评论 -
深入浅出Vue.js----变化侦测相关的API实现原理----vm.$delete
一、作用(1)vm.$delete的作用是删除数据中个某个属性。(2)由于Vue.js的变化侦测是使用Object.defineProperty实现的,所以如果数据使用delete关键字删除的,那么无法发现数据发生了变化。(3)为了解决这个问题,Vue.js提供了vm.$delete方法来删除数据种的某个属性,并且词时Vue.js可以侦测到数据发生了变化。二、用法vm.$de...原创 2019-10-22 15:41:09 · 255 阅读 · 0 评论 -
深入浅出Vue.js----变化侦测相关的API实现原理----vm.$set
一、用法vm.$set(target,key,value)(1)参数{Object | Array} target {string | number} key {any} value(2)返回值{ Function } unwatch(3)用法在object上设置一个属性,如果object是响应式的,Vue.js会保证属性被创建后也是响应式的,并且触发视图更新。这个...原创 2019-10-21 11:22:49 · 297 阅读 · 0 评论 -
深入浅出Vue.js----变化侦测相关的API实现原理----vm.$watch
一、vm.$watch(1)用法vm.$watch(expOrFn,callback,[options])(2)参数1、{string | Function} expOrFn2、{Function | Object} callback3、{Object} [options]{boolean} deep{boolean} immediate(3)返回值...原创 2019-10-19 15:05:50 · 666 阅读 · 0 评论 -
深入浅出vue.js----变化侦测----Array的变化侦测
为什么Array和Object的侦测方式不同object通过getter/setter来实现侦测,但数组中有许多方法,如push来改变数组,但它并不会出发getter/setter。正因为我们可以通过Array原型上的方法来改变数组的内容,所有object那种通过getter/setter的实现方式就行不通了。一、如何追踪变化(1)可以用自定义的方法去覆盖原生的原型方法。(2)可以使...原创 2019-09-19 21:26:03 · 782 阅读 · 0 评论 -
深入浅出vue.js----变化侦测---Object的变化侦测
Vue.js (1)渐进式框架。所谓渐进式框架,就是把框架分层。(2)最核心的部分是视图层渲染,然后往外是组件机制,再这个基础上再加入路由机制,再加入状态管理,最外层是构建工具。(3)所谓分层,就是说你既可以只用最核心的视图层渲染功能来快速开发一些需求,也可以使用一整套全家桶来开发大型应用。Vue.js有足够的灵活性来适应不同的需求,所以你可以根据自己的需求选择不同的层级。 ...原创 2019-09-17 23:15:28 · 636 阅读 · 0 评论