模板中的插入变量是如何渲染到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. Perl寻路A*算法实现

    A*算法:A*(A-Star)算法是一种静态路网中求解最短路径最有效的直接搜索方法.估价值与实际值越接近,估价函数取得就越好. 公式表示为: f(n)=g(n)+h(n),其中 f(n) 是从初始点经 ...

  2. 微信小程序丨将溢出的文本用省略号代替的方法

    下面进入正题,有关于将溢出的文本用省略号代替的方法,不知道什么原因,我的程序用传统的代码无法解决: .text{ white-space: nowrap; overflow: hidden; text ...

  3. C/C++ #define的作用域

    #define #define macro的作用域有点类似于C/C++全局静态变量 编译器处理宏的时机是预处理阶段 编译器按文本顺序处理 遇到宏时就定义一个宏变量 假设这种情况 void test() ...

  4. Jenkins定时任务的配置

    在任务配置中,在 构建触发器(Build Triggers)-->勾选"定时构建"-->在输入框中配置触发时间表达式 以上配置,类似cron表达式,表示在5月27日23 ...

  5. Kettle建立数据库链接报错-'MS SQL Server' driver (jar file) is installed. kettle的bug，对于12.2而言

    1.链接sql server数据库报错 错误连接数据库 [My_vm_win_sql] : org.pentaho.di.core.exception.KettleDatabaseException: ...

  6. java调用jni oci接口宕机原因排查

    调用最简单的JNI没有出错,但是涉及到OCI时就会异常退出,分析后基本确定是OCI 11g中的signal所致,参考ora-24550 signo=6 signo=11解决. 但是这个相同的so库直接 ...

  7. Java 读取clob字段的几种方法

    Java 读取clob字段的几种方法 一.第一种 Clob clob = rs.getClob("remark");//Java.sql.Clob String detailinf ...

  8. restful swagger api java go

    rest框架使用swagger api,接口越来越多后性能会很差,如何优化? - 知乎https://www.zhihu.com/question/59349319 golang restful 框架 ...

  9. Java基础 Scanner 使用nextInt接收整数

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  10. flutter Draggable Widget拖拽控件

    Draggable Widget Draggable控件负责就是拖拽,父层使用了Draggable,它的子元素就是可以拖动的,子元素可以实容器,可以是图片.用起来非常的灵活. 参数说明: data: ...