vue组件中class 和 style 可以通过对象语法和数组语法进行动态绑定 对象写法 <template> <div :class="{ active: isActive }"></div> <div :style="{ fontSize: fontSize }"> </template> <script> export default { data() { return { isActive: true, fontSize: 30 } } } 数组写法 <template> <div :class="[activeClass]"></div> <div :style="[styleFontSize]"> </template> <script> export default { data() { return { activeClass: 'active', styleFontSize: { fontSize: '12px' } } } } </script>
slot 插槽，可以理解为slot在组件模板中提前占据了位置。当复用组件时，使用相关的slot标签时，标签里的内容就会自动替换组件模板中对应slot标签的位置，作为承载分发内容的出口。 主要作用是复用和扩展组件，做一些定制化组件的处理。 插槽主要有3种 1）默认插槽 2）具名插槽 3）作用域插槽
设置DOM元素显示隐藏有v-show指令和v-if指令两种。 相同点：两者都是达到显示隐藏的功能 不同点：v-show指令通过修改元素的display属性让其显示或者隐藏，v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果.
computed和watch的区别 1、computed是计算属性；watch是监听，监听data中的数据变化。 2、computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行。 3、computed不支持异步，有异步操作时无法监听数据变化；watch支持异步操作。 4、computed第一次加载时就监听；watch默认第一次加载时不监听。 5、computed中的函数必须调用return；watch不是。 6、使用场景： computed：一个属性受到多个属性影响，如：购物车商品结算。 watch：一个数据影响多条数据，如：搜索数据。 数据变化响应，执行异步操作，或高性能消耗的操作，watch为最佳选择。
加载渲染过程： 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted 子组件更新过程： 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated 父组件更新过程： 父 beforeUpdate -> 父 updated 销毁过程： 父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
Vue中keep-alive组件作用是保留组件状态或避免重新渲染（缓存的作用）。 Vue中keep-alive组件有两个属性include与exclude： include：字符串或者正则表达式。只有匹配的组件会被缓存 exclude：字符串或者正则表达式。任何匹配的组件都不会被缓存。 keep-alive提供了两个生命钩子，分别是activated与deactivated。因为keep-alive会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的created、mounted这些函数。 被 keep-alive 包裹的组件被缓存之后有两个独有的生命周期： activated 和 deactivated。activated 生命周期在组件激活时调用、deactivated 生命周期在组件停用时调用。
1. ref 直接在父组件内部给子组件标签添加ref属性，然后通过ref属性来调用子组件的方法。 2. $children 在父组件的方法中，通过 $children 属性来访问子组件实例，并调用子组件的方法，返回的是一个存放所有子组件的数组。 3. $emit $on 子组件向父组件$emit消息发送和父组件$on监听
在vue2中，v-for的优先级高于v-if； 在vue3中，v-if的优先级高于v-for。 在vue中，永远不要把v-if和v-for同时用在同一个元素上，会带来性能方面的浪费（每次渲染都会先循环再进行条件判断）；想要避免出现这种情况，可在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环。 如果v-if依赖于v-for中的某一个数据，可以用computed计算属性和filter来实现。
一、$nextTick的作用 $nextTick() 是 Vue 提供的一个异步方法，用于在 DOM 更新之后执行回调函数。在 Vue 中，DOM 的更新是异步的，即 Vue 异步执行更新队列，而不是直接操作 DOM。 $nextTick() 主要用于确保在 DOM 更新完成后执行一些操作，例如在更新后操作 DOM 元素、获取更新后的元素尺寸等。 二、特点和用途 $nextTick() 会在 Vue.js 更新队列完成之后，DOM 更新之前调用传入的回调函数。 主要用于确保在 DOM 更新之后执行一些操作，以避免直接操作未更新的 DOM。 通常用于处理需要等待 DOM 更新的情况，比如在修改数据后立即获取更新后的 DOM 元素。 三、使用场景： 1、在执行mounted中方法修改了 data 的值，然后通过 $nextTick 来确保在 DOM 更新后执行回调函数。这样可以保证在回调函数中获取到最新的 DOM 内容。
mounted 如果把所有请求放在created里面的话,请求过多会,加载太慢会导致页面出现短暂的白屏情况,一般上我写的话,接口不复杂会放created里面,接口多复杂的话会放在mounted里面. mounted created 是加载DOM,html之后 就马上执行, 比如初始化,获取屏幕高度调整,赋值等等,而mounted就是执行包括js之后,准备开始调用方法,也就是说 类似传统开发那样,先加载jquery 再调用插件
