Vue2与Vue3的语法对比

Vue2与Vue3的语法对比

Vue.js是一款流行的JavaScript框架,通过它可以更加轻松地构建Web用户界面。随着Vue.js的不断发展,Vue2的语法已经在很多应用中得到了广泛应用。而Vue3于2020年正式发布,带来了许多新的特性和改进,同时也带来了一些语法上的变化。下面就让我们来探讨一下Vue2和Vue3之间的语法差异。

Composition API

Vue3推出的最重要的特性之一是Composition API,它可以帮助我们更好地组织和重用代码。在Vue2中,我们通常使用Options API,按功能划分代码选项并将它们包含在组件选项中。而在Vue3中,我们可以使用Composition API,这种方式是基于逻辑而不是选项的。

下面是一个选项API的示例:

js 复制代码
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

下面是一个使用Composition API的相同功能的示例:

js 复制代码
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })
    const increment = () => {
      state.count++
    }

    return { state, increment }
  }
}

setup() 函数

在Vue3中,setup() 函数是组件初始化的入口点,而在Vue2中,我们一般在不同的生命周期钩子函数中处理组件的初始化逻辑。setup() 函数可以让我们更好地控制变量的可见性,并且可以让我们在组件实例化之前进行一些操作。

Teleport

Vue3中新加入了 Teleport 组件,它可以让我们在DOM结构中轻松地处理模态框和下拉菜单等功能。 Teleport 具有两个属性,一个是 to 属性,这个属性指定了组件要移动到的位置;另一个是 disabled 属性,可以防止组件移动到不合适的位置。

以下是一个 Teleport 组件的示例:

html 复制代码
<template>
  <teleport to="body">
    <div class="modal">
      <h4>Hello World</h4>
      <p>Welcome to the world of Vue 3.</p>
    </div>
  </teleport>
</template>

Fragments

Vue3中还引入了另一个实用的特性,即Fragments。 一个Vue2组件只能有一个顶级标签,如果你需要在一个组件中使用多个 HTML 元素,那你必须将它们放在一起并将它们包装在一个顶级标签中。但是,在Vue3中,你可以在组件中使用多个顶级标签,并将它们组合成一个Fragment。

以下是一个使用Fragment的示例:

html 复制代码
<template>
  <>
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </>
</template>

计算属性 (Computed Properties)

在Vue中,计算属性(Computed Properties)是用来处理需要根据其他响应式数据计算得出的属性。

在Vue2中,我们使用computed选项来定义计算属性。计算属性会自动响应数据的变化并进行重新计算。

例如,在Vue2中定义一个计算属性:

html 复制代码
<template>
  <div>
    <p>数量: {{ count }}</p>
    <p>计算后的总数: {{ sum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 5,
      price: 10
    }
  },
  computed: {
    sum() {
      return this.count * this.price
    }
  }
}
</script>

在Vue3中,计算属性的写法略有不同,我们可以使用computed函数来定义计算属性:

html 复制代码
<template>
  <div>
    <p>数量: {{ count }}</p>
    <p>计算后的总数: {{ sum }}</p>
  </div>
</template>

<script>
import { computed, reactive } from 'vue'

export default {
  setup() {
    const data = reactive({
      count: 5,
      price: 10
    })
    
    const sum = computed(() => {
      return data.count * data.price
    })

    return {
      ...data,
      sum
    }
  }
}
</script>

无论是在Vue2还是Vue3中,计算属性的定义方式都允许我们根据需要动态计算数据,并确保计算结果与依赖的响应式数据保持同步。

监听属性 (Watchers)

在Vue中,我们可以使用watch选项来监听数据变化并执行相应的操作。

在Vue2中,我们使用watch选项来定义一个Watcher:

html 复制代码
<template>
  <div>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '张三',
      age: 25
    }
  },
  watch: {
    name(newVal, oldVal) {
      console.log(`姓名从 ${oldVal} 变为 ${newVal}`)
    },
    age(newVal, oldVal) {
      console.log(`年龄从 ${oldVal} 变为 ${newVal}`)
    }
  }
}
</script>

在Vue3中,我们使用watch函数来定义一个Watcher:

html 复制代码
<template>
  <div>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
  </div>
</template>

<script>
import { reactive, watch } from 'vue'

export default {
  setup() {
    const data = reactive({
      name: '张三',
      age: 25
    })

    watch(() => data.name, (newVal, oldVal) => {
      console.log(`姓名从 ${oldVal} 变为 ${newVal}`)
    })

    watch(() => data.age, (newVal, oldVal) => {
      console.log(`年龄从 ${oldVal} 变为 ${newVal}`)
    })

    return {
      ...data
    }
  }
}
</script>

无论是在Vue2还是Vue3中,我们可以使用Watcher来监听数据的变化,并在数据发生改变时执行特定的操作。Vue3中的watch函数使用了更为函数式的API风格,需要将要监听的数据包装在一个函数中并返回。

相关推荐
轻口味35 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami37 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
wakangda1 小时前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡1 小时前
lodash常用函数
前端·javascript
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O2 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235952 小时前
web复习(三)
前端
迷糊的『迷』2 小时前
vue-axios+springboot实现文件流下载
vue.js·spring boot