一、VUE3快速上手

安装Vue.js

我们可以从Vue官网获取Vue.js 3的CDN链接，也可以使用npm安装，可选择全局安装或仅对特定项目安装。

// 全局安装
npm install -g vue@next
// 局部安装
npm install vue@next

创建Vue应用程序

我们可以通过CDN链接或本地安装的Vue.js创建Vue应用程序。使用Vue.createApp()可以创建一个Vue实例。

// 通过CDN链接创建Vue应用程序
const app = Vue.createApp({
  //.....
})

// 通过本地安装创建Vue应用程序
import { createApp } from 'vue'
const app = createApp({
  //.....
})

数据绑定

Vue.js对数据的双向绑定是其最重要的特性之一。使用"v-model"指令可以实现双向绑定数据的目的。

{{ msg }}

当用户输入任何数据时，该数据将被自动绑定并通过"msg"变量显示出来。

二、常用API函数汇总

Data

VUE3改变数据是常见操作，Vue3通过新的API进行了全面升级，常用的API函数有“reactive”、“toRef”、“toRefs”、“readonly”、“shallowReactive”、“shallowReadonly”等。

import { reactive, toRef, toRefs, readonly, shallowReactive, shallowReadonly } from 'vue';

// 响应式对象（reactive）将对象转换为响应式数据对象
const state = reactive({
  count: 0
})

// ToRef 将响应式对象的某个响应式属性转化为普通属性
const countRef = toRef(state, 'count')

// ToRefs 将响应式对象的全部响应式属性转化为普通属性
const stateRefs = toRefs(state)

// Readonly 转换出一个只读的响应式对象
const readonlyState = readonly(state)

// ShallowReactive，浅响应式转换
const shallowState = shallowReactive(state)

// ShallowReadonly,浅只读转换
const shallowReadonlyState = shallowReadonly(state)

Computed

"computed"是一个Vue.js中非常有用的属性。在Vue 3中，我们可以使用“computed”函数来创建计算属性。

import { computed } from 'vue';

const state = reactive({
  count: 0
})
// 创建计算属性
const computedCount = computed(() => {
  return state.count + 1;
})

watch

"watch"是Vue.js中的另一个常用属性。使用“watch”函数可以监控数据的变化。

import { watch } from 'vue';

watch(() => {
  return state.count;
}, (newVal, oldVal) => {
  console.log("Count changed from " + oldVal + " to " + newVal)
})

生命周期函数

在Vue.js应用程序中，生命周期函数很重要，Vue3中常用的生命周期函数有“beforeCreate“、“created”、“beforeMount”、“mounted”、“beforeUpdate”、“updated”、“beforeUnmount”、“unmounted”。

import { onBeforeMount, onMounted, onBeforeUnmount, onUnmounted } from 'vue';

const App = {
  template: '
Hello, Vue 3!
',
  onBeforeMount() {
    console.log("Before Mount")
  },
  onMounted() {
    console.log("Mounted")
  },
  onBeforeUnmount() {
    console.log("Before Unmount")
  },
  onUnmounted() {
    console.log("Unmounted")
  }
}

三、总结

VUE3是一个易于学习和使用的前端框架。Vue.js的双向绑定机制是它的核心价值观，Vue3的“reactive”、“toRef”、“toRefs”、“readonly”、“shallowReactive”、“shallowReadonly”等API函数都对数据的改变和绑定有全面的优化。在Vue.js中，“computed”和“watch”是两个常用的属性。此外，在Vue3中使用更加灵活的函数方式来创建生命周期函数。