随笔分类 - vue3
摘要：一、 搭建Vite环境 1.创建目录&初始化包配置&安装Vite依赖 mkdir gresgying-ui cd gresgying-ui npm init npm i vite -D 2.根目录创建index.html <!DOCTYPE html> <html lang="en"> <head>
阅读全文
摘要：背景： 在维护的项目是基于Ant Design Vue 框架实现的，需求是新建时，前端需要将树形结构维护完成后，一次性调用接口进行下发，在网上找了半天资料，要不源码不全，要不就是增删改后实时和后台交互，不符合要求，所以在这里将实现过程写出来，仅供学习交流。 使用前须知： 因为Vue3的项目，所以首先
阅读全文
摘要：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 =
阅读全文
摘要：创建vnode 我们在第一节中在packages/runtime-core/src/apiCreateApp.ts文件的createAppAPI方法中，app.mount()时： // 通过 createVNode 方法创建了根组件的vnode const vnode = createVNode(r
阅读全文
摘要：创建一个vue项目，我们从入口代码main.ts文件中可以看到： // 从vue导入一个createApp方法，使用该方法创建一个app对象，并且重写app.mount方法 import { createApp } from 'vue' import App from './App.vue' con
阅读全文
