一、Vue3的优点
-
按需导入,需要什么功能导入什么
-
写法更加接近原生js,阅读更清晰
-
没有this,降低代码耦合性,提高了复用性
二、响应式原理
vue2响应式原理采用Object.defineProperties
监听对象的getter与setter
vue3 pxoy代理的方式监听对象
三、启动方式不同
1.vue2启动代码如下
//vue2
new Vue({
store,
router,
render:h=>h(app)
}).$mount(#app)
2.vue3启动代码如下
//vue3
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
var app = createApp(App)
app.use(store).use(router).mount('#app')
四、全局方法定义
vue2
Vue.prototype.$http='axios'
vue3
var app =createApp(App)
app.config..globalProperties.$http=axios;
五、template根组件的不同
- vue2有且只有一个根组件
- vue3随意
六、生命周期
vue3没有销毁前后(beforeDestroy,destroyed),有卸载前后(beforeUnmount,unmounted)
七、获取窗口宽高的方法
// html代码
<template>
<div>
<h1>自定义api组合zpi</h1>
<p>{{winsize}}</p>
</div>
</template>
<script>
import useWinSize from '@/utils/useWinSize'
export default{
setup() {
const winsize = useWinSize()
return {winsize}
}
}
</script>
// js代码(src目录新建js)
import {reactive,onMounted,onBeforeUnmount} from 'vue'
// 定义一个获取窗口宽高的方法,
function useWinSize(){
var size = reactive({
w:window.innerWidth,
h:window.innerHeight,
})
onMounted(()=>{
window.addEventListener("resize",changeHd)
})
onBeforeUnmount(()=>{
window.removeEventListener("resize",changeHd)
})
function changeHd(){
size.w = window.innerWidth;
size.h = window.innerHeight;
}
// 返回一个固定值
return size
}
// 导出
export default useWinSize