|
目录
Vue2和Vue3的区别
vue3的优点
vue2和vue3的启动方式
vue2的启动方式
vue3的启动方式
vue3的全局方法定义?
?setup组合api
?按需引用
如何解决无法获取this的办法
总结
许久不见，小伙伴们，最近呢我又略(努)微(力)学习了一下vue3，当然vue3其实刚出来时大部分编程人员用过之后都感觉不太好，当然刚学时我也觉得不是很好用，但是在我稍稍学习了以后，我感觉还不错，其实也就和vue2稍微有点不一样，大部分的还是比较兼容的，但在刚学时，由于里面无法直接使用this让我可吃了不少苦头，但这并没有打退堂鼓，于是我在一些前辈的帮助下，终于摸清了一点门路，于是我便急不可耐的和大家简单总结一下，由于两者只是稍微差别，我便简单的总结一下，下面请看我对它的单独见解：
Vue2和Vue3的区别
vue3的优点
1. 基本兼容vue2代码
2.?按需引用
3.组合式api：更加接近原生js，更加直观
4.没有this，更有效的降低了代码的耦合性
vue2和vue3的启动方式
vue2的启动方式
import Vue from 'vue'
import App from './App.vue'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
vue3的启动方式
var app=createApp(App);
app.use(store).use(router).mount('#app')
vue3的全局方法定义?
?app.config.globalProperties.$mysay=function(){}
?setup组合api
?ref定义值类型数据
?reactive定义引用类型的数据
示例：
?<p>{{num}}</p>
<p v-for="item in list">{{item}}</p>
<script>
import{ref,reactive} from 'vue'
export default{
setup(){
const num=ref(5);
const list=reactive({"vue","react","angular"})
return {num list}
}
}
</script>
?按需引用
// vue3最大的不同 按需导入,组合式api
import{ref,reactive,computed,watch,watchEffect,onMounted,onUnmounted}from'vue'
如何解决无法获取this的办法
onMounted(()=>{
// 获取当前的实例(由于没有this,只能这样使用，请谨慎使用)
var app=getCurrentInstance()
// 获取实例data的msg
console.log(app);
console.log(app.data.msg);
var appS=getCurrentInstance().appContext.app
appS.config.globalProperties.$mysay()
})
不建议这样使用因为会破坏代码的耦合性，并且getCurrentInstance()只能在生命周期和setup()中使用?
总结
vue2和vue3各有千秋，但vue2对已经熟悉的我来说更加方便，但这并不代表vue3无法做到类似的事情，好了，今天的总结到此结束，我是梦魇，再见啦！
|