模板中的插入变量是如何渲染到DOM上的？

initMixin(Vue)->_init->$options-> $mount()当执行该挂载方法时DOM变化

为什么可以通过this访问到data里面的数据？

initstate(vm)->initData()->proxy(vm,_data,key)代理函数

所以我们也可以同过this._data.dataName获取到数据

$mount的实现

$mount->处理e（编译，转化成render函数）->mountComponent()->updateComponent()->渲染Wather

vm._render的实现

_render->从vm.options拿到render->render.call(vm._renderProxy,vm.$createElement)->initProxy->hasHandler判断元素如果不在target上，则会报错warnNonPresent-> 返回vnode

虚拟Dom

  1. VNodeData定义在flow/vnode.js （创建虚拟DomTree）
  2. create-element–>
  3. 参数重载->
  4. _createElement->
  5. 对data校验（如果是响应式的 return create EmptyVnode() (vnode.js)）->
  6. 对children做normalizetionChildren(normalize-chiildren.js) 多维数组变一维数组->
  7. 对tag进行判断（字符串还是组件）->
  8. 创建Dom

  1. _update定义在src/core/instance/lifecycle.js （渲染）

  2. vm.__patch__

  3. patch

  4. createPatchFunction ( 内部定义了一系列的辅助方法，最终返回了一个 patch 方法，这个方法就赋值给了 vm._update 函数里调用的

    vm.__patch__

    )

    函数柯里化

    1. createElm （通过虚拟节点创建真实的 DOM 并插入到它的父节点中）
    2. createChildren
    3. invokeCreateHooks

组件化

createCompment

  • createElement
  • _createElement(对Tag判断)
  • createComponent

patch

整体流程
重要属性
  • activeInstance
  • vm.$vnode
  • vm._vnode
嵌套组件插入顺序

Vuex

Vue组件

  • 巧用Vue标签is属性，解决模板标签出现bug问题
  • 子组件定义data,必须是一个函数
  • ref 操作dom
  • 父组件通过属性向子组件传递数据

动画

transition

通过自动操纵transition中的元素的class实现

同时使用过渡和动画

  • 通过设置type=“transition”（过渡）来设置根据过渡还是动画显示时长
  • 通过appear实现页面初试动画
	<link rel="stylesheet" href="./animate.css">

	<script src="./vue.min.js"></script>

	<style>

	  .fade-enter,.fade-leave-to{

	  	opacity: 0;

	  }

	  .fade-enter-active,

	  .fade-leave-active{

	  	transition: opacity 3s;

	  }

	</style>

</head>

<body>

	<div id="app">

		<!-- type="transition" 放在transition里面指定指行的时间以animate或者transition为准-->

		<transition

		 :duration="{enter: 5000, leave: 10000}"

		 name="fade"

		 appear

		 enter-active-class="animated swing fade-enter-active"

		 leave-active-class="animated shake fade-leave-active"

		 appear-active-class="animated swing"

		>

		<div v-show="show">hello meijing</div>

		</transition>

		<button @click="handleClick">切换</button>

	</div>

	<script>

	var vm = new Vue({

		el: '#app',

		data: {

			show: true

		},

		methods: {

			handleClick: function(){

				this.show = !this.show

			}

		}

	})

	</script>

Js 动画与 Velocity.js 的结合

	<link rel="stylesheet" href="./animate.css">

	<script src="./vue.min.js"></script>

	<script src="./velocity.min.js"></script>

</head>

<body>

	<div id="app">

		<transition

		 name="fade"

		 @before-enter="handleBeforeEnter"

		 @enter="handleEnter"

		 @after-enter="handleAfterEnter"

		>

		<!-- <transition

		 name="fade"

		 @before-leave="handleBeforeEnter"

		 @leave="handleEnter"

		 @after-leave="handleAfterEnter"

		> -->

		<div v-show="show">hello meijing</div>

		</transition>

		<button @click="handleClick">切换</button>

	</div>

	<script>

	var vm = new Vue({

		el: '#app',

		data: {

			show: true

		},

		methods: {

			handleClick: function(){

				this.show = !this.show

			},

			handleBeforeEnter: function(el){

				el.style.opacity = 0;

			},

			handleEnter: function(el, done){

				Velocity(el, {opacity: 1}, {duration: 1000, complete: done})

			},

			handleAfterEnter: function(el){

				console.log("动画结束")

			}

		}

	})

	</script>

Router

  • hash路由并不适合SEO

    • mode: ‘history’
  • base 基路径
  • router路由样式
    • linkActiveClass 部分匹配
    • linkExactActiveClass 完全匹配
  • historyApiFallback 路径映射关系
    • 要包含webpack里的publicPath
  • scrollBehavior 记录滚动行为
  • parseQuery，stringifyQuery 参数
  • fallback 如果页面不支持history路由，自动切换Hash方式
  • this.$route获取当前的路由信息，但是并不是所有的信息都有，所以可以使用meta属性
  • 同一组件内，不同路由有不同router-view可以使用components替换component，然后给router-view来解决
  • 路由守卫（导航狗子） 可以用来验证参数
    • beforeEach
    • beforeResolve
    • afterEach 跳转之后
  • 路由配置狗子
    • beforeEnter
  • 在组件定义狗子
    • beforeRouteEnter
    • beforeRouteUpdate
    • beforeRouteLeave (大表单确认提醒，安全性)
    • 在next之前拿不到this
    • next(vm => {console.log(vm.id)})
  • 异步加载，在进入路由中import引入组件
    • 需要插件 babel-plugin-syntax-dynamic-import

Vuex

  • 注意目录结构的划分
  • mapState
    • ...mapState({*** : (state) => state.**})
  • mapGetters
    • ...mapState(['**'])
    • mapActions
    • mapMutation
  • mutation只有两个参数，修改多个数据要用对象，使用this.$store.commit(‘方法名’,{})来触发
  • action和mutation一样，不过主要用来做异步修改方法。使用this.$store.dispatch(‘方法名’,{参数})来触发
  • 模块化 modules
    • namespaced
  • 异步加载模块
    • registerModule
    • unregisterModule
  • 热加载

    -store.watch((state) => {},()=>{})

    当第一个方法返回值有变化的时候才会调用第二个方法
  • store.subscribe(mutation,state)=>{}) 拿到所有mutation的变化，每次变化调用回调函数
  • subscribeAction
  • plugins 在vue初始化的时候定义

SSR

Vue.js源码全方位深入解析--学习笔记的更多相关文章

  1. vue.js源码学习分享（一）

    今天看了vue.js源码  发现非常不错,想一边看一遍写博客和大家分享 /** * Convert a value to a string that is actually rendered. *转换 ...

  2. vue.js源码精析

    MVVM大比拼之vue.js源码精析 VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多 ...

  3. 从template到DOM(Vue.js源码角度看内部运行机制)

    写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...

  4. 从Vue.js源码角度再看数据绑定

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  5. Vue.js 源码分析(一) 代码结构

    关于Vue vue是一个兴起的前端js库,是一个精简的MVVM.MVVM模式是由经典的软件架构MVC衍生来的,当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然,View ...

  6. Vue.js源码——事件机制

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  7. 【转】从Vue.js源码看异步更新DOM策略及nextTick

    在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: <template> <div> <div ref="test" ...

  8. Vue.js 源码构建（三）

    Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下. 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.json 文件,它是对项目的描述文 ...

  9. vue源码分析—Vue.js 源码构建

    Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下.(Rollup 中文网和英文网) 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.j ...

随机推荐

  1. python 输出‘\xe8\xb4\x9d\xe8\xb4\x9d’, ‘\xe6\x99\xb6\xe6\x99\xb6’, ‘\xe6\xac\xa2\xe6\xac\xa2’]

    如上代码块,结果输出为: [‘\xe8\xb4\x9d\xe8\xb4\x9d’, ‘\xe6\x99\xb6\xe6\x99\xb6’, ‘\xe6\xac\xa2\xe6\xac\xa2’] 北京 ...

  2. 《Linux设备驱动程序》第三版 scull编译 Ubuntu18.04

    0 准备工作. 0.0 系统环境:Ubuntu18.04.1 amd64. 0.1 安装必要软件包 1 sudo apt install build-essential bison flex libs ...

  3. Android 关于selector中item顺序的问题

    selector的item从上到下是按照匹配原则来改变状态的,一旦匹配到某个item的状态,就不会继续往下匹配了. https://blog.csdn.net/l403040463/article/d ...

  4. 【原创】aws s3 lambda缩略图生成

    参考资料: https://github.com/sagidm/s3-resizer https://aws.amazon.com/cn/blogs/compute/resize-images-on- ...

  5. Error-ASP.NET：由于未能找到 id 为“FileUpload1$gvFiles$ctl02$lnkBtnRemoveFile”的控件或在回发后将同一 ID 分配给另一个控件，导致发生错误。如果未分配 ID，请显式设置引发回发事件的控件的 ID 属性以避免此错误。

    ylbtech-Error-ASP.NET:由于未能找到 id 为“FileUpload1$gvFiles$ctl02$lnkBtnRemoveFile”的控件或在回发后将同一 ID 分配给另一个控件 ...

  6. 算法习题---5.4反片语（Uva156）

    一:题目 输入一些单词,找出所有满足以下条件的单词:该单词不能通过字母重排得到输入文本中的另外一个单词.在判断是否满足条件时,字母不区分大小写,但在输出时应该保留输入中的大小写,按字典序进行排列 将输 ...

  7. Windows下MariaDB数据库安装图文教程

    MariaDB是基于MySQL的开源数据库,兼容MySQL,现有的MySQL数据库可以迁移到MariaDB中使用   说明: MariaDB是基于MySQL的开源数据库,兼容MySQL,现有的MySQ ...

  8. 使用 Ninja 代替 make

    使用 Ninja 代替 make 摘自:https://www.jianshu.com/p/d118615c1943 22017.01.14 11:41:44字数 1408阅读 26336 前言 在传 ...

  9. 一个80后妈妈的邪淫忏悔(转自学佛网：http://www.xuefo.net/nr/article55/551761.html)

    我是一个80后独生女,2012年因为孩子小产后,痛苦难当,悲伤中想起可为孩子超度,因此开始了与佛法的缘分.断断续续几年的学习,才真的知道了邪淫的可怕 我从小面容姣好,气质超群,一直被父母,老师宠爱.想 ...

  10. Ubuntu18.04 instsall XMind_8 and crack

    1.dowload XMind_8 linux install zip wget https://www.xmind.cn/xmind/downloads/xmind-8-update8-linux. ...