Vue总结

Vue指令

1.v-bind：用于动态绑定HTML属性。

<img v-bind:src="imageUrl">

2.v-if 和 v-else：根据条件切换元素的显示和隐藏。

<div v-if="isShow">显示内容</div>
<div v-else>隐藏内容</div>

3.v-show：根据条件控制元素的显示和隐藏。

<div v-show="isShow">显示/隐藏内容</div>

4.v-for：循环渲染列表或对象的内容。

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

5.v-on 或者简写 @：绑定事件监听器。

<button v-on:click="handleClick">点击事件</button>
<!-- 或简写为 -->
<button @click="handleClick">点击事件</button>

6.v-model：实现表单元素的双向数据绑定。

<input v-model="message">

7.v-text：替代插值语法，直接设置元素的文本内容。

<span v-text="message"></span>

8.v-html：设置元素的HTML内容。

<div v-html="htmlContent"></div>

9.v-cloak：解决在Vue渲染之前显示模板表达式的问题。

<div v-cloak>{{ message }}</div>

v-once：只渲染元素和组件一次，不再响应数据的变化

<span v-once>{{ message }}</span>

vue2知识总结

1.Vue实例：

Vue实例是Vue应用的基本构建块，可以通过创建Vue实例来管理数据、处理用户交互并渲染页面。
可以在实例化Vue时传入选项对象，包括data、methods、computed、watch等，定义应用的行为和状态。
Vue实例提供了一些生命周期钩子函数（如created、mounted、updated、destroyed），它们允许你在不同的阶段执行自定义逻辑。

2.模板语法：

Vue使用基于HTML的模板语法，通过将Vue实例的数据绑定到模板中的表达式和指令，实现动态渲染。
可以在模板中使用双花括号{{}}进行插值，将Vue实例的属性值显示在页面上。
指令是带有前缀v-的特殊属性，如v-bind、v-if、v-for等，用于在模板中设置条件、循环、事件监听等。

3.computed属性和watcher：

computed属性是依赖于Vue实例的响应式数据计算得出的属性。它们会根据依赖的数据的变化自动更新。
watch选项允许你监听Vue实例的属性，当属性发生变化时执行特定的回调函数。

4.组件化开发：

Vue提供了组件化开发的机制，可以将页面拆分为多个独立可复用的组件。
组件可以有自己的数据、方法、模板和样式，组件之间可以通过props和events进行通信。
可以使用全局注册或局部注册的方式来定义组件，并在需要的地方使用。

5.生命周期钩子：

Vue实例具有一系列的生命周期钩子函数，它们允许开发者在不同的生命周期阶段执行自定义逻辑。
常用的生命周期钩子函数包括created、mounted、updated、destroyed等。
可以利用这些钩子函数来初始化数据、发送网络请求、操作DOM元素等。

6.表单处理：

Vue提供了双向数据绑定和表单输入绑定，使得处理表单更加方便。
可以使用v-model指令将输入元素与Vue实例的属性进行双向绑定，实现数据的实时更新。
还可以使用修饰符（如.number、.trim）来对输入进行格式化和处理。

7.Vue Router：

Vue Router是Vue官方提供的路由管理器，用于实现单页应用（SPA）中的路由功能。
可以定义多个路由，每个路由对应一个组件，通过配置映射关系，实现URL和组件的对应关系。
Vue Router还提供了导航钩子函数（如beforeEach、afterEach），可以在路由切换前后执行自定义逻辑。

8.Vuex：

Vuex是Vue官方提供的状态管理库，用于集中管理Vue应用的状态。
Vuex将应用的状态存储在一个全局的store对象中，可以通过mutations来修改状态，通过getters来获取状态。
可以使用actions来执行异步操作，然后提交mutations来修改状态。

vue2的语法

1.模板语法：

插值：使用双花括号{{}}将表达式插入到模板中，如{{ message }}。
指令：以v-开头的特殊属性，用于响应式地对DOM进行操作，如v-bind、v-if、v-for等。

2.数据绑定：

单向绑定：使用v-bind指令将Vue实例的数据绑定到DOM元素的属性上，如。
双向绑定：使用v-model指令将表单元素和Vue实例的数据进行双向绑定，如。

3.计算属性和观察者：

计算属性：通过定义computed属性来根据其他属性计算衍生出的属性，Vue会缓存计算结果，只有依赖发生改变时才重新计算。
观察者：通过定义watch选项来观察Vue实例的属性，并在属性变化时执行相应的逻辑。

4.条件渲染和列表渲染：

条件渲染：使用v-if、v-else-if、v-else指令根据条件判断是否渲染DOM元素。
列表渲染：使用v-for指令根据数组或对象的内容进行循环渲染DOM元素。

5.方法绑定和事件处理：

方法绑定：通过methods选项定义方法，然后使用v-on指令将方法绑定到事件上，如Toggle。
事件修饰符：在事件绑定时使用修饰符来对事件进行特殊处理，如.stop、.prevent、.once等。

6.组件化开发：

组件定义：使用Vue.component全局注册或在Vue实例中局部注册组件。
组件通信：通过props向子组件传递数据，通过事件向父组件发送消息。

Vue3知识点总结

1.Composition API：

Vue 3引入了Composition API，提供了一种新的组织和重用逻辑的方式。
可以使用setup函数来编写组件的逻辑代码，通过引入和使用逻辑功能的函数来代替传统的选项对象。
Composition API支持将相关的逻辑功能组织在一起，提高了代码的可读性和可维护性。

2.模板语法：

Vue 3的模板语法与Vue 2基本相同，支持插值、指令和事件监听等功能。
模板中的指令语法进行了一些优化，如v-bind改为简写的:，v-on改为简写的@。

3.数据响应性：

Vue 3引入了ref和reactive函数来实现数据响应式。
使用ref函数来创建一个包装过的响应式对象，使用.value属性来访问和修改其值。
使用reactive函数将一个普通对象转换为响应式对象，可以使用解构赋值获取属性，也可以使用.value访问嵌套的响应式对象。

4.组件化开发：

Vue 3仍然支持组件化开发，但对组件定义和注册的方式进行了一些改变。
使用defineComponent函数来定义组件，将组件选项对象作为参数传入。
使用app.component方法来全局注册组件，或在组件中使用components选项进行局部注册。

5.Teleport（传送门）：

Vue 3引入了Teleport组件，用于在DOM层次结构中的任何位置渲染内容。
可以使用标签将内容传送到指定的目标位置，如…。

6.Fragments（片段）：

Vue 3支持Fragments，允许组件返回多个根级别的元素，而无需包裹在父元素中。
可以使用标签或v-if的特殊用法来创建Fragments。

7.新的生命周期钩子：

Vue 3引入了一些新的生命周期钩子函数，与Vue 2有所区别。
新增的钩子函数包括setup、beforeMount、beforeUpdate、beforeUnmount等。

8.更好的性能：

Vue 3在底层做了很多优化，提升了运行时的性能和体积。
响应式系统采用了Proxy代理，使得数据追踪更加高效。
Tree-shaking和静态提升等技术被广泛应用，减小了生成的代码大小。

Vue3与Vue2的区别

1. createApp：创建Vue应用程序实例。

const app = Vue.createApp(options)

2.defineComponent：定义组件。

const MyComponent = Vue.defineComponent(options)

3.onMounted：在组件挂载到DOM后执行回调函数。

import { onMounted } from 'vue'

onMounted(() => {
  // 执行逻辑
})

4.onBeforeMount：在组件挂载到DOM前执行回调函数。

import { onBeforeMount } from 'vue'

onBeforeMount(() => {
  // 执行逻辑
})

5.onUpdated：在组件更新后执行回调函数。

import { onUpdated } from 'vue'

onUpdated(() => {
  // 执行逻辑
})

6.onBeforeUpdate：在组件更新前执行回调函数。

import { onBeforeUpdate } from 'vue'

onBeforeUpdate(() => {
  // 执行逻辑
})

7.onUnmounted：在组件从DOM卸载后执行回调函数

import { onUnmounted } from 'vue'

onUnmounted(() => {
  // 执行逻辑
})

8.ref：创建一个响应式对象。

import { ref } from 'vue'

const count = ref(0)

9.reactive：转换一个普通对象为响应式对象。

import { reactive } from 'vue'

const state = reactive({
  message: 'Hello',
  count: 0
})

10.watch：监听一个响应式对象或表达式的变化。

import { watch } from 'vue'

watch(() => state.count, (newValue, oldValue) => {
  // 执行逻辑
})

Vue中组件传参的方式

1.Props（父组件向子组件传递数据）：

在父组件中使用v-bind指令将数据传递给子组件。
子组件中通过props选项声明接收的属性。

<!-- 父组件 -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent component'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>

2.自定义事件（子组件向父组件传递数据）：

在子组件中使用$emit触发自定义事件，并传递需要传递的数据。
在父组件上使用v-on指令监听子组件的自定义事件，并定义对应的处理方法接收子组件传递的数据。

<!-- 子组件 -->
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child component');
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component @message="handleMessage"></child-component>
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message);  // 输出：Hello from child component
    }
  }
}
</script>

3.Event Bus（非父子组件间传递数据）：

创建一个空的Vue实例作为事件中心。
在需要传递数据的组件中，通过事件中心的$emit方法触发自定义事件，并传递数据。在接收数据的组件中，通过事件中心的$on方法监听自定义事件，并定义对应的处理方法接收数据。

<!-- Event Bus 实例 -->
<script>
import Vue from 'vue';

export const eventBus = new Vue();
</script>

<!-- 发送数据的组件 -->
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
import { eventBus } from './event-bus.js';

export default {
  methods: {
    sendMessage() {
      eventBus.$emit('message', 'Hello from child component');
    }
  }
}
</script>

<!-- 接收数据的组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { eventBus } from './event-bus.js';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    eventBus.$on('message', (message) => {
      this.message = message;
    });
  }
}
</script>