haonan_z的博客

视图更新对比vue1 小粒度更新，精确追踪到数据变化所影响的dom变化，精确更新变化的dom实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。具体的实现代码可前往： 实现一个简易版的vue1也可以参考：vue早期源码学习vue2 以组件粒度为范围，组件内diff式更新

一、node、npm安装及使用1、安装node、npm直接在官方网站中下载安装安装完成检查是否安装成功node -vnpm -v使用taobao镜像（新镜像）加速npm install -g cnpm --registry=https://registry.npmmirror.com2、安装vue-cli2卸载vue3.X+（如果安装过）npm uninstall -g @vue/cli安装vue2npm install vue-cli -g检查是否安装成功vue -V

1.Fragment在Vue2中: 组件必须有一个根标签在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用2.Teleport什么是Teleport？—— Teleport 是一种能够将我们的 组件html结构 移动到指定位置的技术。<teleport to="移动位置"> <div v-if="isShow" class="mask"> <div class="dialog"

一、shallowRef,shallowReactive浅层次的响应式对象，当一个对象嵌套层数过多，可以用来性能优化，一般用不到二、readonly,shallowReadonly让一个响应式数据变为只读的，readonly是深只读，shallowReadonly是浅只读，例如应用于某些封装的数据或组件中引出的数据不希望被改const user = reactive({ name:"henry", job:{ c:'1', a:{ b:222 } }

总结：当我们的style里面写上scoped时，会给class加上命名的哈希值，否则是全局样式覆盖首先我们思考一下vue的生命周期里说的，挂载的时候是从里到外，那么组件里的哈希值的class也是由里到外创建，此时父组件的class会写在子组件后面，所以当两个class在同一个元素上时，父组件的class会覆盖子组件的classvue2中template里面只能有一个元素，我们称之为根元素，vue3中可以有多个元素，所以说vue3中组件可以没有根元素；如果有根元素存在的情况下，父组件中子组件的元素上面

setup,ref,reactive,computed,watch,watchEffect,生命周期,toRef,toRefs