vue的生命周期
vue2
创建前后：beforeCreate、created
挂载前后：beforMount、mounted
更新前后：beforeUpdate、updated
销毁前后：beforeDestroy、destroyed（后改为beforUnmount，unmount）
vue3
-setup相对于是整合了beforeCreate和created
-其余的生命周期在setup函数中执行
onBeforeMount() 、onMounted()
onBeforeupdate()、onUdated()
onBeforeUnmount()、onUnmounted()
数据请求在created和mouted这两个生命周期执行的区别
created是在组件实例创建完成后立即调用，这时候页面的dom节点并未生成；
mouted是在dom节点渲染完毕后立即执行；
所以放在mounted中请求可能会导致页面闪动，所以建议将页面内容的改动放在created生命周期中。
vue组件间的通信方式
父子组件之间的通信
-使用props从父组件参数给传递子组件
-使用emit触发自定义事件从子组件传递参数给父组件 （in mi t）
-parent获取父组件的实例（pai run si）
-使用ref获取子组件的实例
-通过attrs进行父孙组件的通信（使用在子组件使用bind绑定attrs）
兄弟组件之间的通信
-使用parent在父级建立通信
-使用EventBus创建一个中央事件总线（实质就是一个发布订阅函数）
非关系组件间之间的通信
-vuex
-localstorage...
？？？？
废弃
-children：获取子组件实例
-listeners（li sen ner si）：父孙组件传递方法（使用on绑定listeners，废弃后继承到了attrs里面）
常用的指令有哪些
-条件渲染指令 v-if v-show
-列表渲染指令 v-for
-属性绑定指令 v-bind
-事件绑定指令 v-on
-双向数据绑定指令 v-model
v-if和 v-show的区别
v-if直接操作dom节点的添加或者删除，而v-show只是在样式上做修改
v-if在初始条件为false时是不会渲染的，但v-show总是会渲染
v-if有着更高的切换开销，v-show有着更高的初始渲染开销
使用场景：v-if适合做初始模块渲染判断，v-show适合做切换判断
v-if和v-for的优先级
-在vue的源码中v-for的判断要比v-if早（else if ... ），所以v-for的优先级要高于v-if
-所以不要将v-if和v-for写在同一个标签中，可以在将v-for的循环包裹在v-if的标签中，这样可以优化性能。
vue数据更新，但视图不更新问题
-vue2是通过Object.defindPropety(D fan de pro po t)来实现数据响应式，当修改对象中的值时能够触发setter和getter方法，而给对象添加或者删除新属性时吗，却无法触发。
-所以当给对象添加或删除新属性时，视图就不会更新。
解决办法
-通过vue.set解决
-通过forceUpdate方法强制刷新（fo ser update）
-通过深拷贝的方式，创建一个新对象，合并原对象和需要插入的属性
vue 中内置的指令有哪些
-条件渲染指令 v-if v-show
-列表渲染指令 v-for
-属性绑定指令 v-bind
-事件绑定指令 v-on
-双向数据绑定指令 v-model
可以绑定属性的内置指令
v-bind v-model v-html
v-model 的理解
-v-model指令主要用于在表单元素上实现双向数据绑定，使得表单元素的值可以根据vue实例的数据属性实现实时的交互
-v-model实际是v-bind和v-on的语法糖，是它们两个指令的结合
<input v-model="message" />
<input v-bind:value="message" v-on:input="message = $event.target.value" />
数据双向绑定的理解
双向数据绑定原理是通过数据劫持来监听数据变化，利用发布-订阅模式来广播和处理这些变化，而 v-model 指令则提供了一种方便的语法来应用和管理这种双向绑定
Vuex
-vuex是一个公共的状态管理工具，通常用于管理一些公共的状态，也可以用来进行组件之间的通信
五个核心
-state：用于存储公共状态
-getters：用于处理state之后得到的一些结果，类似于computed
-mutations：用来改变state
-actions：用来处理一些异步任务
-modules：当项目过大，每个模块需要自己独立的公共状态
页面刷新后vuex状态会丢失吗
-会，vuex存储数据只是存储在内存中，刷新必然会丢失状态，需要持久化就要存起来
-locastorage就很适合，在提交mutation的时候同时存入到locastorage中，或者存储到数据库
-但是并不是所有的数据都需要做持久化尺寸，我们可以通过vue-persist（per 赛 s t）这种第三方库去做一个判断，根据我们配置的数据进行存储。
action 和 mutation 区别
- 在vuex中，actions和mutations（new tei shen）分别用于处理同步操作和异步操作
NextTick
是什么
-NextTick是等待下一次Dom更新的工具方法
-在修改数据之后立即使用这个方法，可以获取更新后的Dom
-当数据被修改后，vue会开启一个异步的更新队列，视图需要等队列中全部的数据变化后才会更新，所以当我们修改数据后，立刻去获取对应的dom节点的数据，获取到的还是更新前的数据，是用nextTick方法后，在获取对应的dom节点，即可获取到更新后的dom
使用方法
1.直接使用 2.在回调函数中使用
this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
// 方法二
this.$nextTick(function () {
console.log(this.$el.textContent) // => '修改后的值'
})
// 方法一
await this.$nextTick()
console.log(this.$el.textContent) // => '修改后的值'
使用场景
-在created生命周期阶段需要获取到dom时
-响应式数据变化后获取到Dom更新后的状态，例如希望获取列表更新后的高度
keep-alive
是什么
-keep-alive是vue的内置组件，可以在开发中缓存组件
-使用keep-alive包裹动态组件component时，会缓存组件实例，而不是销毁它，这样在组件切换的过程中可以将状态保留在内存中，防止重复渲染Dom。
使用方法
可以设置以下三个props属性
-include：只有名称匹配的组件会被缓存
-exclude：任何名称匹配的组件都不会被缓存
-max：最多可以缓存多少组件实例
特性
使用keep-alive的组件，会多出两个生命周期
-activated （阿 ke t v d），可以在组件被激活时调用这个钩子
-deactivated （di 阿 ke t v d），相当于销毁阶段
vue中路由管理用什么
-在vue中通常使用Vue Router进行路由管理。它是vue.js官方的路由管理器，提供了用于创建单页应用页面的路由功能
-使用Vue Router可以轻松的创建路由配置，定制不同路由路径和对应的组件，实现页面之间的导航。
-安装Vue Router后，可以在Vue入口文件中引入并使用，并可以设置它的三个路由模式
三种模式
-哈希模式（hash mode）： 它使用url井号（#）后面的部分进行路由匹配，不需要服务器端的渲染。通过javaScript的window.onhashchange事件来检测路由的变化，并相应的更新页面内容，
-历史记录模式（history mode）：利用html5的History API来实现路由，这种模式没有url更加美观没有井号。历史记录模式需要服务端的配置，已确保用户直接访问特定url时，服务器能够正确的响应对应资源。
-抽象模式（Abstract Mode）：抽象模式主要用于没有实际 URL 的环境，例如在服务器端渲染（SSR）的应用中，或者在原生应用内使用 WebView 时。这种模式通过 JavaScript 中的 window.history.pushState 和 window.history.replaceState 方法来模拟 URL 的变更
