Vue3的一些小优点

---

前言

一、Vue3的优点？

1. 相比 vue2 更快 更小，开发时搭配 vite 热编译瞬间完成。
2. 组合式API 搭配 es6 的语法编写代码很舒适。

二、Vue3与Vue2的区别

1.响应式原理不同

vue2响应式原理采用的object.defireProperties 监听对象

vue3采用的pxoy代理的方式监听对象

2.启动方式不同

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')

3.全局方法定义不同

1. vue2代码如下:

//vue2
Vue.protoype.$http = axios

2. vue3代码如下:

//vue3
var app =  createApp(App)
app.config.globalProperties.$http = axios

4.template根组件的不同

1. vue2有且只有一个根组件
2. vue3随意

5.生命周期钩子函数不同

1. vue2生命周期钩子函数代码如下

//创建前后
beforecreate(),created()
//挂载前后
beforemount(),mounted()
//更新前后
beforeupdate(),updated()
//销毁前后
beforedestory(),destroyed()

2. vue3生命周期钩子函数代码如下

setup() : //开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
onBeforeMount() : //组件挂载到节点上之前执行的函数；
onMounted() : //组件挂载完成后执行的函数；
onBeforeUpdate(): //组件更新之前执行的函数；
onUpdated(): //组件更新完成之后执行的函数；
onBeforeUnmount(): //组件卸载之前执行的函数；
onUnmounted(): //组件卸载完成后执行的函数；
onActivated(): //被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
onDeactivated(): //比如从 A 组件，切换到 B 组件，A 组件消失时执行；
onErrorCaptured(): //当捕获一个来自子孙组件的异常时激活钩子函数。

三、setup组合式api的使用

1.小示例

小实例代码如下:

<template>
  <div>
    <div>
        <button @click="num++">{{num}}</button>
        <button @click="setnum">改为5</button>
        <div v-for="(item,index) in list" :key="item">{{item}}
        <button @click="list.splice(index,1)">×</button>
        </div>
        <p>{{twiceNum}}</p>
        <p ref="myp">我爱我的祖国</p>
    </div>
  </div>
</template>
<script>
// 导入一个响应式应用ref
import {ref,reactive,watch,watchEffect,computed,onMounted} from 'vue'
// 优点1:按需引入,需要什么功能导入什么
// 优点2：更加接近原生js，阅读起来更清晰
// 优点3：没有this，降低了代码耦合性，提高了复用性
export default {
  setup() {
    // console.log("组合式api","创建前后执行")
    // 定义一个值类型响应式对象num 默认值5
    const num = ref(5);
    // 定义一个引用类型响应式数据list 默认值
    const list = reactive(['vue','js','html'])
    // 定义一个修改num的方法
    function setnum(){
      // 在setup内容修改num的值要修改num。value的值
      num.value = 5
    }
    watch(num,function(nval,oval){
      console.log("num由",oval,"变化为",nval)
    })
    watchEffect(() => {
      // 只要在改变回调函数中引用的变量，都会哦监听变化
      // console.log(num.value,list[1],"变化了")
    })

    var twiceNum = computed(()=>num.value*2)
    // 在setup没有 创建前后,有挂载,更新,卸载前后
    var myp = ref(null)
    // setup中的生命周期前面加on
    onMounted(()=>{
      console.log("组件已经挂载完毕")
      myp.value.addEventListener("click",()=>alert(myp.value.innerText))
    })

    // 返回对象num
    return {num,list,setnum,twiceNum,myp}
  }
}
</script>
<style>
/* vue2代码和vue3基本相同 */
</style>

2.一个获取窗口宽高的方法

// 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