SoulReader

parent主要用来存储 Vue 组件的父组件 mixins混入，主要用来开发 Vue组件中的可复用的功能 源码12345if (child.mixins) { for (var i = 0, l = child.mixins.length; i < l; i++) { parent = mergeOptions(parent, child.mixins[i], vm); }} Vue 在合并选项的时候 判断力 mixins 属性是否存在，如果存在，通过递归调用的方法合并到当前组件上 使用12345678910111213var mixin = { create() { console.log('create') }, methods: { getInfo() { console.log('getInfo') } }}export default { mixins: ...

el，template render源码el 指定的元素作为 Vue 实例的挂载目标 主要是通过 Vue 实例的 $mount 方法 $mount 方法 主要 通过 el 获取到 DOM 元素 然后调用 mountComponents 方法 绑定到 Vue 实例上，最后返回 Vue 实例1234567Vue.prototype.$mount = function ( el, hydrating) { el = el && inBrowser ? query(el) : undefined; return mountComponent(this, el, hydrating)}; mountComponent 方法 判断 是否有render函数，没有提示至少要有template或者render函数 (tempalte,el,render 不同同时使用) 调用 beforeMount 声明周期 判断是否开启性能优化检查 对 vm 的 updateComponet 函数进行 监听变化，如果发生变化，触发 beforeUpdate 生命周期函数 V ...

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198var Watcher = ...

data在 data 中的数据 在 vue2 中会使用 Object.defineProperty 方法监听数据变化（vue3 采用 proxy）当数据发生变化的时候，会带动页面发生变化 在使用data的时候推介使用 返回一个初始对象的函数的方法，如果 data 是一个纯粹的对象，会造成 Vue 所有实例共享同一个引用数据对象 源码1234567891011121314151617181920212223242526272829303132333435363738394041function initData (vm) { var data = vm.$options.data; data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}; if (!isPlainObject(data)) { data = {}; warn( 'data functions s ...

Vue.extend({})源码1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980function initExtend (Vue) { /** * Each instance constructor, including Vue, has a unique * cid. This enables us to create wrapped "child * constructors" for prototypal inheritance and cache them. */ Vue.cid = 0; var cid = 1; /** * Class inheritance */ Vue.extend = function (extendOptions) { ...

Vue3 继承了 Vue2 的所有生命周期函数，所以 Vue2 的生命周期的应用方式同样适用于 Vue3。同时 Vue3 还新增了一些新的生命周期。 原有的生命周期函数我们这边不做过多的赘述，我们来讲解一下 Vue3 相对于 Vue2 变更了和新增了哪些生命周期函数 beforeUnmount unmounted 这两个生命周期替代了 Vue2 的 beforeDestory 和 destoryed生命周期，两者的作用是一致的，都是在组件卸载的时候调用的，在 Vue3 还可以使用 unmout API 来卸载应用 renderTracked 跟踪 虚拟DOM 渲染时候调用，接收 debugger event 作为参数组件第一次渲染的时候调用，数据发生改变不会调用 12345678910111213141516<p>Cart: {{cart}}</p><script> export default { data() { return { car ...

Vue3 新版出来了这么久，虽然之前也有联系过搭建，但是并没有测试过多的东西，趁着闲暇时间，打算从头采坑，记录自己的 Vue 3.0 的爬坑历程 搭建项目 本次项目搭建采用尤雨溪大大开发的 Vite，这是尤大最近开发出的新的 Web 开发工具具有以下优点 快速的冷启动 即时的模块热更新 真正的按需编译 使用 vite 极大的提高了前端的开发性能及开发速度 全局安装 Vite 123456789// 全局安装 vite-appnpm i -g vite-app// 创建项目npm init vite-app <project-name>cd project-nameyarn || npm install 安装 必要第三方插件 安装 TypeScript 1npm install -D typescript 根目录(src)下新增 shim.vue.d.ts 文件 123456789101112declare module '*.vue' { import { Component } from ' ...

当我们定义了一个函数或者对象的时候，自带有属性中有一个属性 __proto__，这个属性又被称作原型链，指向构造当前函数的 prototype 1234567function Test() { this.a = 1}const test = new Test()console.log(test.__proto__) // {constructor: f}console.log(Test.prototype) // {constructor: f}console.log(test.__proto__ === Test.prototype) // true 当我们继续打印 Test.prototype.__proto__ 的时候会发现 Test 的构造函数是 Object，即 1console.log(Test.prototype.__proto__ === Object.prototype) // true 这个时候就会发现有些特殊的事情，当我们在 Test 的 prototype 属性上添加一些属性或者 Object ...

this 的指向问题一直是 JavaScript 中一个很重要的问题，我们在日常编程中，经常会遇到在函数中执行的时候，发现从 this 中取不到我们想要的东西，面试的过程中，this 也是经常会被面试官问到的一个问题。 接下来，我们将会在此篇文章中详细的讲解一个 JavaScript 中 this 的获取及指向问题 this 指向在 JavaScript 中一个特殊的关键字 this，通过 this 我们可以获取当前代码块执行环境的对象 我们可以通过 this.xxx 来获取到 this 所代表的对象的属性 this 取何值，取决于 this 所处代码块为谁调用的 总结一下 this 指向几种情况 普通函数调用的时候，this 指向 window 又称作默认绑定 来看下面这一段代码 123456var name = 'zhangsan'function fn() { var name = 'lisi' console.log(this.name)}fn() 猜一下上述代码 输出的 name 是什么？ 对的，输 ...

此篇文章用来记录 Vue 中 Api 在 Vue源码中的具体实现方法，以便更好的理解 Vue 的各种 Api 的使用方法 全局配置Vue 的全局配置参数是存放在 config 里面的，我们可以通过修改 config 中的 properties 1234567891011121314151617181920212223Config = { // user optionMergeStrategies: { [key: string]: Function }; silent: boolean; productionTip: boolean; performance: boolean; devtools: boolean; errorHandler: ?(err: Error, vm: Component, info: string) => void; warnHandler: ?(msg: string, vm: Component, trace: string) => void; ignoredElements: Array< ...