随笔分类 - 3.前端源码阅读
摘要：一、vnode vnode有那些类型？1.文本类型2.注释类型3.组件类型 vnode.$attrs: vnode.$slot：组件占位符包括的子节点，其实就是插槽的内容；组价开始标签和组件结束标签里包裹的内容；注意和vnode.children的区别； vnode.children：普通元素包括的
阅读全文
摘要：<style> .fade-enter-active, .fade-leave-active { transition: opacity 5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> <script> let vm = new
阅读全文
摘要：一、keep-live内置组件在什么时候注册的？ 在加载Vue类的时候，会引入src/core/index.js文件，然后这里会引调用nitGlobalAPI方法； builtInComponents变量就是KeepAlive内置组件；所以这个方法主要是把内置组件keep-live扩展到Vue.op
阅读全文
摘要：1.前言：插槽的一些功能： 如果在使用组件时，没有在组件开始标签和组件结束标签插入任何内容，那么将会使用组件的默认插槽； 如果在使用组件时，在组件开始标签和组件结束标签插入了内容，但是一个不带 name 的 <slot> 出口会带有隐含的名字“default”，所以还是会使用组件的默认插槽； 2.6
阅读全文
摘要：1.v-mode既可以用在表单控件上比如input、selet、textarea、checkbox， 也可以用在组件上； 举例： let vm = new Vue({ el: '#app', template: '<div>' + '<input v-model="message" placehol
阅读全文
摘要：let Child = { template: '<button @click="clickHandler($event)">' + 'click me' + '</button>', methods: { clickHandler(e) { console.log('Button clicked!
阅读全文
摘要：。。。
阅读全文
摘要：ast树是一个js对象，ast树是对模板的一种描述； 类似于vnode是对真实dom的一种描述， ast树是对模板的一种描述； 注意： 我们调试代码时，除了debugger还有consolelog即clog方式；简单的代码可能就直接clog调试了。 但是有个问题，比如说我们在const ast =
阅读全文
摘要：src文件夹下的compile模块是公用的， 所以我们通过给createCompiler传递不同的base_options可以获取不同的compile函数； 这就是函数柯里化； 比如一个函数a本来需要接收5个参数，然后a函数先接收1个参数，然后返回一个子函数b，我们使用b函数的时候，再把剩下的4 个
阅读全文
摘要：props主要三大块， 规范化的流程， 初始化的流程， 子组件两次不同更新的流程 一、props的规范化 1.1概念：规范化只是格式上的规范化，确保我们的props是一个对象，对象的key的value又是一个对象； 后续会在props的初始化里进行props语法正确与否的校验； 1.2流程： 规范化
阅读全文
摘要：一、计算属性 总结： 其实就做了两件事： 1.把计算属性的每个key都代理到Sub.prototype上（方便模板通过this.计算属性名访问。） 2.在initComputed阶段，给计算属性的每个key都定义一个计算watcher，（这样计算属性触发props或者data的依赖收集，就可以把自己
阅读全文
摘要：一、响应式对象 1、响应式的作用 响应式主要帮助我们做手动操作 DOM 重新渲染这一步； 2、把props、data添加到响应式的流程 我们知道，vue里props和data的数据都是响应式的。 里面的数据发生了变化，会立马通过依赖它的模板或者计算属性或watch侦听器；（计算属性和侦听器时响应式的
阅读全文
摘要：第一个问题: mian.js里，new Vue时传递的那个对象参数，对象参数里： render函数里传递普通html标签，和传递一个组件有什么区别？举例:render:h=> h('div',{},['一段文本']) 和render:h=> h(App) 传递一个html标签是不是先在自身上渲染出来
阅读全文
摘要：数据驱动还有的疑问： 2.render函数如何产生vnode？在core/vdom/render函数里有vm_render方法，调用这个方法就会调用我们自己定义的render函数，然后通过我们传递的h函数其实是vm.$creatElement方法；然后在vm.$creatElement方法根据不同的
阅读全文
摘要：每一章开一个笔记，记录一些细节； 最重要的流程，还是思维导入吧， 思维导图看着比笔记更清楚， 如果有多个子级，也更容易记录；； 如何研究一个框架： 主要思想就是写实现某个功能的例子，在打包后的文件里打断点，然后到浏览器单步调试； 但是这个例子在那些写有两种方式，第一种是vuecli中，直接新建一个d
阅读全文
