Vue3基础安装教程

VUE3安装

网址：https://vue3js.cn/（这个不是官网，是由国内Vue爱好者共同搭建）
全局安装脚手架：npm i @vue/cli -g
vue create 项目名称 （这个的意思是创建(vue create) 项目名(项目的名称)）

安装组件

vue3特点

• 新增组合式api
• 更加接近原生js
• 按需加载

vscode插件推荐

• vetur
• Vue Volar extension Pack（可以直接搜Volar）

vue3与vue2基本相同

1、 都支持服务器端渲染
2、 都有Virtual DOM（虚拟dom），组件化开发,都有‘props’的概念，这是properties的简写。props在组件中是一个特殊的属性，允许父组件往子组件传送数据,都实现webComponent规范
3 、数据驱动视图
4 、都有支持native的方案,React的React native、Vue的weex
5 、构建工具
React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。两个工具都能让你得到一个根据最佳实践设置的项目模板。都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做）

vue3与vue2的不同点

启动方式

v3

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

v2

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

全局方法挂载

v3

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

v2

//v2
Vue.prototype.$say = function(msg){alert(msg)}

根节点

v3 可以有多个根节点
v2 只能有一个根节点

生命周期，卸载

v3

组件将要卸载	beforeUnmount()
组件已经卸载	unmounted

v2

beforeDestroy()	destroyed()

setup api

ref：

• 创建值类型响应式数据方法
• 在seup内部需要 .value 来访问设置值

reactive:

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

defineProps:

• 定义 组传的传参props

defineEmits:

• 定义组件发送的事件

watch:

• 监听一个数据的变化

watchEffect :

• 监听多个数据

生命周期:

• setup中的生命周期，没有beforeCreate与created
• setup的生命周期需要加on前缀