vue
SunShinessx
这个作者很懒,什么都没留下…
展开
-
vue组件keep-alive的应用及原理
介绍keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中,而不是直接将其销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中。它提供了include与exclude两个属性,允许组件有条件地进行缓存。应用场景比如移动端页面的基本架构是tab点击来切换页面。每个页面都是一个组件,每次切换路由,都会重新渲染这个组件。都得重新请求数据...原创 2019-03-25 15:54:58 · 478 阅读 · 0 评论 -
Vue源码阅读笔记(三) VNode
VNode的结构:export interface VNode { tag?: string; data?: VNodeData; children?: VNode[]; text?: string; elm?: Node; ns?: string; context?: Vue; key?: string | number; componentOptio...原创 2019-05-18 19:39:42 · 407 阅读 · 0 评论 -
Vue源码阅读笔记(二) vue实例挂载$mount
vue实例创建的最后一步是$mount。$mount的核心是mountComponent。mountComponent的核心思路:生成一个updateComponent函数,updateComponent用于生成一个虚拟Dom树,然后执行_update函数。mountComponentupdateComponent会传给mountComponent还生成一个Watcher对象,u...原创 2019-05-18 19:17:13 · 423 阅读 · 0 评论 -
Vue源码阅读笔记(一)new Vue 实例
一.new Vue 发生了什么?很简单:初始化传入的options,生成一个vue实例function Vue (options) {this._init(options)}二._init做了什么?Vue.prototype._init = function (options) { var vm = this; // a uid vm._uid = ...原创 2019-05-18 18:10:08 · 279 阅读 · 0 评论 -
实现一个简单的类 Vue 框架(二) —— 数据的绑定之修改可监听的数据绑定方法
Vue是MVVM框架,也就是M(数据)的变化能够驱动V(模板)的变化,所以数据修改可响应的实现是一个关键点。实现数据变化可响应的方法很多,事件驱动,广播,订阅等方法,而Vue使用的是js的原生API Object.defineProperty。这种实现方法的优点是:实现简单。缺点是:只能兼容到IE9以上。针对上一篇文章:https://blog.csdn.net/SunShinessx...原创 2019-05-17 19:32:43 · 252 阅读 · 0 评论 -
实现一个简单的类 Vue 框架(一) —— 数据的绑定之简单粗暴方法
Vue框架的核心概念一个是数据绑定,一个是虚拟Dom;先实现数据绑定。本框架命名为Sue。旨在模拟实现一个类Vue一.最简单粗暴的数据绑定方法要点:1.call的使用。2.for in代码:/* 最简单粗暴的数据绑定 */function Sue(options) { initData(this,options) if (typeof options.read...原创 2019-05-17 15:12:10 · 434 阅读 · 0 评论 -
如何debug Vue源码
1.首先用Vue-cli或者直接构建webpack引入带compile 版本的Vue。让vue项目可以跑起来。项目可以很简单,最主要是跑起来即可2.其次,查看webpack alias 配置:这里说明我们在import vue的时候,引入的vue源文件是在哪里:从webpack配置中可以看出,vue是引入node_modules的Vue-->dist-->vue.esm....原创 2019-05-17 11:16:04 · 2274 阅读 · 0 评论 -
Vue基础总结系列文章第四篇---computed和watch的区别
一.两者共同点computed 和watch 都是监听某个值,然后计算新的值,或者触发某个操作,注意在computed 和watch 一定不要去修改原来的值,否则可能会导致无限循环问题。二.两者区别1.computedcomputed的缓存特性,体现在当页面重新渲染的时候,computed观察的属性只要不变,computed就不重新计算,会使用之前缓存的数据。而用函数计算则...原创 2019-04-15 16:14:59 · 234 阅读 · 0 评论 -
Vue基础总结系列文章第三篇---响应式数据更新
Vue是MVVM框架,数据的更新会触发模板的更新。核心是通过Object.defineProperty来实现的。但是具体的要点还有这些:1.数据来源:来自父组件的props,自身的状态data,还有公共状态vuex等。这些的改变都可能触发视图的更新。2.数据只有在初始化的时候,模板有用到的,才会被放入watcher里面,后期 修改才会触发视图更新,否则不会。3.data只有放在re...原创 2019-04-15 10:33:22 · 212 阅读 · 0 评论 -
Vue基础总结系列文章第二篇---双向数据绑定
首先必须明确:vue是单向数据流,双向数据绑定(v-model)只是一种语法糖。一.双向数据绑定的两种实现方法参考代码:https://github.com/ssxsite/vue2-webpack_update/blob/master/practice/component/model1.js二。v-model 修改成监听change模式参考代码:https://...原创 2019-04-14 20:22:45 · 271 阅读 · 0 评论 -
Vue基础总结系列文章第一篇---组件
一.组件是vue的核心概念之一一个Vue组件就是一个vue实例,通过传入不同的options来实现组件的自义定化。组件是vue运行的最小单位。二。组件的三大核心概念之一--属性(props)pros写法注意点:要这样写才规范:有趣的是:props可以传入一个函数子组件不能直接修改父组件传递的props,那么要修改可以通过父组件传递的函数,来间接修改...原创 2019-04-14 14:38:49 · 261 阅读 · 0 评论 -
Vue 实现的递归组件如何向外传递事件和数据
一.递归组件向外传递数据直接用$emit是无法实现的。因为是递归的原因。2.解决方法:1方法1::用provide,inject方法实现。这种实现方法是实现爷爷组件和孙子组件通信的常用方法之一。但是逻辑上,爷爷组件和孙子组件之间是有耦合关系。如果组件封装需要尽量实现解耦,这种方式是有缺点的。2.方法2:用eventBus实现:这种方法用在兄弟组件之间通信很常见。当然也可以用在爷爷...原创 2019-09-15 18:48:44 · 5207 阅读 · 2 评论