vue3基础

最新推荐文章于 2024-03-27 10:50:59 发布

HxS006

最新推荐文章于 2024-03-27 10:50:59 发布

阅读量827

点赞数 1

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/Hx006/article/details/127719746

版权

vue3

vue3 安装

    npm i @vue/cli -g   //全局安装脚手架
    vue create 项目名称

具体操作步骤
在这里插入图片描述

vue3 特点

1.新增组合式api
2.更加接近原生js
3.更加解耦（react启发）
4.按需加载

vscode插件推荐

vetur
Vue Volar extension Pack

vue3与vue2基本相同

不同

启动方式

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

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

全局方法挂载

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

//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前缀