每天学习一点前端知识-VUE（三）

1.ref和reactive区别

reactive主要用于处理对象类型的响应式数据，底层采用的是new Proxy() ref通常用于处理单值的响应式,ref只要解决原始值的响应式问,(包装成对象类型)底层使用Object.defineProperty() reactive() 如果解构，会丧失响应式！！！（可以在reactive中包裹ref） ref() 如果传入对象 底层使用reactive() /包装成对象RefImpl.value 对象中包裹ref，如果不是数组索引 自动拆包（代码中返回res.value值，不需要自己 .value）

2.watch和watchEffect的区别

watch:侦测一个或多个响应式数据，并在数据源变化时调用回调函数 watchEffect:立即运行一个函数，然后追踪他的依赖，当依赖改变时重新执行该函数

源码中重要的方法 const effect = new ReactiveEffect(getter, scheduler); effect. run();

watchEffect(()=>{ app.innerHTML = state.name; //getter函数 数据变化后，会调⽤scheduler内部会再次触发effect,run()重新运⾏getter });

watch( () => state.name，// getter函数 数据变化后，会调⽤scheduler，内部会调⽤cb (new，old) =>{} // cb函数 )

3.如何把template转换成render函数

1.template模板转换成ast语法树 2.对语法树进行遍历优化 3.对代码重新生成render函数

4..new Vue()过程(vue2)

1.在 new Vue 的时候 内部会进⾏初始化操作，内部会初始化组件绑定的事件，初始化组件的⽗⼦关系 $parent $children $root 2.初始化响应式数据 data、computed、props、watch、method。同时也初始化了 provide 和inject ⽅法。 内部会对数据进⾏劫持 对象采⽤ defineProperty 数组采⽤⽅法重写。 3.在看⼀下⽤户是否传⼊了 el 属性和 template 或者render。render 的优先级更⾼，如果⽤户写的是 template，会做模板编译 (三部曲) 。 最终就拿到了 render 函数 4.内部挂载的时候会产⽣⼀个 watcher，会调⽤ render 函数会触发依赖收集。内部还会给所有的响应式数 据增加 dep 属性，让属性记录当前的 watcher (⽤户后续修改的时候可以触发 watcher 重新渲染) 5.vue 更新的时候采⽤虚拟 DOM 的⽅式进⾏ diff 算法更新。

5.Vue.observer(Vue2中需要导入整个VUE，Vue3中移除)

创建响应式数据，内部调用observe(obj)