vue3 语法速览

vue3 语法速览

简介

• 刚接触 vue, 看着网上的教学头大? 傻傻分不清到底哪个才是 vue3 的新语法? 你需要的是这篇文章!
• 本文是作者刚接触 vue3 从踩坑到入门的一些记录, 仅供参考, 如有错误, 请指出, 谢谢!
• 本文适合 vue 零基础,想迅速上手 vue 却被网上的 vue2 和 vue3 混杂的教程搞得摸不清楚头脑的同学
• 强烈建议遇到问题时, 查看vue 官方文档! vue 官方文档做了非常好的中文化, 不用担心机翻看不懂.

选项式 API 和组合式 API 的那些不同

构建 SFC(单文件组件)

• Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API. 为了看出它们的区别, 我们举一个简单的例子: 声明一个响应式变量, 在页面中显示, 同时有一个按钮, 点击按钮, 响应式变量加一.
• 选项式 API (Options API): 用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted

<template>
  <button @click="click">Count is: {{ count }}</button>
</template>
<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    click() {
      this.count++
    }
  }
}
</script>

• 组合式 API (Composition API):setup() 函数是组合式 API 的入口点. 使用响应式 API 来声明响应式的状态，并在 setup() 函数中返回, 将其暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性：

<template>
  <button @click="click">Count is: {{ count }}</button>
</template>
<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const click = () => count.value++

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count,click
    }
  }
}
</script>

• 组合式 API 还提供了更加简洁的语法: setup语法糖, 在script标签中加上setup属性, 就可以省略setup函数了, 例如上面的例子可以简写为:

<template>
  <button @click="click">Count is: {{ count }}</button>
</template>
<script setup>
import { ref,onMounted } from 'vue'
const count = ref(0)
const click = () => count.value++
</script>

• 看出区别了吗?
  • 选项式 API 不需要声明响应式, 用包含多个选项的对象来描述组件的逻辑
  • 组合式 API 需要声明响应式, 用 API 函数来描述组件的逻辑
• 选项式 API 和组合式 API 没有优劣之分, 可以相互转换. 使用组合式 API 和setup语法糖, 大大减少了代码量, 所以在 vue3 中, 推荐使用组合式 API 和setup语法糖.

模版引用

• ref属性: vue 是不推荐直接进行 dom 操作的, 但是有时候不得不这么做, 比如想要获取某个 dom 元素的宽高, 这时候就需要用到模版引用.
• 还是举个例子, 要获取一个p标签
  • 在p标签中增加一个属性ref, 例如: <p ref="p">我是p标签</p>
  • 访问p标签:
    • 选项式 API : 通过this.$refs.p获取
    • 组合式 API : 用ref声明一个和标签中的ref属性同名的变量: const p = ref()

钩子函数

• 举个例子: 在组件挂载后, 打印一句话

  • 选项式 API : 在mounted钩子中打印

  <script>
  export default {
      mounted() {
      console.log(`the component is now mounted.`)
      }
  }
  </script>
  

  • 组合式 API : 在onMounted钩子中打印

  <script setup>
    import {onMounted} from 'vue'
    onMounted(() => {
      console.log(`the component is now mounted.`)
    })
  </script>