模板中的插入变量是如何渲染到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. ogr ogr2ogr 矢量数据格式转换 ogrinfo 矢量数据图层信息操作 ogr gdal的一部分 gdal 命令行 库操作

  2. getLocation 需要在 app.json 中声明 Permission 字段

    小程序开发中,清除授权状态后,重新编译,提示:getLocation 需要在 app.json 中声明 Permission 字段 需要在 app.json 里面增加 permission 属性配置( ...

  3. vue-router 利用url传递参数

    vue-router 利用url传递参数 :冒号的形式传递参数  在路由配置文件里以:冒号的形式传递参数,这就是对参数的绑定. 1. 在配置文件里以冒号的形式设置参数.我们在/src/router/i ...

  4. Flutter -------- Http库 网络请求封装（HttpController）

    http库 再次封装的网络请求类 HttpController 1.添加依赖 dependencies: http: ^0.12.0 #latest version 2.导入库 import 'pac ...

  5. python脚本使用源码安装不同版本的python

    # coding=utf-8 import os import sys # 判断是否是root用户 if os.getuid() == 0: pass else: print('当前用户不是root用 ...

  6. centos的6.9版本安装mysql

    用yum安装后,执行service命令启动: [root@centos ~]# yum install mysql-server Loaded plugins: fastestmirror, secu ...

  7. 123457123456#5#----com.MC.HuaHuaGame866----前拼后广--babyDrawGame-mc555

    com.MC.HuaHuaGame866----前拼后广--babyDrawGame-mc

  8. Java EE互联网轻量级框架整合开发— SSM框架（中文版带书签）、原书代码

    Java EE互联网轻量级框架整合开发 第1部分 入门和技术基础 第1章 认识SSM框架和Redis 2 1.1 Spring框架 2 1.2 MyBatis简介 6 1.3 Spring MVC简介 ...

  9. [ jenkins ] git+jenkins+maven + ansible 部署java程序

    1. 工具介绍 git:版本控制,一般都是托管到代码仓库的.如 github.coding.gitlab (本文以 coding 为例) jenkins:持续集成工具之一,也是最常用的工具,主要工作就 ...

  10. [转]如何更换 Ubuntu 18.04 LTS 的 GDM 登录界面背景

    链接地址:https://www.linuxprobe.com/ubuntu-gdm-login.html