Vue3 与 Vue2 的细微区别

Vue3 原理 : 基于ES6新增的proxy代理实现的

优点 

1. 相比 vue2 更快 更小，开发时搭配 vite 热编译瞬间完成。
2. 组合式API 搭配 es6 的语法编写代码很舒适。
3. 没有this,降低代码耦合性,提高了复用性

区别 、

一 、响应式原理不同

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

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

二 、 启动方式不同

// vue2 
new({
 store,router,render:h=>h(App)
}).$mount("#app")


// vue3
import {createApp} from 'Vue'
createApp(App).use(store).use(router).mount("#App")

三 、全局方法定义

// vue2
vue app - createApp(App)

// vue3
var app = cretadApp(App)
app.config.globalProperies.$http = axios

四 、 template 根组件

Vue2  有且只有一个根组件 、Vue3 没有固定的根节点

五 、 生命周期

Vue3 => Vue2

• beforeDestroy 改名为 beforeUnmount
• destroyed 改名为 unmounted
• beforeCreate => setup
• created => setup
• beforeMount => onBeforeMount
• mounted => onMounted
• beforeUpdate => onBeforeUpdate
• updated => onUpdated
• beforeUnmount => onBeforeUnmount
• unmounted => onUnmounted

setup() {
    onMounted(()=>{
      console.log("组件已经挂载完毕");
      // myp.value就是dom节点
      myp.value.addEventListener("click",()=>alert(myp.value.innerText))
    })
}

六 、 setup 组件

setup() 函数在组件创建 created() 之前执行。

setup() 函数接收两个参数 props 和 context。

第一个参数 props，它是响应式的，当传入新的 prop 时，它将被更新。

第二个参数 context 是一个普通的 JavaScript 对象，它是一个上下文对象，暴露了其它可能在 setup 中有用的值。
 

注：在setup 不需要出现this

// 简易计数器
<template>
    <div>
        <p>计数器实例: {{ count }}</p>
        <input @click="myFn" type="button" value="点我加 1">
    </div>
</template>

<script>
import {ref, onMounted} from 'vue';

export default {
    setup(){
        //定义初始值为0的变量，要使用ref方法赋值，直接赋值的话变量改变不会更新 UI
        let count = ref(0);

        // 定义点击事件 myFn
        function myFn(){
            console.log(count);
            count.value += 1;
        }
       
       // 组件被挂载时，我们用 onMounted 钩子记录一些消息
        onMounted(() => console.log('component mounted!'));

        // 外部使用组合API中定义的变量或方法，在模板中可用。
        return {count,myFn} // 返回的函数与方法的行为相同
    }
}
</script>

七 、 ref 创建响应式数据

使用ref可以创建一个包含响应式数据的引用对象（reference对象，简称ref对象），可以是基本类型、也可以是对象。

// 导入ref
import { ref } from "vue";
// 创建
const msg = ref(value)

// 响应式对象
const list = reactive(["vue","react","angular"])

// 使用
msg.value
// 在模板中
<div>{{msg}}</div>
<div v-for="item in list" :key="item">
   {{ item }}
</div>