初识vue3

vue3基础

• vue3的安装与使用
• vue3的特点
• vue3和vue2启动的方式的不同
• vue3与vue2全局定义的不同
• 组合式API

vue3的安装与使用

• 1、使用cli：

vue create vue-name 选择vue3.0项目

• 2、使用vite：

npm install -g create-vite-app

• 创建项目

create-vite-app vue3_vite

• 运行

npm run dev

vue3的特点

1、基本兼容vue2代码；
2、按需引用；
3、组合式api；更加接近原生js，更加直观没有this；
4、更加有效的降低了代码的耦合性
5、书写简洁、语义明确
6、和react hooks 异曲同工

vue3与vue2的启动方式的不同

// vue3的启动方式
import {createApp} from 'vue'
import App from './App.vue'
var app = createApp(App);
app.use(store).use(router).mount('#app')

//vue2的启动方式
import Vue from 'vue'
import App from './App.vue'
 new Vue({
 router,
 store,
 render: h => h(App)
 }).$mount('#app')

vue3与vue2全局定义的不同

// vue3定义全局方法
app.config.globalProperties.$mysay=function(msg){alert(msg+'你好')}

// vue2的全局方法
Vue.prototype.$http=xxx;

组合式API

• setup组合api
  ref：定义值类型数据
  reactive：定义引用类型的数据

import {ref,reactive} from 'vue'
set(){
const num =ref(5);
const list=reactive(["vue","react","angular"])
return {num,list};
},

• computed计算

const rmsg = computed(()=>num.value.split("").reverse().join(""))

• watch监听与watchEffect监听

watch(num, (num, onum) => {
	console.log("num发生变化", num, onum);
})

const stop = watchEffect(() => {
	// 这个回调函数引用的值，都会被监听
	console.log(num.value, list[0]);
	localStorage.setItem("num", num.value);
})