Vue3基础语法

Vue3的基础用法

安装

第一步：安装：npm i @vue/cli -g全局安装脚手架
第二步：创建vue项目：vue create 项目名称

Vue3的特点

• 新增了组合式api
• 更加接近原生js
• 实现了按需加载
• 更加解耦（react的启发）

VSCode编辑器关于Vue3的插件

• Vetur
  

• Vue Volar extension Pack（插件包）
  

关于vue3与vue2的相同与不同

相同

vue3与vue2大体上基本相同

不同

一、启动方式不同
vue3：

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

vue2：

import Vue from 'vue'
new Vue({router,store,render: h => h(App)}).$mount('#app')

二、全局方法挂载不同
vue3：

app.config.globalProperties.$say= function(msg){alert(msg)}

vue2：
Vue.prototype.$say = function(msg){alert(msg)}

三、根节点
vue3可以有多个根节点
vue2只能有一个根节点
四、生命周期
vue3：
beforeUnmount()：组件刚要卸载
unmounted()：组件已经卸载
vue2
beforeDestroy（）
Destroyed（）

Vue3新增的setup api

• ref：

1.创建值类型响应式方法
2.在setup内部需要.value来访问设置值

• reactive：
  创建引用类型响应式数据方法
• defineProps
  定义父组件的传参props
• defineEmits
  定义组件发送的事件
• defineExpose
  定义哪些方法可以被引用
• watch
  监听一个数据的变化
• watchEffect
  监听多个数据
• 生命周期
  1.setup中没有beforeCreate和created
  2.setup的生命周期前面需要加on
  3.onMounted挂载完毕
  4.onbeforemount挂在前
  5.onUpdated更新完毕
  6.onbeforeUpdate更新前
  7.onUnmounted卸载完毕
  8.onbeforeUnmount卸载前