生命周期的差别

vue3的生命周期

setup (将2.x版本中beforeCreate和created)
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
onErrorCaptured

vue2的生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate 6 updated 7 beforeDestroy
destroyed
errorCaptured

双向绑定的差别

实现双向数据绑定的原理

<html>
<head>
</head>
<body>
Name: <span id="txtName"></span>
<br />
<input id='inpName' type="text">
<script>
    let obj = {name: ''};
    let newObj = JSON.parse(JSON.stringify(obj));
    Object.defineProperty(obj, 'name', {
        get: function(){
            return newObj.name;
        }
        set: function(val){
            if(val === obj.name) return;            
            newObj.name = val;
            observer();
        }
    });
    function observer(){
        txtName.innerHTML = obj.name;
        inpName.value = obj.name; 
    }
    inpName.oninput = function(){
        obj.name = this.value;
    }
    setTimeout(() => {
        obj.name = 'Hello world';
    }, 2000);
</script>
</body>
</html>

vue3实现双向数据绑定的原理

<html>
<head>
<style> 
</style>
</head>
<body>
Name: <span id="txtName"></span>
<br />
<input id='inpName' type="text">
<script>
    let obj = {name: ''};
    obj = new Proxy(obj, {
        get(target, prop){
            return target[prop];
        }
        set(target, prop, value){
            target[prop] = value;
            observer();
        }
    });
    function observer(){
        txtName.innerHTML = obj.name;
        inpName.value = obj.name; 
    }
    inpName.oninput = function(){
        obj.name = this.value;
    }
    setTimeout(() => {
        obj.name = 'Hello world';
    }, 2000);

两者之间的区别

vue2中使用的是Object.defineProperty实现对属性的监听。缺点是一定要克隆一个新的对象进行操作，否则就会造成死循环。第二个缺点是如果有多个属性，那么就要定义多个Object.defineProperty去分别监听每一个属性。 vue3中使用了ES6中的新语法，用到了Proxy去实现监听，这样省去了克隆对象的步骤，同时不管有多少个属性只需要定义一次Proxy就可以实现多对象的监听，不同分别定义。

结构部分

1.程序主入口文件 main.js

    import App from './App.vue'
    import router from "./router"
    import store from "./store"
    new Vue({
        store,
        router,
        render: h => h(App),
    }).$mount('#app')

vue3 createApp方法

    import { createApp } from 'vue';
    import App from './App.vue'
    createApp(App).mount('#app')

组件语法部分

1.vue3.0 使用组合式api,使用的地方在setup回调函数中，这个回调函数是创建组件之前执行，由于在执行 setup 时尚未创建组件实例所以 没有this 没有this 没有this ！重要的说三遍

数据响应式

1.ref:ref 对我们的值创建了一个响应式引用。使用引用的概念将在整个组合式 API 中经常使用 在模板中解析会自动解开，直接使用。(<p>{{msg}}<p>);但是在js中必须（msg.value）

2.reactive: 响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中，返回的代理是不等于原始对象。建议只使用响应式代理，避免依赖原始对象。

3.toRefs: 将对象每个属性有具有响应式属性，并且带有ref特性；访问方式不同。可以解构赋值不影响数据的响应式.

Vue2 和 Vue3的区别