vue3基础

概览

• vue3特点
• vue3启动方式
• 全局方法的定义
• 全局挂载方法
• compositionApi
• setup
• 响应式数据
• computed计算
• watchEffect监听
• watch监听单个对象
• 生命周期
• 组件传递
• 跨层传参
• 全局配置

vue3特点

按需引用

组合式api

• 更加接近原生js，更加直观。没有this，更有效的降低了代码的耦合性

vue3启动方式

var App = createApp(App);
app.use(router).use(store).mount("#App")

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

全局方法的定义

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

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