前端复习笔记——Vue篇

1. Vue双向绑定原理

1.利用Object.defineproperty函数实现一个监听器Observer，给每一个属性设置getter和setter，用来劫持并监听所有属性，如果有变动的，就通知订阅者

2.实现一个订阅者Watcher，每个Watcher都绑定一个更新函数，Watcher可以收到属性的变化通知并执行相应的函数，从而更新视图

3.实现一个消息订阅器 Dep ,主要收集订阅者，当 Observe监听到发生变化，就通知Dep 再去通知Watcher去触发更新。

4.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，若节点存在指令，则Compile初始化这类节点的模板数据（使其显示在视图上），以及初始化相应的订阅者。

缺点：对象直接添加新的属性或删除属性，数组通过下标修改数组元素，页面不会自动刷新，需要使用vm.$set()

2. keep-alive

  使用is特性切换组件时，若用keep-alive包裹组件可以保存组件的数据

3. Vue3新特性
setup函数
ref和reactive来代替data，区别：ref基本数据类型，reactive对象
computed写法不同，写在setup里，var xx = computed(箭头函数)
watch函数写法不同：Vue2: watch:{变量名(newV, oldV){…}}，Vue3: watch(变量名, (newV, oldV) => {…})
生命周期函数：在组合式API中，created,beforeCreate没有了，beforeMount->OnBeforeMount, mounted->OnMounted, beforeUpdate -> OnbeforeUpdate， updated -> OnUpdated, beforeDestory变为beforeUnmount, destoryed变为unmounted, renderTracked, renderTriggered用于调试的钩子
自定义hook函数：把可以重复使用的业务进行封装，可以使用组合式API
toRef和ref一样是创建响应式数据，但改变toRef的value时会改变原始数据，但视图上数据不会更新，ref不会改变源数据，但可以改变视图上数据的显示。toRefs作用和toRef相同，区别是可以为对象的所有属性一起创建响应式数据，并且可以利用结构对象来方便的调用

4. Vue3其他新特性
shallowReactive和reactive用法相同，但是监听数据时只会更改第一层属性的值
shallowRef只处理基本数据类型
readonly，将ref或reactive响应式数据创建为一个只读数据，shallowReadonly只处理第一层数据。
toRaw将响应式对象变为普通对象，markRaw标记一个对象，使他不能变为响应式对象
customRef自己可以控制数据的触发响应
setup里的provide和inject
provide(“info”, “值”), inject(“info”)
响应式数据判断方法：isRef(), isReactive(), isReadonly(), isProxy
Fragment: 模板中不限制需要单一的根节点
Suspense悬念
Teleport: 将元素传送到指定的dom节点
data应始终被声明为一个函数
过度class名修改：v-enter 变为 v-enter-from，v-leave 变为 v-leave-from
不再支持keycode作为v-on修饰词，移除v-on.native修饰词
不再支持filter (Vue2的filter: Vue.filter(“xx”,()=>{})或filter:{xx:function(){}}，在{{data | xx}}来修改data的内容)

5. Vue中的SPA单页面
一次性加载所有的HTML, JS, CSS内容，页面不会因为用户的操作重新加载，是利用了路由机制实现router-view组件的替换
优点：用户体验好，减轻服务器压力，前后端分离
缺点：初次加载较慢，不利于SEO，没有前进后退功能

6. SPA首屏优化方式
减小入口文件体积：动态加载路由（component：（）=） import(‘./xxx.vue’)）
静态资源本地缓存
UI框架按需加载
组件重复打包：webpack把重复使用多次的包抽离出来放入公共依赖文件
Gzip压缩
使用ssr服务端渲染（服务器在url请求后，完成页面的 HTML 结构拼接的页面处理技 术，返回一个有数据的html文件）

7. Vue3响应式原理
用Proxy实现代理。代替Object.defineProperty() 

用Reflect对源对象进行操作，若得到Object则再次用reactive做代理
副作用函数effect：会读取响应式数据的函数，会放在set中执
track()：副作用函数读取数据时触发getter，所以可以在getter中收集对应key的effect，这个过程叫收集依赖
trigger()：在setter中，执行所有的依赖

function track(target, key){
  console.log('get--', key)
}

function trigger(target, key, value){
  console.log('set--', key, '=', value)
}

function reactive(obj){
  const handler = {
    get(target, key, receiver){
      track(target, key)
      const value = Reflect.get(...arguments)
      if(typeof value === 'object'){
        return reactive(value)
      }else{
        return value
      }
    },
    set(target, key, val, receiver){
      trigger(target, key, val)
      return Reflect.set(...arguments)
    }
  }
  
  return new Proxy(obj, handler)
}

const obj = {
  name: 'win'
}

const data = reactive(obj)

data.list = [5] //响应式  这两句话是执行Reflect.set()
data.age = 18 //响应式
console.log(data, 'data111')

8. vm.$set()
为响应式对象新增属性，调用defineReactive方法，使用Object.defineProperty方法，也会构造Dep()，执行dep.notify()新进依赖通知

9. Vuex
组件全局状态管理的机制，实现高效的组件之间数据共享，易于维护
State, Mutations, Actions, Getters, Modules

10. nextTick
在下次dom更新循环之后执行回调，保证dom更新完之后再对dom执行操作、

11. data为什么是纯函数
与js语言本身的特性有关。实现组件的复用，每个组件中的数据都是相互独立的。

12. .sync用法
子传父的一个语法糖:
@update:title="val => title = val"可以简写成 :title.sync = “title”

13. MVX框架
MVC：Model+View+Controller View基于Model，Controller根据View变化改变Model
MVP：Model+View+Presenter Presenter把Model和View完全分离，程序逻辑在Presenter里实现，Presenter和View通过定义好的接口进行交互
MVVM：Model+View+ViewModel View和Model通过ViewModel交互，并实现数据双向绑定

14. Vue生命周期
beforeCreate() data,methods,computed,watch的数据和方法都不能访问
created() 可以使用数据，更改数据不会触发update()，不能访问dom，除非使用nextTick
beforeMount() template导入渲染，虚拟dom创建完成，不会触发update
mounted() 真实dom挂载完毕，可以操作dom
beforeUpdate() dom重新渲染之前，此时更新数据不会重渲染
updated() dom重新渲染完毕，此时不能更改数据
beforeDestroy() 实例销毁之前，此时可以做清理工作如销毁定时器
destroyed() 只剩下dom空壳，子组件双向绑定监听器都被销毁
activated(), deactivated()

15. 路由验证跳转功能，导航守卫
router.beforeEach((to, from, next) => {…; next()})
beforeResolve, afterEach

16. Actions和Mutations区别
Mutations: 只能包含同步操作，可以直接更改state
Actions:可以包含异步操作，它提交给Mutations，而不是直接更改状态

17. 爷孙组件通信
子组件：<alert v-bind="$attrs" v-on="$listeners"></alert>，并且在data函数同级的位置设置inheritAttrs: false

18. 事件总线
Vue3: mitt.emit(“event”, ()=>{}), mitt.on(“event”, (data)=>{})
Vue2: EventBus,bus = new Vue(), 把$bus挂在在Vue的原型上，是组件间的bus是共用的

19. Vue和React对比
相同点：支持服务端渲染，组件化开发，组件间通信
不同点：
Vue是MVVM框架，React只针对MVC中的View层
React是单向数据流，Vue数据双向绑定
组件写法不同，React用JSX+inline style把html,css都写在js, Vue中是html,css,js都在同一个文件
状态改变时，Vue不需要重新渲染整个组件树，React需要

20. Hash和history模式
hash：页面跳转不会发送网络请求，#后的内容不会放在http请求中，原理是利用location.hash，监听onhashchange事件来更换页面
history：页面跳转会直接请求页面，原理是利用H5新增的API，pushState()和replaceState()，以及onPopState来监听URL变化

21. Mock
前端测试接口时，后端还没有做好，可以用mock生成随机的假数据。
Mock.mock(json)可以将规则转换为假数据，devServer.before方法，在请求发送前拦截

22. V-model原理
v-bind绑定响应式数据，oninput事件获取event.target.value

<input type="text" v-bind:value="message" v-on:input="message = $event.target.value" placeholder="请输入">

23. V-for key的作用
提高dom更新效率，diff算法会匹配新旧节点的key和标签名
vue使用就地复用策略，若没有key会造成选项错乱

24. V-for和v-if不能一起用
v-for优先级更高

25. Ajax放在哪个生命周期
created()

26. VNode
{type:…, props:…, children:…}

27. Watch作用
监听数据变化，一般在数据变化时需要执行异步或开销较大时使用

28. Vue3优化
diff算法标记静态节点，只处理动态节点

29. 复用组合式API
引入，return中导出

30. Vue渲染过程
首次渲染：解析模板为render函数，触发响应式数据getter，执行render函数，生成vnode，执行patch(elem, vnode)函数
更新时：触发setter，执行render函数，生成newVnode，patch(vnode，newVnode)

31. Vue模板编译
将html模板解析成AST树，编译成render函数

32. Provide, inject

 provide(){
  return{
    info: “值”
  }
}
inject: [“info”]