Vue3从入门到精通(一)

需要注意的是，key属性的值必须是唯一的，不能重复。如果重复了，会导致Vue无法正确地识别每个组件或元素的状态，从而导致渲染错误。

在Vue3中，事件处理的方式与Vue2相似，可以使用@或v-on指令来绑定事件。不同之处在于，Vue3中取消了.sync修饰符，同时提供了新的修饰符和事件API。

绑定事件

可以使用@或v-on指令来绑定事件，语法与Vue2相同。示例如下：

<script>export default {  methods: {    handleClick() {      console.log("Button clicked!")    }  }}</script>

上面的代码中，使用@click指令来绑定handleClick方法，当按钮被点击时，会触发handleClick方法。

事件修饰符

Vue3中提供了新的事件修饰符，包括.stop、.prevent、.capture、.self、.once和.passive。示例如下：

<script>export default {  methods: {    handleClick() {      console.log("Div clicked!")    }  }}</script>

上面的代码中，使用.stop修饰符来阻止事件冒泡，当div元素被点击时，不会触发其父元素的点击事件。

动态事件名

在Vue3中，可以使用方括号来绑定动态事件名。示例如下：

​<script>export default {  data() {    return {      eventName: "click"    }  },  methods: {    handleClick() {      console.log("Button clicked!")    }  }}</script>

上面的代码中，使用@[eventName]指令来绑定动态事件名，事件名为eventName的值。

自定义事件

在Vue3中，可以使用createApp方法的provide和inject选项来实现自定义事件的传递。示例如下：

// App.vue​<script>import { provide } from "vue"import EventBus from "./EventBus"​export default {  setup() {    provide("eventBus", EventBus)  },  methods: {    handleClick() {      EventBus.emit("customEvent", "Hello, Vue3!")    }  }}</script>​// EventBus.jsimport mitt from "mitt"​const EventBus = mitt()​export default EventBus​// ChildComponent.vue​<script>import { inject } from "vue"​export default {  setup() {    const eventBus = inject("eventBus")    const message = ref("")​    eventBus.on("customEvent", (data) => {      message.value = data    })​    return {      message    }  }}</script>

上面的代码中，使用provide方法将事件总线对象EventBus注入到根组件中，然后在子组件中使用inject方法获取事件总线对象，并通过on方法监听自定义事件customEvent，当事件触发时，更新message的值。

在Vue3中，事件传参的方式和Vue2基本相同，可以使用$event来传递事件对象，也可以使用函数来传递自定义参数。

示例代码如下：[page]

​<script>export default {  methods: {    handleClick(event, arg) {      console.log(event) // 输出事件对象      console.log(arg) // 输出自定义参数    }  }}</script>

上面的代码中，使用$event来传递事件对象，使用"参数"来传递自定义参数。[page]

另外，如果需要在事件处理函数中访问组件实例，可以使用箭头函数来绑定作用域，例如：

​<script>export default {  methods: {    handleClick(arg) {      console.log(this) // 输出组件实例      console.log(arg) // 输出自定义参数    }  }}</script>

上面的代码中，使用箭头函数来绑定作用域，从而在事件处理函数中访问组件实例。

在Vue3中，事件修饰符的使用方式和Vue2基本相同，可以通过在事件名后面添加.修饰符的方式来使用事件修饰符。

常用的事件修饰符包括：

.stop：阻止事件冒泡

.prevent：阻止事件默认行为

.capture：使用事件捕获模式

.self：只在事件目标自身触发时触发事件

.once：只触发一次事件

.passive：告诉浏览器该事件不会调用preventDefault()方法，可以优化页面滚动性能

示例代码如下：[page]

​<script>export default {  methods: {    handleClick() {      console.log("点击事件")    },    handleScroll() {      console.log("滚动事件")    }  }}</script>

上面的代码中，使用不同的事件修饰符来控制事件的行为。例如，使用.stop修饰符来阻止事件冒泡，使用.prevent修饰符来阻止事件默认行为，使用.capture修饰符来使用事件捕获模式，使用.self修饰符来只在事件目标自身触发时触发事件，使用.once修饰符来只触发一次事件，使用.passive修饰符来告诉浏览器该事件不会调用preventDefault()方法，可以优化页面滚动性能。

在Vue3中，计算属性的使用方式和Vue2基本相同，可以通过在组件的computed选项中定义计算属性来计算和缓存值。

示例代码如下：[page]

​<script>export default {  data() {    return {      price: 10,      count: 2    }  },  computed: {    quantity() {      return this.count    },    totalPrice() {      return this.price * this.count    }  }}</script>

上面的代码中，使用computed选项来定义计算属性quantity和totalPrice，分别计算商品数量和商品总价。

在模板中，可以像访问普通属性一样访问计算属性，例如{{ quantity }}和{{ totalPrice }}。

需要注意的是，在Vue3中，计算属性的返回值可以是一个函数，这样可以实现动态计算属性。示例代码如下：

​<script>export default {  data() {    return {      price: 10,      count: 2,      discount: 0.8    }  },  computed: {    quantity() {      return this.count    },    totalPrice() {      return () => this.price * this.count * this.discount    }  }}</script>

上面的代码中，计算属性totalPrice返回一个函数，这个函数会动态计算商品总价，考虑到折扣可能会变化，因此需要动态计算商品总价。

在Vue3中，可以使用v-bind:class指令来绑定一个对象或数组来动态地设置一个元素的class属性。[page]

下面是使用对象语法绑定class的示例代码：

​<script>export default {  data() {    return {      isActive: true,      hasError: false    }  }}</script>

上面的代码中，使用:class指令来绑定一个对象，这个对象的属性名是class名称，属性值是一个布尔值，表示是否应用这个class。在这个示例中，如果isActive为true，则会应用active这个class，如果hasError为true，则会应用text-danger这个class。

下面是使用数组语法绑定class的示例代码：

​<script>export default {  data() {    return {      isActive: true,      errorClass: "text-danger"    }  }}</script>

上面的代码中，使用:class指令来绑定一个数组，这个数组的元素可以是字符串或对象。如果数组元素是字符串，则表示应用这个class；如果数组元素是对象，则表示应用这个对象中的class。

在这个示例中，如果isActive为true，则会应用active这个class，如果errorClass为text-danger，则会应用text-danger这个class。

需要注意的是，在Vue3中，可以使用动态组件来动态渲染不同的组件，这个功能可以使用元素和is特性来实现。示例代码如下：

​<script>import ComponentA from "./ComponentA.vue"import ComponentB from "./ComponentB.vue"​export default {  components: {    ComponentA,    ComponentB  },  data() {    return {      currentComponent: "ComponentA"    }  }}</script>

上面的代码中，使用元素和is特性来动态渲染不同的组件。在这个示例中，点击ComponentA按钮会渲染ComponentA组件，点击ComponentB按钮会渲染ComponentB组件。

在Vue3中，可以使用v-bind指令或简写的:来动态绑定样式。

绑定单个样式

可以使用对象语法来绑定单个样式，对象的属性名为样式名，属性值为样式值。示例如下：

​<script>export default {  data() {    return {      textColor: "red"    }  }}</script>

上面的代码中，使用:style指令来绑定color样式，样式的值为textColor的值。

绑定多个样式

可以使用对象语法来绑定多个样式，对象的属性名为样式名，属性值为样式值。示例如下：

​<script>export default {  data() {    return {      textColor: "red",      fontSize: 16    }  }}</script>

上面的代码中，使用:style指令来绑定color和fontSize两个样式，样式的值分别为textColor和fontSize的值。

绑定样式数组

可以使用数组语法来绑定多个样式，数组中的元素为样式对象。示例如下：

​<script>export default {  data() {    return {      baseStyles: {        color: "red",        fontSize: "16px"      },      customStyles: {        fontWeight: "bold"      }    }  }}</script>

上面的代码中，使用:style指令来绑定baseStyles和customStyles两个样式对象，样式的值为两个对象的合并结果。

绑定样式对象

可以使用计算属性来动态绑定样式对象。示例如下：

​<script>export default {  data() {    return {      textColor: "red",      fontSize: 16    }  },  computed: {    computedStyles() {      return {        color: this.textColor,        fontSize: this.fontSize + "px"      }    }  }}</script>

上面的代码中，使用计算属性computedStyles来动态绑定样式对象，样式的值为计算属性的返回值。[page]