前端整理 —— vue

1. vue的生命周期

经典爱问，感觉内容挺多的

1. 介绍一下有哪几个
   vue2中的生命周期有11个，分别为beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed，activated，deactivated，errorCaptured，而vue3中采用组合式api，将各个生命周期前面加上on作为api，但没有onBeforeCreate和onCreated，多出来了setup，并且将beforeDestroy和destroyed分别改名为onBeforeUnmount和onUnmounted
2. 一般在哪个生命周期进行数据请求
   created和mounted都可以，基本上是created，因为vue是数据驱动的，也就是说只要能操作到data中的数据时即可请求（要把数据挂载到data上），如果请求需要获取，借助，依赖，改变dom，这时请求放在mounted
   （beforeRouter也行，但是没必要，不如created早，还获取不到dom）
3. activated 和 deactivated
   1. 设置了 keep-alive 缓存的组件，会多出这两个生命周期钩子
   2. 首次进入组件时：beforeRouteEnter > beforeCreate > created> mounted > activated > … … > beforeRouteLeave > deactivated
   3. 再次进入组件时：beforeRouteEnter >activated > … … > beforeRouteLeave > deactivated

2. v-if 和 v-show 区别

1. v-if 是惰性的，只有当第一次为 true 的时候，才会渲染元素
2. v-if 相当于把元素从 dom 树中删除，而 v-show 相当于把 display 设为 none，所以频繁的修改元素是否显示，一般用 v-show

3. v-if 和 v-for 能否一起使用

vue2 中 v-for 的优先级高于 v-if，vue3 中 v-if 的优先级高于 v-for

1. 在vue2中不建议v-if和v-for一起使用，
2. 在vue3中v-if和v-for不能一起使用

4. vue3 相对于 vue2 性能有哪些方面提升

1. 编译阶段
   1. diff算法优化
      vue3在diff算法中相比vue2增加了静态标记（在对应VNode对象上），类似于<p>1<p>这种，会被标上静态标记，而类似于<p>{{data}}<p>这种不会被标上静态标记，在diff比较的时候，如果发现被标上了静态标记，就不会再进行比较
   2. 静态提升
      vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用，即不是每次render的时候都createVNode一次，而是把createVNode给用const常量保存下来，下次render渲染的时候，直接把这个VNode传进去就行了
   3. 事件监听缓存
   4. SSR优化
2. 源码体积
   相比Vue2，Vue3整体体积变小了，除了移出一些不常用的API，再重要的是Tree shanking，任何一个函数，如ref、reavtived、computed等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小
3. 响应式系统
   vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式，而vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历

5. v-model 的原理

v-model 用在 input 上

绑定在 input 上时，v-model 其实就是 v-bind 绑定 value 和 v-on 监听 input 事件的结合体

1. v-bind 绑定一个 value 属性
2. v-on 指令给当前元素绑定 input 事件

模拟实现：

// 1. 通过 v-bind:value 绑定 username 变量，每次输入内容的时候触发input事件
// 2. 通过事件对象参数 event.target.value 获得输入的内容，并且把这个内容赋值给username
// 3. 此时更改username时input输入框会变化，更改input输入框时username变量会变，从而实现了v-model的双向绑定功能
<input v-model="username" />
<input type="text" :value="username" @input="username = $event.target.value" />

v-model 用在组件上

实现场景：父组件 price 的初始值是 100，子组件是一个输入框；输入框的值改变时，能实时更新父组件的 price

// 父组件
<currency-input v-model="price"></currentcy-input>
// 相当于 <currency-input :value="price" @input="price = $event.target.value"></currency-input>
// 所以相当于向子组件传了一个 value 值，和绑定了一个 input 事件// 子组件
<template><input:value="value"@input="$emit('input', $event.target.value)" />
</template><script>
export default {props: {value: String,  // 父组件传过来的 value 值}
}
</script>

子组件好看一点的写法

// 子组件（好看点的写法）
<template><button @click="add">点击按钮自增 1</button>
</template><script>
export default {props: {value: Number, // 属性名必须是 value},methods: {add() {this.$emit('input', this.value + 1) // 事件名必须是 input},}
}
</script>

v-model 应用到组件上，会有一些体验不好的场景，因为它默认会把 value 作为组件的属性，把 input 作为给组件绑定事件时的事件名

但在 Vue 2.2 及以上版本，你可以在定义组件时通过 model 选项的方式来定制 prop / event：

// 父组件
<my-button v-model="number"></my-button>// 子组件
<template><button @click="add">点击按钮自增 1</button>
</template><script>
export default {model: {prop: 'num', // 自定义属性名event: 'addNum' // 自定义事件名},props: {num: Number,},methods: {add() {this.$emit('addNum', this.num + 1)},}
}
</script>