vue3的基础

vue3的安装

安装脚手架

npm i @vue/cli -g

创建vue3项目

 

vue create 项目名称

vue3的特点

1. 新增组合式api

2. 更加接近原生js

3. 按需加载

vscode插件推荐

vetur

Vue Volar extension Pack

vue3与vue2的差异

vue3与vue2基本相同但有有所不同

1启动方式

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

vue2
import Vue from 'vue'
new Vue({
   store,
   router,
  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()

组件已经卸载

setup api

五、setup api

setup组件：使用setup 可以简写（不用导出，组件不用注册了）

1、ref

      创建值类型响应式数据方法

      在seup内部需要.value来访问设置值

2、reactive

      创建引用类型响应式数据方法

3、defineProps

     定义组传的传参props

4、defineEmits

     定义组件发送的事件

5、watch

     监听—个数据的变化

6、watchEffect

     监听多个数据

 7、生命周期

     setup中的生命周期,没有beforecreate与created

     setup的生命周期需要加on前缀