Vue3基础

一、Vue3的优点

1. 按需导入,需要什么功能导入什么

2. 写法更加接近原生js,阅读更清晰

3. 没有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根组件的不同

1. vue2有且只有一个根组件
2. 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