[JavaScript知识库]vue3学习之路-准备工作

一、node.js升级

工欲善其事，必先利其器。首先升级node.js

Node.js下载链接：https://nodejs.org/zh-cn/download/

这里我下载的是node-v16.16.0-x64.msi安装包，直接覆盖之前的版本一键next安装。

在覆盖安装时需要注意以下几点：

（1）、为了不再重复配置环境变量，我们首先需要知道之前的低版本node的安装路径

在高级系统设置的path中查看node的安装路径，在覆盖安装中可以直接安装在原路径下

（2）、安装之后，查看是否安装成功，可以在命令窗输入node -v查看node的版本

二、vue3初认识

1、vue3使用的是MVVM架构

2、vue3支持两种API风格

（1）选项式 API，类似于vue2的风格

<template>
  <div></div>
</template>
<script>
export default {
  name: "Test",
  components: {},
  props: [],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {},
};
</script>

（2）组件式API，类似于react的风格

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

3、创建vue对象:vue2和vue3的不同

vue2中使用new Vue({})的方式创建Vue对象

new Vue({
  el: '#app',//el属性的作用：用于要关在要管理的元素
  router,
  components: { App },
  template: '<App/>'
})

vue3中使用createApp的方式创建Vue对象

import { createApp } from 'vue'
createApp(App).use(router).mount('#app')