09 2022 档案
摘要：1.props初始化 之前发现在setup启动函数中会初始化Props: // packages/runtime-core/src/component.ts export function setupComponent( instance: ComponentInternalInstance, is
阅读全文
摘要：之前两节看了模板生成AST和AST内部转化，这一节看最后的生成代码，编译配置是mode为module，prefixIdentifiers开启，hoistStatic开启，其他配置均不开启，先看示例： 源代码： <div class="app"> <hello v-if="flag"></hello>
阅读全文
摘要：在编译one中，template经过解析最终返回了一个AST节点对象，它是对模板的完整描述，但是还是不能用于生成代码，因为语义化还不够，没有包含编译优化相关的属性，vue内部还进行了进一步的转化，来看实现： // packages/compiler-dom/src/index.ts export f
阅读全文
摘要：首先找到编译的入口compile函数： // 支持两个参数，第一个template是待编译的模板字符串，第二个options是编译的一些配置信息 export function compile( template: string, options: CompilerOptions = {} ): C
阅读全文
摘要：vue3.0中我们使用依赖注入的API函数provide和inject，可以在setup函数中调用它们，子孙组件中访问祖先组件提供的数据，祖先组件不需要知道哪些后代组件在使用它的数据，后代组件也不需要住到注入的数据来自哪里，先看provide API的实现packages/runtime-core/
阅读全文
摘要：Vue.js 3.0映射Vue.js 2.x: beforeCreate -> 使用 setup() created -> 使用 setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpd
阅读全文
摘要：vue2.x中有两种使用侦听器的方式： 通过watch选项初始化： // 这种创建的侦听器，会随组件的销毁停止对数据的侦听 export default { watch: { a(newVal, oldVal) { console.log(newVal, oldVal) } } } 通过$watch
阅读全文
摘要：packages/reactivity/src/computed.ts export function computed<T>( getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>, debugOptions?: Debug
阅读全文
摘要：在vue3中，使用reactive API把一个对象数据变成响应式，看看怎么实现packages/reactivity/src/reactive.ts： export function reactive(target: object) { // if trying to observe a read
阅读全文
摘要：vue3的单文件代码如下： <template> <div> <div>{{msg}}</div> </div> </template> <script> import { ref } from 'vue' export default { setup () { const msg = ref('哈
阅读全文
摘要：第2节中我们运行带副作用的渲染函数setupRenderEffect方法，上一节我们关注的是创建组件，这一节来看更新组件，文件位置：packages/runtime-core/src/renderer.ts const setupRenderEffect: SetupRenderEffectFn =
阅读全文
