博客网

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 再调用插件